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.
- Create a new Firebase project.
- create a new colection called students.
- 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.
- run
yarn start
and test the app.
To deploy the app with Firebase's Hosting service please follow the next steps:
- create a .env.production.local file with your Firebase project credentials as shown above
- In the root of the project run
yarn build
- run
firebase login
- run
firebase init
- run
firebase deploy
That should be it, please let me know if you have any questions about the project