How compilewithvansh/blogify-1 works
1. Repository shape
- This is a two-app full-stack system: a Next.js frontend in frontend/ and an Express/MongoDB backend in backend/.
- The frontend is the presentation and client-side state layer; the backend owns authentication, authorization, persistence, and media uploads.
2. Primary request flow
- Users interact with the Next.js app.
- The frontend calls the backend API through frontend/lib/api.js.
- The backend handles the request, talks to MongoDB via Mongoose, optionally sends images to Cloudinary, and returns JSON.
- The frontend renders pages, forms, and lists from that API response.
3. Frontend routing and page boundaries
- The app uses the Next.js App Router with route groups:
- frontend/app/(auth) for login and registration.
- frontend/app/(main) for the authenticated/content area.
- Main screens include blog listing, post detail, create/edit post, dashboard, profile, and admin.
- frontend/app/layout.jsx and frontend/app/(main)/layout.jsx define shared layout boundaries for the app and the main section.
4. Frontend component layer
- Reusable UI is centralized in frontend/components/:
- Navbar.jsx and Footer.jsx for site chrome.
- PostCard.jsx for post previews.
- PostForm.jsx for create/edit flows.
- This keeps page files thin and makes post rendering and editing consistent across routes.
5. Frontend state and integration utilities
- frontend/lib/AuthContext.js is the main auth/session state boundary for the client.
- frontend/lib/api.js encapsulates backend HTTP access, so all API calls flow through one place.
- frontend/lib/avatar.js generates DiceBear-based emoji avatars from usernames, which means user identity visuals are derived client-side rather than uploaded.
- frontend/lib/utils.js likely contains shared formatting/helpers used by multiple screens.
6. Backend entry point and infrastructure
- backend/server.js is the Express application bootstrap.
- backend/config/db.js connects the app to MongoDB.
- backend/config/cloudinary.js configures Cloudinary for image storage.
- Environment variables in backend/.env.example control DB, JWT, Cloudinary, CORS origin, and the admin email.
7. Backend API boundaries
- The backend is split into route modules:
- backend/routes/auth.routes.js
- backend/routes/post.routes.js
- backend/routes/admin.routes.js
- Each route module delegates to a controller, keeping URL wiring separate from business logic.
- The exposed API is organized around auth, posts, and admin operations.
8. Auth and access control
- backend/controllers/auth.controller.js implements register/login/me behavior.
- backend/middleware/auth.middleware.js protects routes and enforces JWT-based authorization.
- The system supports role-based access with at least two roles: user and admin.
- The README indicates the first user matching ADMIN_EMAIL is promoted to admin, which is a bootstrap rule embedded in registration logic.
9. Content and media subsystem
- backend/controllers/post.controller.js manages blog post CRUD.
- Posts support slug-based public access, plus create/update/delete via authenticated routes.
- Image upload is a two-step backend responsibility: the request comes in with Multer, then the image is sent to Cloudinary, and the post stores the resulting image reference/URL.
- backend/models/Post.js is the persistence boundary for post content and metadata.
10. Admin subsystem
- backend/controllers/admin.controller.js and backend/routes/admin.routes.js provide elevated operations over all posts and users.
- Admins can view all posts, view all users, and delete any post.
- This is a separate permission boundary from the regular user-owned post workflow.
11. Data model boundary
- backend/models/User.js and backend/models/Post.js are the two persistent domain models.
- User data supports authentication, role assignment, and avatar identity.
- Post data supports author ownership, slug-based lookup, category/search filtering, and image metadata.
12. Cross-cutting concerns
- backend/middleware/error.middleware.js centralizes API error handling.
- The frontend uses Tailwind CSS for layout/styling and Sonner for toasts, so UI feedback is handled client-side while failures originate from API responses.
- CORS is expected to be configured around FRONTEND_URL, which forms the deployment boundary between the two apps.
13. How to draw the architecture
- Show two top-level boxes: Next.js Frontend and Express Backend.
- From frontend to backend, draw API calls for auth, posts, and admin.
- From backend to MongoDB, draw persistence for users and posts.
- From backend to Cloudinary, draw image upload flow.
- Put JWT/auth middleware and admin authorization as a gate in front of protected backend routes.
- Treat DiceBear avatar generation as a frontend-side external service used during profile rendering, not as part of the backend data store.
Main entry points: (main) Main pages · routes API routes · post.controller.js Post controller · auth.controller.js Auth controller
Components 19
Next.js Frontend
App Router UI, client state, and API integration
- App Router · Top-level routing and shared app layouts
frontend/app - Auth pages · Login and registration screens
frontend/app/(auth) - Main pages · Authenticated content area and primary screens
frontend/app/(main) - UI components · Reusable chrome, cards, and forms
frontend/components - Auth context · Session and authentication state boundary
frontend/lib/AuthContext.js - API client · Single integration layer for backend requests
frontend/lib/api.js - Avatar helper · Derives DiceBear-style avatars from usernames
frontend/lib/avatar.js - Layouts · Shared shell for the app and main section
frontend/app/layout.jsx
Express Backend
REST API, auth, persistence, and uploads
- Server bootstrap · Express entry point and middleware wiring
backend/server.js - API routes · Auth, post, and admin route boundaries
backend/routes - Auth controller · Register, login, and current-user logic
backend/controllers/auth.controller.js - Post controller · Post CRUD, slug lookup, and media handling
backend/controllers/post.controller.js - Admin controller · Elevated admin operations over users and posts
backend/controllers/admin.controller.js - Auth guard · JWT protection and role-based access control
backend/middleware/auth.middleware.js - Error handler · Central API error normalization
backend/middleware/error.middleware.js - MongoDB · Persistent store for users and posts
backend/config/db.js - Cloudinary · External image upload destination
backend/config/cloudinary.js - User model · Authentication, roles, and profile identity
backend/models/User.js - Post model · Post content, ownership, slugs, and image metadata
backend/models/Post.js
Connections 24
- Layouts → App Router: wraps · Shared shell defines app-wide presentation boundaries
- App Router → Auth pages: hosts · App Router serves auth screens
- App Router → Main pages: hosts · App Router serves authenticated content screens
- Main pages → UI components: uses · Pages render shared navigation, cards, and forms
- Main pages → API client: fetches · Pages load and mutate data through the API client
- Auth pages → API client: auth calls · Login and registration submit through the API client
- Auth context → API client: attaches auth · Client state feeds authenticated request handling
- Main pages → Auth context: reads session · Protected views depend on client auth state
- Main pages → Avatar helper: renders avatars · Profile and user displays derive avatars client-side
- API client → Server bootstrap: HTTP API · Frontend talks to backend endpoints through a single client boundary
- Server bootstrap → API routes: mounts · Express bootstraps route modules
- API routes → Auth guard: protects · Protected routes pass through JWT and role checks
- Auth guard → Auth controller: gates · Auth-aware requests reach controller logic only after verification
- API routes → Auth controller: auth endpoints · Register, login, and me behavior
- API routes → Post controller: post endpoints · Create, read, update, delete, and public slug access
- API routes → Admin controller: admin endpoints · Elevated management routes for posts and users
- Post controller → Post model: persists · Post CRUD reads and writes the post model
- Auth controller → User model: persists · User registration and login use the user model
- Admin controller → User model: reads users · Admin operations enumerate users
- Admin controller → Post model: reads posts · Admin operations enumerate and delete posts
- Post controller → Cloudinary: uploads images · Multer-backed uploads are sent to Cloudinary
- Auth controller → MongoDB: stores users · User records are persisted in MongoDB
- Post controller → MongoDB: stores posts · Post records are persisted in MongoDB
- Error handler → Server bootstrap: handles failures · Centralized error middleware terminates failed requests