mern-app/
Pick any file or folder on the left to see what it is, why it exists, when you add it and the mistakes people make with it. Switch the stage to watch the project grow.
MERN (MongoDB, Express, React, Node) project structure
# Create the root folder and its package.json
mkdir mern-app && cd mern-app && npm init -y# Scaffold the React client with Vite
npm create vite@latest client -- --template react-ts# Create the server workspace
npm init -y -w server# Add Express and Mongoose to the server
npm install express mongoose -w server# Add the server dev tools
npm install -D typescript tsx @types/express @types/node -w server# Install everything from the root
npm install# Growing: client data, forms, styling and tests
npm install @tanstack/react-query react-router react-hook-form @hookform/resolvers zod tailwindcss @tailwindcss/vite -w client && npm install -D vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom msw -w client# Growing: server validation, logging, migrations and tests
npm install zod pino pino-http argon2 jose -w server && npm install -D vitest supertest @types/supertest mongodb-memory-server migrate-mongo -w server# Production: security, jobs, observability and e2e
npm install helmet cors express-rate-limit bullmq @sentry/node -w server && npm install -D @testcontainers/mongodb -w server && npm install -D @playwright/test -w client