Project structure · Full stack
MERN (MongoDB, Express, React, Node) project structure
Opens with creditsOne repository with a React app built by Vite in client/, an Express API with Mongoose in server/, and a tiny shared/ package that both import for request shapes and types. npm workspaces give you one install and one command to run both, and one example feature (clinic appointments) runs through every folder so you can see how a request travels from a form to MongoDB and back, and what tests, security and operations a real team adds around it.
Curated by Tauseef FayyazIntermediate247 files and foldersNode.js 24 LTS, React 19, Vite 8Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you35 files and folders
- 2GrowingWhat a real app with features and tests adds+121 files and folders
- ProductionWhat running it for real users adds+39 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+52 files and foldersOpens with credits
How it is organised
- Two clear halves: client/ is the browser app, server/ is the API. Learners always know which side of the network a file runs on.
- npm workspaces tie them together: one npm install, one lock file, one node_modules, and npm run dev at the root starts both. The alternative, two folders with their own package.json and no root workspace, also works and is common in tutorials, but you then install twice and cannot share code without copying it.
- The API contract lives in shared/: Zod schemas validate input on the server and type the forms and responses on the client, so a renamed field breaks the build instead of production.
- Inside client/src and server/src, group by feature (features/appointments, features/auth), not by file type. On the server each feature splits into routes, controller, service and repository, so HTTP, rules and queries never mix.
- In development the Vite dev server proxies /api to Express, so the browser sees one origin: no CORS setup and cookies just work. In production Express serves the built client, keeping that same single origin.
- Configuration comes from environment variables, validated once at startup. Secrets never go into the client, because everything in a Vite bundle is public.
- Test in layers: unit and component tests from Growing (Vitest, Testing Library, MSW, mongodb-memory-server), real-database and browser tests at Production (Testcontainers, Playwright), and contract, accessibility, visual and load tests at Expert when the team and traffic justify them.
At the top of the project
Open one in the explorer for the full story
- mern-app/
- .git/Git history for the whole repository, client and server together.
- .devcontainer/A dev container definition: Node 24, MongoDB and the editor extensions, ready in one click.1 inside
- .husky/Git hooks managed by husky, run on your machine before commits.2 inside
- .vscode/Shared editor settings, recommended extensions and debug configurations.3 inside
- node_modules/Every installed package for all workspaces, hoisted into one folder at the root.
- client/The React app, created by the Vite react-ts template and run by the Vite dev server.12 inside
- server/The Express API in TypeScript, using Mongoose to talk to MongoDB.11 inside
- shared/The API contract: Zod schemas and TypeScript types imported by both client and server.3 inside
- .editorconfigIndentation, line endings and final newline rules every editor understands.
- .gitignoreRepository-wide ignore rules: node_modules, dist, .env files, logs, coverage and test reports.
- .lintstagedrc.jsonWhat the pre-commit hook runs on staged files: oxlint and Prettier.
- .nvmrcThe Node.js major version for this project, for nvm, fnm and CI.
- .prettierrc.jsonFormatting rules for every workspace.
- AGENTS.mdInstructions for AI coding agents: how the repo is laid out and how to run, test and lint it.
- CLAUDE.mdClaude Code reads this file; it holds one line, @AGENTS.md.
- README.mdWhat the app does and how to run it: prerequisites, setup, scripts, environment, tests, deploy.
- docker-compose.ymlStarts local MongoDB (and Redis from Production) with one command: docker compose up -d.
- package-lock.jsonThe exact version of every package in every workspace. One file for the whole repo.
- package.jsonThe root: declares the workspaces and the scripts that run across all of them.
- tsconfig.base.jsonStrict TypeScript options that the server and shared tsconfigs extend.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with MERN (MongoDB, Express, React, Node).
- Roadmap· MERNFull stack development roadmapBuild and ship whole web apps
- Roadmap· JavaScriptMongoDB roadmapDocuments, modelling, indexes, aggregation
- Roadmap· Node.jsBackend development roadmapAPIs, databases, auth, deploys
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetMongoDB cheat sheetDocuments, modelling, indexes, aggregation.
- Cheat sheetBackend development cheat sheetAPIs, databases, auth, deploys.
- FYP idea· BeginnerTuition Centre Fee and Attendance Manager with Parent RemindersA web app for small tuition centres and academies to manage batches, take attendance from a phone, generate monthly fee vouchers and send parents reminders. A beginner-friendly final year project with a real paying customer in almost every neighbourhood.
- FYP idea· BeginnerRent Ledger and Tenant Portal for Small LandlordsA web app for small landlords and property caretakers with a few houses, flats or shops to track agreements, monthly rent with yearly increments, utility bills, security deposits and repair requests, with a simple tenant portal. A beginner-friendly final year project in real estate and property management.
See 10 moreShow fewer
- FYP idea· BeginnerForm Backend Service for Static Sites with Spam FilteringA developer-facing web service that gives static and no-code websites a form endpoint: submissions are stored, filtered for spam, emailed to the owner and sent to webhooks, with a dashboard and CSV export. A beginner-friendly final year project in backend development with a clear SaaS model.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionHow do I learn Git and GitHub properly instead of just copying commands?Learn the model first: commits are snapshots, branches are pointers, and remotes are copies. Then use Git daily on your own projects, practise a team workflow with branches and pull requests, and break things on purpose, such as merge conflicts, so you learn to recover calmly.
- QuestionDo I need Docker and Kubernetes as a junior developer?Docker, yes: learn the basics, because nearly every team uses containers and you will be expected to run the project locally and read a Dockerfile. Kubernetes, mostly no: understand what it does and a few core terms, but deep Kubernetes can wait until your job or a DevOps direction needs it.
- QuestionWhich final year project will actually help me get a job?Pick an FYP that matches the role you want, solves a real problem for a real user, uses the tools that role uses, and that your group can finish and deploy. A modest idea done properly, with clean code, tests and a clear demo, helps far more in interviews than an ambitious idea that never fully works.
- Resource· GuideExpress DocumentationThe official documentation for Express, the minimal and most widely used Node.js web framework. It covers installation, routing, writing and using middleware, error handling, template engines, the full API reference for Express 5 and 4, and guides on security and performance in production. It suits Node.js developers building APIs or server-rendered apps, and anyone who wants to understand the middleware model that many other Node frameworks borrow.
- Resource· GuideMongoose DocumentationThe official docs for Mongoose, the most widely used MongoDB object modelling library for Node.js: schemas, validation, middleware, populate, discriminators, transactions and TypeScript support. Read the guides, not just the quick start, because most Mongoose bugs come from misunderstood defaults.
- Resource· GuideReact DocumentationThe official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.
- Resource· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 20 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Vite: Getting started (create-vite templates)
- Vite: server.proxy option
- Express: Migrating to Express 5
- Express: Production best practices, security
- Mongoose: Migrating from 8.x to 9.x
- Mongoose: TypeScript schemas
- npm Docs: workspaces
- Node.js: Packages, conditional exports
- TanStack Query: React overview
- Tailwind CSS: Using Vite
- MSW: Node.js integration
- migrate-mongo README
- Testcontainers for Node.js: MongoDB module
- BullMQ documentation
- Sentry: Express setup
- Playwright: Authentication and visual comparisons
- Playwright: Accessibility testing
- Pact JS documentation
- Grafana k6 documentation
- Docker Hub: official mongo image
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com