mern-stack

MERN Stack Best Practices

Overview

Layer	Technology	Purpose
Database	MongoDB	Document database
Backend	Express.js	Node.js web framework
Frontend	React	UI library
Runtime	Node.js	JavaScript runtime
ODM	Mongoose	MongoDB object modeling

Related rules: nodejs.mdc, react-19.mdc, typescript.mdc

---

Project Structure

Monorepo Structure

project/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── services/       # API calls
│   │   ├── stores/         # State management
│   │   └── types/
│   ├── package.json
│   └── vite.config.ts
├── server/                 # Express backend
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── services/
│   │   ├── types/
│   │   ├── utils/
│   │   └── index.ts
│   └── package.json
├── shared/                 # Shared types/utils
│   └── types/
└── package.json            # Root workspace

---

Express Backend

App Setup

// server/src/index.ts
import express from 'express'
import cors from 'cors'
import helmet from 'helmet'
import mongoose from 'mongoose'
import { config } from './config'
import { errorHandler } from './middleware/errorHandler'
import { userRoutes } from './routes/user'
import { postRoutes } from './routes/post'

const app = express()

// Middleware
app.use(helmet())
app.use(cors({ origin: config.clientUrl, credentials: true }))
app.use(express.json())

// Routes
app.use('/api/users', userRoutes)
app.use('/api/posts', postRoutes)

// Error handling
app.use(errorHandler)

// Database connection
mongoose.connect(config.mongoUri)
  .then(() => console.log('Connected to MongoDB'))
  .catch((err) => console.error('MongoDB connection error:', err))

app.listen(config.port, () => {
  console.log(`Server running on port ${config.port}`)
})

Mongoose Models