MEAN Stack with Docker

Production-Ready Full-Stack Application

MongoDB | Express.js | Angular 21 | Node.js | Docker

A modern, containerized contact management system demonstrating best practices in full-stack TypeScript development

Get Started | View Demo | Documentation | Report Bug

---

Table of Contents

• Overview
• Architecture
• Tech Stack
• Getting Started
• Deployment Modes
• Features
• Documentation
• Roadmap
• Contributing
• License

---

Overview

This project demonstrates a production-ready MEAN stack application with modern development practices including TypeScript across the entire stack, JWT authentication, and Docker containerization. It serves as both a learning resource and a foundation for building scalable web applications.

Key Highlights

Feature	Technology
Frontend	Angular 21 with TypeScript and Bootstrap 5
Backend	Express.js with TypeScript
Database	MongoDB with Mongoose ODM
Authentication	JWT-based secure authentication
Containerization	Docker and Docker Compose
Load Balancer	Nginx reverse proxy
CI/CD	GitHub Actions

---

Architecture

flowchart TB
    subgraph Internet["INTERNET"]
        direction TB
        client(("User<br/>Browser"))
    end

    subgraph Docker["DOCKER ENVIRONMENT"]
        direction TB
        
        subgraph Gateway["GATEWAY LAYER"]
            nginx{{"NGINX<br/>Load Balancer<br/>:80"}}
        end

        subgraph Services["APPLICATION LAYER"]
            direction LR
            angular["ANGULAR 21<br/>Frontend<br/>:4000"]
            express["EXPRESS.JS<br/>REST API<br/>:3000"]
        end

        subgraph Data["DATA LAYER"]
            mongodb[("MONGODB<br/>Database<br/>:27017")]
        end
    end

    client ==>|"HTTP Request"| nginx
    nginx -->|"Static Assets"| angular
    nginx -->|"/api/* Routes"| express
    express <-->|"CRUD Operations"| mongodb

    classDef internet fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#01579b
    classDef gateway fill:#c8e6c9,stroke:#2e7d32,stroke-width:3px,color:#1b5e20
    classDef frontend fill:#ffcdd2,stroke:#c62828,stroke-width:2px,color:#b71c1c
    classDef backend fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,color:#e65100
    classDef database fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#2e7d32
    classDef user fill:#bbdefb,stroke:#1976d2,stroke-width:2px,color:#0d47a1

    class client user
    class nginx gateway
    class angular frontend
    class express backend
    class mongodb database

Loading

How It Works

Layer	Component	Responsibility
Gateway	Nginx	Single entry point on port 80. Routes traffic and serves as reverse proxy
Frontend	Angular 21	Serves the user interface with reactive components and Bootstrap 5 styling
Backend	Express.js	Handles API requests, authentication, and business logic
Data	MongoDB	Persists user accounts and contact information

Request Routing

Request Path	Routed To	Description
/*	Angular :4000	Static frontend assets and SPA routes
/api/*	Express :3000	REST API endpoints
Database	MongoDB :27017	Data persistence (internal only)

---

Tech Stack

Frontend Angular 21 TypeScript Bootstrap 5 RxJS Router Guards

Backend Node.js Express.js TypeScript Mongoose ODM JWT Auth

Database MongoDB 7.0 Mongoose Data Seeding

DevOps Docker Docker Compose Nginx GitHub Actions

---

Getting Started

Prerequisites

• Docker and Docker Compose
• Git

Quick Start

# 1. Clone the repository
git clone https://github.com/nitin27may/mean-docker.git
cd mean-docker

# 2. Create environment file
cp .env.example .env

# 3. Start the application
docker-compose -f docker-compose.nginx.yml up

Ready in under 2 minutes! Open http://localhost in your browser.

Default Login

Username: [email protected]
Password: P@ssword#321

---

Deployment Modes

Development Mode 3 containers running on separate ports. docker-compose up Service URL Frontend http://localhost:4000 API http://localhost:3000 Database localhost:27017

Production Mode 4 containers with Nginx gateway. docker-compose -f docker-compose.nginx.yml up Service URL Application http://localhost Database localhost:27017

---

Features

Authentication JWT-based secure login and registration Protected routes with Angular guards Token-based API authorization Password change functionality

Contact Management Create, read, update, and delete contacts Responsive design for mobile and desktop Form validation with custom error messages Search, sort, and paginate contacts

---

Documentation

Document	Description
Frontend	Angular application architecture and components
Backend API	Express.js endpoints and middleware
Database	MongoDB schemas and data models
Load Balancer	Nginx routing configuration
Local Development	Running without Docker
Docker Guide	Container setup and configuration

---

Roadmap 2026

Quarter	Focus Area	Goals
Q1	Testing & Quality	Unit tests, E2E tests with Cypress, code coverage reporting
Q2	UI Modernization	Angular Material integration, dark/light theme, responsive redesign
Q3	Security & Access	Role-based access control (Admin, Manager, User), OAuth 2.0 support
Q4	Performance & Scale	Redis caching, API rate limiting, Kubernetes deployment configs

See the complete roadmap for details.

---

Contributing

Contributions are welcome. Please review our Contributing Guide before submitting changes.

• Report a Bug
• Request a Feature

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Built by Nitin Singh

If you find this project useful, please consider giving it a star!