Shoppinglist App

What is this about?

A very simple Shoppinglist App for mobile devices (phones) using React Native.
The App will provide users with the possibility to create shoppinglists that can have two items per list. Shoppinglists will also be available when user does not have an internet connection.
This Shoppinglist App has been built as a small exercise for Achievement 5 in Career Foundry's Full-Stack Web Development Program. It was the preparation before adding more or less the same features to the Chat App.

Technical requirements

The Shoppinglist App

• must be written in React Native
• must be developed using Expo (Expo CLI and the Expo Go App) and Android Studio
• must not have styling
• must use Google Firebase as cloud storage solution
  • Firestore Database to store shoppinglists and shoppinglist items
  • Authentication of users (Anonymous) at first enter
• must use Expo AsyncStorage to store shoppinglists locally
• must use Expo NetInfo to detect network connection
• must enable the user to access previous shoppinglists while being offline
• must disable the user to create new shoppinglists while being offline

Feature requirements

Welcome screen:

• on press a user can enter the ShoppingLists screen and is signed up

ShoppingList screen:

• displays a simple form where a user can add a shoppinglist name and add two items
• a user can add more than one shoppinglist
• when it is detected that the user is offline, the user still can access already added shoppinglists but won't be able to add new ones as the form element to do so won't be rendered

Languages, Libraries, Frameworks, Tools

• React Native
  • JSX
  • JavaScript
• React Navigation
• Expo
  • Expo CLI and Expo Go App
  • Watchman
• Android Studio
• Google Firebase
• Expo AsyncStorage
• Expo NetInfo

Heads-up

At time of writing to use Expo CLI you need to downgrade Node to 16.19.0
Eventhough Expo's site is a bit misleading regarding LTS if you try latest you will run into an error.
Also see here.

Global

• expo-CLI - to create new projects and start running Expo

Dependencies

• expo - to set up, develop and test React Native Apps
• firebase - to enable real-time saving of shoppinglists, shoppinglist items, anonymous sign-in
• react
• react-native - to build apps for Android and iOS quickly with one codebase
• react-native-safe-area-context
• react-native-screens
• @react-native-async-storage/async-storage - to store shoppinglists offline
• @react-native-community/netinfo - to check if user is on- or offline
• react-navigation - third party library to navigate between screens
• @react-navigation/native
• @react-navigation/native-stack

Dev Dependencies

• babel

How to run this?

• as this has been built with Expo, you best have an Expo account and download Expo Go on your mobile device
• it's also beneficial to set up an emulated device via Android Studio
• before cloning check your current Node version and downgrade to 16.19.0
• after that
  • clone the repo
  • cd into project
  • npm install
• expo login will log you in via terminal
• expo whoami will check the currently logged-in account
• npm start or expo start will start the project (the Metro Bundler)
• on MAC, you do NOT need the "full" XCode version to start the Android or iOS simulator and can hit n
• then open your iPhone
• open the Expo Go App
• open the project, this will start the building of files
• control c to stop the project from running
• expo start --offline to test the app offline