Project Skeleton

📁React-MileStoneProject-FrontendEndTerm 
|
|----Readme.md         
SOLUTION
├── 📁public 
│     └── index.html  
├── 📁src 
│    ├── 📁assets     
│    ├── 📁auth 
│    │     └── firebase.js
│    ├── 📁components 
│    │     └── Navbar.js
│    ├── 📁context 
│    │     └── AuthContext.js
│    ├── 📁styling 
│    │     └── toastify.js 
│    ├── 📁pages 
│    │     ├── UpdateCard.js
│    │     ├── Login.js
│    │     ├── Register.js
│    │     ├── Main.js
│    │     ├── Profile.js 
│    │      NewCard.js 
│    │      DetailsCard.js        
│    ├── 📁router
│    │     ├── Router.js
│    │     └── PrivateRouter.js 
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
│
├── package.json
├── .env
└── yarn.lock

Outcome

Steps to Solution

• Step 1 : Created React App using npx create-react-app react-frontend-milestoneproject

• Step 2 : Signuped https://firebase.google.com/ and created new app in firebase.

• Step 3 : Used https://firebase.google.com/docs/auth/web/start and created Authentication operations.

• Step 4 : Used https://firebase.google.com/docs/database/web/start and created Realtime Database operations.

• Step 5: Installled & Used

  Material UI, toastify, formik & yup, contextAPI,
  
  random login background image from https://picsum.photos/1600/900, .env 

• Step 5: Packages:

  npm install @mui/material
  npm install @mui/icons-material
  npm install @emotion/react
  npm install @emotion/styled
  npm install --save material-ui-popup-state
  npm install --save react-toastify
  npm install formik --save
  npm install yup --save
  npm install firebase@8.6.3
  npm install react-router-dom
  npm install gh-pages --save-dev

• Step 6: Added project gif to the project and README.md file.

• Step 7: Deployed to heroku

❗❗❗ env development keys

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=\

Heroku link

👉