Sociopedia is a production-ready full-stack social media platform built using the MERN stack and containerized with Docker using enterprise deployment practices.
The project demonstrates how modern applications are packaged, secured, networked, and deployed using production-grade Docker techniques.
Instead of running services individually, the complete application is deployed using Docker Compose, Nginx Reverse Proxy, isolated Docker networks, persistent volumes, and MongoDB Atlas integration.
- User Authentication
- JWT Authorization
- Create Posts
- Like & Comment
- Friend System
- Responsive UI
- React.js
- Redux Toolkit
- Material UI
- Responsive Design
- Protected Routes
- API Integration
- Node.js
- Express.js
- JWT Authentication
- REST APIs
- Secure Middleware
- MongoDB Integration
- Multi-stage Docker Build
- Docker Compose
- Non-root Containers
- Health Checks
- Docker Networks
- Persistent Volumes
- Environment Variables
- Reverse Proxy
- Production Ready Images
https://sociopedia-app.vercel.app
https://urchin-app-v2nci.ondigitalocean.app
flowchart LR
User["👨💻 User"]
Browser["🌐 Browser"]
Nginx["🟢 Nginx Reverse Proxy"]
Frontend["⚛ React Frontend"]
Backend["🚀 Express API"]
Atlas["☁ MongoDB Atlas"]
Browser --> Nginx
Nginx --> Frontend
Nginx --> Backend
Backend --> Atlas
style User fill:#2563eb,color:#fff
style Browser fill:#0ea5e9,color:#fff
style Nginx fill:#009639,color:#fff
style Frontend fill:#61DAFB,color:#000
style Backend fill:#339933,color:#fff
style Atlas fill:#13AA52,color:#fff
flowchart TD
Client["👨 User"]
Internet["🌍 Internet"]
Nginx["🟢 Nginx Reverse Proxy"]
React["⚛ React Container"]
Express["🚀 Node API Container"]
Docker["🐳 Docker Network"]
Mongo["☁ MongoDB Atlas"]
Client --> Internet
Internet --> Nginx
Nginx --> React
Nginx --> Express
React --> Express
Express --> Docker
Docker --> Mongo
style Client fill:#2563eb,color:#fff
style Internet fill:#0891b2,color:#fff
style Nginx fill:#009639,color:#fff
style React fill:#61DAFB,color:#000
style Express fill:#339933,color:#fff
style Docker fill:#2496ED,color:#fff
style Mongo fill:#13AA52,color:#fff
flowchart LR
User["👨 User"]
Browser["🌐 Browser"]
Nginx["🟢 Nginx"]
Frontend["⚛ React"]
API["🚀 Express"]
Database["☁ MongoDB Atlas"]
Response["📄 JSON Response"]
User --> Browser
Browser --> Nginx
Nginx --> Frontend
Frontend --> API
API --> Database
Database --> Response
Response --> Frontend
Frontend --> User
style User fill:#2563eb,color:#fff
style Browser fill:#0891b2,color:#fff
style Nginx fill:#009639,color:#fff
style Frontend fill:#61DAFB,color:#000
style API fill:#339933,color:#fff
style Database fill:#13AA52,color:#fff
style Response fill:#9333ea,color:#fff
Sociopedia is fully containerized using Docker following production-ready best practices. Each service runs in its own isolated container while communicating through a dedicated Docker network.
flowchart LR
Developer["👨💻 Developer"]
Dockerfile["📄 Dockerfile"]
Build["🔨 Docker Build"]
Frontend["⚛ React Image"]
Backend["🚀 Node Image"]
Compose["🐳 Docker Compose"]
Network["🌐 Docker Network"]
Containers["📦 Running Containers"]
Developer --> Dockerfile
Dockerfile --> Build
Build --> Frontend
Build --> Backend
Frontend --> Compose
Backend --> Compose
Compose --> Network
Network --> Containers
style Developer fill:#2563eb,color:#fff
style Dockerfile fill:#16a34a,color:#fff
style Build fill:#9333ea,color:#fff
style Frontend fill:#61DAFB,color:#000
style Backend fill:#339933,color:#fff
style Compose fill:#2496ED,color:#fff
style Network fill:#0891b2,color:#fff
style Containers fill:#f97316,color:#fff
The frontend is built using a multi-stage Docker build to reduce image size and improve production performance.
flowchart LR
Source["📁 Source Code"]
Node["⚙ Node Builder"]
Install["📦 npm install"]
Build["🔨 npm run build"]
Nginx["🟢 Nginx Image"]
Production["🚀 Production Container"]
Source --> Node
Node --> Install
Install --> Build
Build --> Nginx
Nginx --> Production
style Source fill:#2563eb,color:#fff
style Node fill:#339933,color:#fff
style Install fill:#16a34a,color:#fff
style Build fill:#9333ea,color:#fff
style Nginx fill:#009639,color:#fff
style Production fill:#2496ED,color:#fff
Docker Compose orchestrates all application services using a single configuration file.
flowchart TD
Compose["🐳 Docker Compose"]
Frontend["⚛ React"]
Backend["🚀 Express"]
Nginx["🟢 Nginx"]
Mongo["☁ MongoDB Atlas"]
Compose --> Frontend
Compose --> Backend
Compose --> Nginx
Backend --> Mongo
Nginx --> Frontend
Nginx --> Backend
style Compose fill:#2496ED,color:#fff
style Frontend fill:#61DAFB,color:#000
style Backend fill:#339933,color:#fff
style Nginx fill:#009639,color:#fff
style Mongo fill:#13AA52,color:#fff
Nginx acts as the entry point for every incoming request and intelligently routes traffic to the appropriate service.
flowchart LR
User["👨 User"]
Nginx["🟢 Nginx"]
React["⚛ React"]
API["🚀 Express API"]
Atlas["☁ MongoDB Atlas"]
User --> Nginx
Nginx -->|"/"| React
Nginx -->|"/api"| API
API --> Atlas
style User fill:#2563eb,color:#fff
style Nginx fill:#009639,color:#fff
style React fill:#61DAFB,color:#000
style API fill:#339933,color:#fff
style Atlas fill:#13AA52,color:#fff
Production containers follow Docker security best practices.
flowchart TB
Docker["🐳 Docker"]
User["👤 Non-root User"]
Health["❤️ Health Check"]
Env["🔐 Environment Variables"]
Network["🌐 Private Network"]
Docker --> User
Docker --> Health
Docker --> Env
Docker --> Network
style Docker fill:#2496ED,color:#fff
style User fill:#16a34a,color:#fff
style Health fill:#dc2626,color:#fff
style Env fill:#9333ea,color:#fff
style Network fill:#0891b2,color:#fff
- ✅ Non-root containers
- ✅ Environment variables
- ✅ Health check endpoint
- ✅ Docker network isolation
- ✅ Production images
- ✅ Lightweight containers
All services communicate through a dedicated isolated Docker bridge network.
flowchart LR
Client["👨 User"]
Bridge["🌐 Docker Bridge Network"]
Nginx["🟢 Nginx"]
Frontend["⚛ React"]
Backend["🚀 Express"]
Mongo["☁ MongoDB Atlas"]
Client --> Bridge
Bridge --> Nginx
Nginx --> Frontend
Nginx --> Backend
Backend --> Mongo
style Client fill:#2563eb,color:#fff
style Bridge fill:#0891b2,color:#fff
style Nginx fill:#009639,color:#fff
style Frontend fill:#61DAFB,color:#000
style Backend fill:#339933,color:#fff
style Mongo fill:#13AA52,color:#fff
Application data remains safe using Docker volumes.
flowchart LR
Container["📦 Containers"]
Volume["💾 Docker Volume"]
Database["🗄 Local MongoDB"]
Container --> Volume
Volume --> Database
style Container fill:#2496ED,color:#fff
style Volume fill:#9333ea,color:#fff
style Database fill:#13AA52,color:#fff
The backend securely communicates with MongoDB Atlas using encrypted cloud connections.
flowchart LR
Express["🚀 Express API"]
TLS["🔒 Secure TLS"]
Atlas["☁ MongoDB Atlas"]
Collections["📂 Collections"]
Express --> TLS
TLS --> Atlas
Atlas --> Collections
style Express fill:#339933,color:#fff
style TLS fill:#dc2626,color:#fff
style Atlas fill:#13AA52,color:#fff
style Collections fill:#9333ea,color:#fff
docker-project/
│
├── client/
│ ├── src/
│ ├── public/
│ ├── Dockerfile
│ └── package.json
│
├── server/
│ ├── controllers/
│ ├── routes/
│ ├── middleware/
│ ├── models/
│ ├── Dockerfile
│ └── package.json
│
├── nginx/
│ ├── nginx.conf
│ └── Dockerfile
│
├── docker-compose.yml
├── .env
├── README.md
└── dark_theme_ss.png
- React.js
- Redux Toolkit
- Material UI
- Node.js
- Express.js
- MongoDB
- Mongoose
- Docker
- Docker Compose
- Nginx
- Multi-Stage Docker Build
- Docker Networks
- Docker Volumes
- MongoDB Atlas
- DigitalOcean
- Vercel
The following features can be added in future versions:
- 🔄 GitHub Actions for automated CI/CD
- ☸️ Kubernetes container orchestration
- 📊 Prometheus & Grafana monitoring
- 🔒 HTTPS with Let's Encrypt
- 🌍 Multi-container production deployment
- 📦 Image optimization and caching
- 📈 Application performance monitoring
- 🔐 OAuth Authentication (Google/GitHub)
- 📱 Progressive Web App (PWA) support
Through this project, I gained practical experience in:
- 🐳 Building production-ready Docker images
- 📦 Multi-stage Docker builds
- 🌐 Configuring Nginx as a reverse proxy
- 🔐 Running containers as a non-root user
- ❤️ Implementing container health checks
- 🌍 Managing Docker networks
- 💾 Using Docker volumes for persistent storage
- ☁️ Connecting applications to MongoDB Atlas
- ⚙️ Managing multi-container applications with Docker Compose
- 📁 Organizing production-ready project structures
Saurav Kumar
B.Tech Computer Science Engineering
🚀 Full Stack Developer | DevOps Enthusiast
- 💼 LinkedIn: https://www.linkedin.com/in/your-linkedin
- 🐙 GitHub: https://github.com/Saurav6200907210
Contributions, issues, and feature requests are welcome.
If you'd like to improve this project:
- Fork the repository
- Create a new feature branch
- Commit your changes
- Push your branch
- Open a Pull Request
If you found this project helpful, please consider giving it a ⭐ Star on GitHub.
Your support motivates me to build more production-ready open-source projects.
This project is licensed under the MIT License.