React + TypeScript + Vite (no react compiler)

Refresh journey

• 1 - React routing
  react-router-dom installation, and child Outlet component to pass props from parent component

• 2 - Application of (React routing) topic
  Added simple UI, contents, and navigations

• 3 - useContext, Context API, and creating custom hooks
  Understanding createContext, Providers, while doing non-backend authentication

• 4 - Express.js introduction (on express branch)
  Learn Express.js from scratch. Installed Express.js, run simplest express app, create github gist for installation. Understanding express routings

• 5 - POSTMAN
  Used POSTMAN for testing different http methods APIs from express/src/app.ts file

• 6 - res and HTTP status codes
  Returning a proper response from API endpoint

• 7 - Express folder structure
  Relocate functions from app.ts to their respective folders

• 8 - React and Express communication
  Allow React to fetch data from Express with CORS (Cross-Origin Resource Sharing)x

• 9 - Simulation of login form
  Simulate mini login form using hardcoded user data from server (express)

• 10 - Working with dotenv
  Understanding dotenv, config, dotenv architecture, and env variables compile time and runtime value

• 11 - MongoDB and Mongoose
  Installing MongoDB and mongoose

• 12 - Refactoring from ram storage to disk storage
  From JavaScript arrays as database to MongoDB database — dropping const users = [...]

• 13 - Global error handling

  • Create an asyncHandler to avoid try/catch in every service layer — catches error in service layer.
  • Create an AppError that extends the Error object to pass error status code.
  • Create an errorHandler to throw an error Response to the frontend.

• 14 - Authentication
  Used jsonwebtoken library to generate and validate user token

• 15 - Persist login (localStorage) [to be refactored]
  Avoid losing state after page refresh (bad practice; practice anyway)

• 16 - Persist login (Cookies)
  Migrate from using localStorage as JWT holder, to using cookies

• 17 - Public and Protected routes
  Check of cookies whether a user can access a protected routes

• 18 - Authorization
  Frontend UX authorization, backend authorization, ownership