Tech Stack
Overview
A comprehensive, full-stack 3-Tier Admin Dashboard built natively with React, Node.js, Express, and MongoDB, meticulously designed to demonstrate modern web development and DevOps practices. At its core, the system features a robust Role-Based Access Control (RBAC) engine that provisions fine-grained access permissions across three distinct tiers (Super Admin, Admin, and User), ensuring that only high-level personnel can alter security roles. The entire application is containerized into a sophisticated 4-container architecture orchestrating the frontend, backend, database, and a centralized Nginx ingress proxy over an isolated virtual bridge network. By leveraging strict multi-stage Docker builds and secure HttpOnly cookie authentication, this project showcases a highly optimized, resilient, and enterprise-ready application environment.
Challenges & Solutions
Mitigating client-side storage vulnerabilities like XSS attacks
Solution: Engineered a secure authentication flow using JSON Web Tokens (JWT) strictly delivered via backend HttpOnly cookies. This completely removes tokens from the client-side JavaScript scope, bypassing vulnerabilities associated with localStorage and strict browser privacy blockings.
Reducing application payload and speeding up containerized deployments
Solution: Executed multi-stage Docker builds for both the React frontend and Express backend. The frontend utilizes Node merely to execute 'vite build' before transferring only the static /dist files into a lightweight Alpine Nginx container, significantly reducing the final image size.
Resolving complex Cross-Origin Resource Sharing (CORS) issues across distinct services
Solution: Architected a Zero-CORS strategy by deploying an Nginx Reverse Proxy as the primary ingress router on port 80. Nginx dynamically dispatches /api/* traffic to the internal Express backend while serving UI assets natively, tricking the browser into recognizing a unified single origin.
Safeguarding backend data logic from external network probing
Solution: Constructed a custom Docker bridge network ('admin-dashboard-network') that interconnects all internal containers. The MongoDB data tier and the Node.js application tier are completely shielded from the host machine, communicating safely through internal Docker DNS.
Architecture & Tiers
Nginx Gateway Proxy (nginx_cont)
The primary ingress router operating on port 80. It functions as a secure reverse proxy, automatically dispatching /api/* requests to the Express backend and routing all other web traffic directly to the isolated React frontend container.
Presentation Tier (client_cont)
A highly-optimized internal Nginx engine dedicated exclusively to serving the static assets generated by Vite. Deployed on internal port 3000 to ensure blazing fast UI rendering.
Application Tier (server_cont)
A dedicated Express REST API engine processing all business logic, role verification, and robust HttpOnly cookie authentication securely on internal port 9000.
Data Tier (mongodb_cont)
A MongoDB 6.0 engine completely isolated within the Docker network, utilizing named Docker volumes to ensure durable data persistence across container rebuilds and host restarts.
Network Diagram
┌──────────────────────┐
│ Client Browser │
└──────────┬───────────┘
│ HTTP (Port 80)
▼
┌──────────────────────┐
│ Nginx Reverse Proxy │
│ (nginx_cont) │
└──────────┬───────────┘
│
┌───────────────────┴───────────────────┐
│ (Serves UI static assets) │ (Proxies API requests)
▼ ▼
┌─────────────────────────┐ ┌─────────────────────────┐
│ React + Vite Frontend │ │ Node.js / Express │
│ Tier 1 (client_cont) │ │ Logic Tier 2 (server) │
└─────────────────────────┘ └────────────┬────────────┘
│ (Port 27017)
▼
┌─────────────────────────┐
│ MongoDB Database │
│ Data Tier 3 (mongo) │
└─────────────────────────┘