- MERN Stack - MongoDB, Express, React, Node.js
- Used two types of authentication,
- basic using JWT.
- And for OAuth lovers for quickly accessing and using I used Google OAuth2.0 for authentication. With complete setup residing between client and server.
- For designing and prototypes I learned and used Figma. One of the awesome tool for designing. My Figma Link
- Components created as a mixture by me using both my designs and ant design.
- Client made with the latest ES6 and hooks way.
- State management is handled by native implementations with the help of
- React Context and providers
- useReducer
client; // contains all client's code (React)
server; // contains server code (Mongodb, express, Node)- Create a online Atlas Mongo DB connection from this link.
- Add them to my project by creating a file
.envat location./serverand the file will reside inserver/.env.
PORT=8080
JWT_PRIVATE_KEY=<your jwt private key>
MY_MONGODB_USERNAME=<your mongodb username>
MY_MONGODB_PASSWORD=<your mongodb password>Then the database will be setup and collections, databases will be handled automatically by my server.
- As I don't have time to host my server Google authentication won't be working. 😢.
- If you're interested, create a dummy app in Google Developer Console. And append the
clientIdin the fileApp.jsandAuthPage.jsthere are the two places where we seek google for user authentication. - Once done it will be completely setup
PS: I know completely running and up checking my setup is difficult. I'm writing this in the last hour so I too couldn't give the complete docs with absolute perfection.
cd server
npm run dev
cd ../client
npm run start