Made in React Native and Firebase

• Notes: there should be a drawer menu icon on the upper left side, but I haven't figured out why the icon disappears, but it can be clicked.

• Firestore setup
  1. Navigate to your Firebase Console.
  2. Go to the Firestore Database section and click on Create Database.
  3. Choose Start in test mode and Enable.
  4. After the database is ready, navigate to it and click on Start Collection.
  5. Enter students as the Collection ID and hit Next to create the collection.

• create a .env, and save the apiKey in it.
• use EXPO_PUBLIC_API_KEY or dotenv
• use expo-constants package.

  npx expo install expo-constants
  

  and import import Constants from 'expo-constants';

• reference: https://firebase.google.com/docs/firestore/manage-data/add-data
• setDoc:If the document does not exist, it will be created. If the document does exist, its contents will be overwritten with the newly provided data.

• resource: https://firebase.google.com/docs/firestore/query-data/get-data
• sample code:

useEffect(() => {
    const fetchData = async () => {
      const dbCol = collection(db, "students"); //get collection `students`
      const dbDocs = await getDocs(dbCol); //get documents
      const studentData = [];
      dbDocs.forEach((doc) => {
        studentData.push(doc.data());
      });
      setGradebook(studentData);
    };

    fetchData();
  }, []);

• resource: https://docs.expo.dev/workflow/web/
• Install: npx expo install react-dom react-native-web @expo/webpack-config
• SUPER IMPORTANT!!!! add the following config in App.json:

"web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    }

• start the dev server, and you are supposed to get a web generated automatically. npx expo start --web
• Publish your web. Run the following code and you are supposed to have a new folder called dist npx expo export -p web

• resource:https://docs.expo.dev/distribution/publishing-websites/#firebase-hosting
• Install the Firebase CLI by running npm install -g firebase-tools
• run firebase init and choose host, or run firebase init hosting, and MUST TYPE dist when the prompt asks the pbulic path.
• Then the following prompts questions: NO, NO, NO. (No overwrite, or your web will always be the dafault Firebase page)
• Deploy: run npm run deploy-hosting or firebase deploy