🚀 MGRN Template

A production-grade, full-stack boilerplate combining MongoDB, GraphQL, React 18, and Node.js 22 with Tailwind CSS 3 and TypeScript. Built with modern best practices, security-first architecture, and containerized deployment.

✨ Features

🎯 Modern Tech Stack

• React 18 with concurrent rendering and modern features
• Node.js 22 LTS with ES modules and latest performance improvements
• MongoDB with Mongoose ODM for flexible data modeling
• GraphQL with Apollo Server 4 for efficient API communication
• Tailwind CSS 3 for utility-first, responsive styling
• TypeScript throughout for type safety and better DX

🔒 Security-First Architecture

• Helmet with strict Content Security Policy (no unsafe-inline needed)
• CORS configuration with environment-based origins
• JWT authentication ready
• Rate limiting and DDoS protection
• Input validation and sanitization
• Security headers optimized for modern browsers

🏗️ Production-Ready Infrastructure

• Docker multi-stage builds for optimized containers
• Docker Compose for complete development and production stacks
• Server-Side Rendering (SSR) for optimal SEO
• Health checks for monitoring and observability
• Graceful shutdown handling
• Compression and caching strategies

🎨 Developer Experience

• Hot Module Replacement for instant development feedback
• ESLint and Prettier for code quality
• TypeScript strict mode configuration
• Path aliases for clean imports
• Environment-based configuration

🚀 Quick Start

Prerequisites

• Node.js 22+ (LTS recommended)
• MongoDB 7+ (or use Docker Compose)
• Docker & Docker Compose (optional, for containerized development)

🛠️ Development Setup

1. Clone the repository

   git clone https://github.com/yourusername/mgrn-template.git
   cd mgrn-template

2. Install dependencies

   npm install

3. Set up environment

   cp .env.example .env
   # Edit .env with your configuration

4. Start MongoDB (if not using Docker)

   # Using MongoDB locally
   mongod --dbpath /path/to/your/db
   
   # Or using MongoDB in Docker
   docker run -d -p 27017:27017 --name mongodb mongo:7.0

5. Start development servers

   npm run dev

   This starts:

   • Vite dev server on http://localhost:3000 (React app with HMR)
   • Node.js server on http://localhost:4000 (GraphQL API + SSR)

6. Open your browser

   • Frontend: http://localhost:3000
   • GraphQL Playground: http://localhost:4000/graphql
   • Health Check: http://localhost:4000/health

🐳 Docker Development

For a complete containerized development environment:

# Start all services (MongoDB + App)
npm run docker:dev

# Or manually
docker-compose -f docker-compose.dev.yml up

🏭 Production Deployment

Build for Production

# Build both client and server
npm run build

# Start production server
npm start

Docker Production

# Build and start production containers
npm run docker:run

# Or manually
docker-compose up -d

Environment Variables

For production, ensure these environment variables are set:

NODE_ENV=production
MONGO_URI=mongodb://username:password@host:port/database
JWT_SECRET=your-256-bit-secret
CORS_ORIGIN=https://yourdomain.com
SSL_ENABLED=true
SSL_CERT_PATH=/path/to/cert.pem
SSL_KEY_PATH=/path/to/key.pem

📁 Project Structure

MGRN-Template/
├── src/                          # React frontend source
│   ├── components/              # Reusable UI components
│   │   ├── Header.tsx          # Navigation header
│   │   └── Footer.tsx          # Site footer
│   ├── pages/                  # Page components
│   │   ├── HomePage.tsx        # Landing page
│   │   ├── DataPage.tsx        # GraphQL demo page
│   │   └── ErrorPage.tsx       # Error boundary
│   ├── App.tsx                 # Main app component
│   ├── router.tsx              # React Router configuration
│   ├── apollo-client.ts        # Apollo Client setup
│   ├── entry-client.tsx        # Client-side entry point
│   ├── entry-server.tsx        # Server-side entry point
│   └── index.css               # Tailwind CSS imports
├── server/                      # Node.js backend source
│   ├── config/                 # Configuration management
│   │   └── index.ts            # Environment config
│   ├── database/               # Database connection
│   │   └── connect.ts          # MongoDB connection
│   ├── graphql/                # GraphQL schema & resolvers
│   │   ├── typeDefs.ts         # GraphQL type definitions
│   │   └── resolvers.ts        # GraphQL resolvers
│   ├── middleware/             # Express middleware
│   │   └── helmet.ts           # Security headers
│   ├── render/                 # SSR handling
│   │   └── handler.ts          # Server-side rendering
│   ├── app.ts                  # Express app configuration
│   └── index.ts                # Server entry point
├── Dockerfile                   # Multi-stage Docker build
├── docker-compose.yml          # Production Docker Compose
├── .dockerignore               # Docker ignore patterns
├── .env.example                # Environment variables template
├── tailwind.config.js          # Tailwind CSS configuration
├── postcss.config.js           # PostCSS configuration
├── vite.config.ts              # Vite build configuration
├── tsconfig.json               # TypeScript config (client)
├── tsconfig.server.json        # TypeScript config (server)
└── package.json                # Dependencies and scripts

🔧 Available Scripts

# Development
npm run dev              # Start both client and server in development
npm run dev:client       # Start only Vite dev server
npm run dev:server       # Start only Node.js server with watch

# Building
npm run build            # Build both client and server for production
npm run build:client     # Build only React app
npm run build:server     # Build only Node.js server

# Production
npm start                # Start production server

# Docker
npm run docker:build     # Build Docker image
npm run docker:run       # Start production containers
npm run docker:dev       # Start development containers

# Code Quality
npm run lint             # Run ESLint
npm run type-check       # Run TypeScript compiler checks

🔒 Security Features

Content Security Policy

• No unsafe-inline styles thanks to Tailwind CSS compilation
• Strict script sources with nonce support
• Font and image source restrictions
• Frame ancestors protection against clickjacking

Additional Security Headers

• HSTS for HTTPS enforcement
• X-Frame-Options for iframe protection
• X-Content-Type-Options for MIME type sniffing prevention
• Permissions Policy for feature access control

Authentication & Authorization

• JWT token support (ready to implement)
• Secure cookie handling
• Rate limiting per IP
• Input validation and sanitization

🚀 Performance Optimizations

Frontend

• Vite for fast builds and HMR
• Code splitting with React Router
• Lazy loading for optimal bundle sizes
• Tailwind CSS purging for minimal CSS
• Image optimization ready

Backend

• Compression middleware for response optimization
• Static file caching with appropriate headers
• MongoDB indexing for query performance
• Connection pooling for database efficiency
• Memory usage monitoring

SSR Benefits

• SEO optimization with server-side rendering
• Faster initial page loads
• Social media sharing with proper meta tags
• Progressive enhancement

🛠️ Customization

Adding New Routes

1. Create page component in src/pages/
2. Add route to src/router.tsx
3. Update navigation in src/components/Header.tsx

Adding GraphQL Operations

1. Define types in server/graphql/typeDefs.ts
2. Implement resolvers in server/graphql/resolvers.ts
3. Use in React components with Apollo Client

Styling with Tailwind

• Customize tailwind.config.js for your design system
• Add custom components in src/index.css
• Use Tailwind utilities throughout your React components

Environment Configuration

• Add variables to .env.example
• Update server/config/index.ts for new config options
• Document in this README

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -am 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a Pull Request

📝 License

This project is licensed under the GPU 3 License - see the LICENSE file for details.

🙏 Acknowledgments

• React Team for the amazing framework
• Vercel for Vite and excellent tooling
• MongoDB for the flexible database
• Apollo GraphQL for the powerful API layer
• Tailwind Labs for the utility-first CSS framework

---

Built with ❤️ for the modern web

Ready to build something amazing? 🚀 Mongo GraphQL React Node template repository