How milkert/mern-boilerplate works
This MERN boilerplate provides public and protected React routes, with user signup, login, Google sign-in, session checks, and logout as its main workflow. The browser sends authentication requests to the Express API; the API verifies credentials or Google identity, manages JWT cookies, and reads or writes user records in MongoDB. The graph also shows route protection and the shared auth state that drives the UI. The README documents these capabilities; unsampled frontend pages and API configuration are represented only where their paths are present in the tree.
Main entry points: app.ts Express app · AppRoutes.tsx App routes · userApi.ts User auth API · main.tsx React entry
Components 14
Web client
- React entry
frontend/src/main.tsx - App routes
frontend/src/components/routes/AppRoutes.tsx - Auth context
frontend/src/context/AuthContext.tsx - Signup form
frontend/src/components/forms/SignupForm.tsx - Login form
frontend/src/components/forms/LoginForm.tsx - Dashboard
frontend/src/pages/Dashboard.tsx - Navigation
frontend/src/components/nav/Navbar.tsx
API and auth
- Express app
backend/app.ts - User auth API
backend/routes/userApi.ts - Rate limits
backend/middleware/ratelimit.ts
User persistence
- User model
backend/models/userModel.ts
Other components
- Visitor
- MongoDB
- Google identity
Connections 17
- Visitor → React entry: opens app
- React entry → App routes: renders
- App routes → Signup form: routes signup
- App routes → Login form: routes login
- App routes → Dashboard: protects route
- React entry → Auth context: provides auth
- Auth context → Express app: checks session
- Signup form → Express app: posts signup
- Login form → Express app: posts login
- Navigation → Express app: posts logout
- Navigation → Auth context: clears user
- Express app → User auth API: mounts API
- User auth API → Rate limits: applies limits
- User auth API → User model: reads or writes
- Express app → MongoDB: connects
- User model → MongoDB: persists users
- User auth API → Google identity: verifies identity