afcajamarcar / simple-form Goto Github PK

This is a simple form project that contains a custom made image drag-n-drop component based on react-dropzone.

It is also connected to Firebase by using Cloud Firestore.

• React ^16.13.1
• create-react-app
• react-dropzone
• Firebase Cloud Firestore

To correctly setup this project you need, essentially two things: Nodejs and A sample project in Firebase.

1. Create a new Firebase project.
2. create a new colection called students.
3. Export your Firebase config variables to a .env.development file and give it the next structure:

    REACT_APP_FIREBASE_KEY = <string>
    REACT_APP_FIREBASE_DOMAIN= <string>
    REACT_APP_FIREBASE_DATABASE = <string>
    REACT_APP_FIREBASE_PROJECT_ID = <string>
    REACT_APP_FIREBASE_STORAGE_BUCKET = <string>
    REACT_APP_FIREBASE_SENDER_ID = <string>
    REACT_APP_FIREBASE_APP_ID = <string>

note: the .env.development must be in the root's project directory, not in src or any other folder.

4. run yarn start and test the app.

To deploy the app with Firebase's Hosting service please follow the next steps:

1. create a .env.production.local file with your Firebase project credentials as shown above
2. In the root of the project run yarn build
3. run firebase login
4. run firebase init
5. run firebase deploy

That should be it, please let me know if you have any questions about the project