Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 DevConnect - MERN Stack Application on Kubernetes

License: MIT Kubernetes Docker React Node.js MongoDB

A full-stack Developer Collaboration & Task Management Platform deployed on Kubernetes (Kind) with production-ready features including auto-scaling, self-healing, and persistent storage.

📋 Table of Contents


✨ Features

Application Features

  • User Authentication - JWT-based signup/login
  • Project Management - Create, update, delete projects
  • Task Board - Drag-and-drop task management (To Do, In Progress, Review, Done)
  • Team Collaboration - Add members to projects
  • Comments System - Discuss tasks with team members
  • Priority Tracking - Low, Medium, High, Critical priorities
  • Due Dates - Set and track deadlines

DevOps Features

  • Containerization - Multi-stage Docker builds for minimal images
  • Kubernetes Orchestration - 3-node Kind cluster (1 master + 2 workers)
  • Persistent Storage - MongoDB with PVC (10GB)
  • Auto-scaling - HPA based on CPU/memory usage
  • Self-healing - Liveness and readiness probes
  • Load Balancing - Internal ClusterIP and external NodePort services
  • Configuration Management - ConfigMaps and Secrets
  • Health Checks - Comprehensive endpoint monitoring

🏗️ Tech Stack

Layer Technology Purpose
Frontend React 18 + Vite UI development with fast builds
React Router DOM Client-side routing
Axios API communication
React Hot Toast Notifications
Nginx Production serving
Backend Node.js 20 Runtime environment
Express.js REST API framework
MongoDB Database
Mongoose ODM library
JWT Authentication
Bcrypt Password hashing
DevOps Docker Containerization
Kind Local Kubernetes
Kubernetes Container orchestration
kubectl K8s management
Helm (optional) Package management

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                         User Browser                                 │
│                         http://localhost:8080                        │
└────────────────────────────────┬────────────────────────────────────┘
                                 │
                                 ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      Kind Kubernetes Cluster                         │
│  ┌───────────────────────────────────────────────────────────────┐  │
│  │                    devconnect-prod Namespace                   │  │
│  │                                                               │  │
│  │  ┌─────────────┐         ┌─────────────┐                    │  │
│  │  │ Frontend    │         │ Backend     │                    │  │
│  │  │ Service     │────────▶│ Service     │                    │  │
│  │  │ NodePort:80 │         │ ClusterIP   │                    │  │
│  │  └──────┬──────┘         └──────┬──────┘                    │  │
│  │         │                       │                           │  │
│  │         ▼                       ▼                           │  │
│  │  ┌─────────────┐         ┌─────────────┐    ┌─────────────┐ │  │
│  │  │ Frontend    │         │ Backend     │    │ MongoDB     │ │  │
│  │  │ Pods        │────────▶│ Pods        │───▶│ StatefulSet │ │  │
│  │  │ (nginx)     │         │ (Node.js)   │    │ (1 pod)     │ │  │
│  │  │ 2 replicas  │         │ 2 replicas  │    │ PVC: 10Gi   │ │  │
│  │  └─────────────┘         └─────────────┘    └─────────────┘ │  │
│  │         │                       │                           │  │
│  │         ▼                       ▼                           │  │
│  │  ┌─────────────────────────────────────────────────────┐    │  │
│  │  │              Horizontal Pod Autoscalers              │    │  │
│  │  │  - Backend: 2-5 replicas (CPU > 70%)                │    │  │
│  │  │  - Frontend: 2-5 replicas (CPU > 70%)               │    │  │
│  │  └─────────────────────────────────────────────────────┘    │  │
│  └───────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────┘

                           Data Flow:
                  Browser → Frontend → Backend → MongoDB
                      ↑                            ↑
                  React Router                  JWT Auth
                  State Management               Business Logic

📋 Prerequisites

Required Software

Tool Version Installation Command
Docker 20.10+ docker.com
Kind v0.20+ curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.20.0/kind-linux-amd64 && chmod +x ./kind && sudo mv ./kind /usr/local/bin/kind
kubectl v1.28+ curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl" && chmod +x kubectl && sudo mv kubectl /usr/local/bin/
Git Latest sudo apt install git -y (Ubuntu) or git-scm.com
Node.js 18+ (optional) nodejs.org

System Requirements

  • OS: Linux, WSL2 (Windows), or macOS
  • RAM: 8GB minimum (16GB recommended)
  • Disk Space: 10GB free
  • WSL2 (if on Windows): Enable WSL2 backend for Docker

Verify Installations

docker --version
kind version
kubectl version --client
git --version

🚀 Quick Start

Get up and running in under 5 minutes:

# 1. Clone the repository
git clone https://github.com/ProgrammingProphet/devconnect-kubernetes-project.git
cd devconnect-kubernetes-project

# 2. Create Kind cluster
kind create cluster --config kind-config.yml

# 3. Build and load images
chmod +x scripts/build-and-load.sh
./scripts/build-and-load.sh

# 4. Deploy to Kubernetes
./scripts/deploy-to-kind.sh

# 5. Access the application
kubectl port-forward -n devconnect-prod service/frontend-service 8080:80

# 6. Open in browser
echo "Open http://localhost:8080"

📦 Step-by-Step Deployment

Step 1: Clone the Repository

git clone https://github.com/ProgrammingProphet/devconnect-kubernetes-project.git
cd devconnect-kubernetes-project

Step 2: Explore the Project Structure

# View the directory structure
ls -la

# Check Kubernetes manifests
ls -la k8s-local/

# Check helper scripts
ls -la scripts/

Step 3: Create Kind Kubernetes Cluster

# Create a 3-node cluster (1 master + 2 workers)
kind create cluster --config kind-config.yml

# Verify cluster is running
kubectl cluster-info
kubectl get nodes

# Expected output:
# NAME                                      STATUS   ROLES           AGE
# devconnect-cluster-control-plane           Ready    control-plane   2m
# devconnect-cluster-worker                   Ready    <none>          2m
# devconnect-cluster-worker2                  Ready    <none>          2m

Step 4: Build Docker Images

# Make scripts executable
chmod +x scripts/*.sh

# Build both backend and frontend images
./scripts/build-and-load.sh

# Or build manually:
echo "Building backend image..."
docker build -t devconnect-backend:latest ./backend

echo "Building frontend image..."
docker build -f frontend/Dockerfile.k8s -t devconnect-frontend:prod-final ./frontend

# Verify images are built
docker images | grep devconnect

Step 5: Load Images into Kind

# Load backend image into all nodes
kind load docker-image devconnect-backend:latest --name devconnect-cluster

# Load frontend image into all nodes
kind load docker-image devconnect-frontend:prod-final --name devconnect-cluster

# Verify images are loaded
docker exec -it devconnect-cluster-control-plane crictl images | grep devconnect

Step 6: Deploy to Kubernetes

# Option A: Using the deployment script (recommended)
./scripts/deploy-to-kind.sh

# Option B: Manual deployment (in correct order)
kubectl apply -f k8s-local/namespace.yaml
kubectl apply -f k8s-local/configmap.yaml
kubectl apply -f k8s-local/secrets.yaml
kubectl apply -f k8s-local/mongodb.yaml
kubectl apply -f k8s-local/backend.yaml
kubectl apply -f k8s-local/frontend.yaml
kubectl apply -f k8s-local/hpa.yaml

Step 7: Monitor Deployment

# Watch pods come up (press Ctrl+C to exit watch mode)
kubectl get pods -n devconnect-prod -w

# In another terminal, check deployment status
./scripts/check-status.sh

Wait until all pods show Running status:

NAME                        READY   STATUS    RESTARTS   AGE
backend-769fc66c54-xxxxx    1/1     Running   0          2m
backend-769fc66c54-yyyyy    1/1     Running   0          2m
frontend-6f964f5686-zzzzz   1/1     Running   0          2m
frontend-6f964f5686-wwwww   1/1     Running   0          2m
mongodb-0                   1/1     Running   0          2m

Step 8: Access the Application

# Method 1: Port-forwarding (recommended for testing)
kubectl port-forward -n devconnect-prod service/frontend-service 8080:80

# In a browser, open: http://localhost:8080

# Method 2: Using NodePort
kubectl get svc -n devconnect-prod frontend-service
# Access via: http://localhost:3xxxx (where 3xxxx is the NodePort)

Step 9: Test the Application

# Test backend health
curl http://localhost:5000/health

# Test frontend health
curl http://localhost:8080/health

# Test API proxy through frontend
curl http://localhost:8080/api/health

# Test the main page
curl -I http://localhost:8080

📁 Project Structure

devconnect-kubernetes-project/
├── 📁 backend/                    # Backend source code
│   ├── 📁 src/                    # Node.js application source
│   │   ├── 📁 controllers/        # Route controllers
│   │   ├── 📁 models/             # MongoDB models
│   │   ├── 📁 routes/             # API routes
│   │   ├── 📁 middleware/         # Auth middleware
│   │   ├── 📁 config/             # Database config
│   │   └── server.js              # Entry point
│   ├── 📄 package.json             # Backend dependencies
│   ├── 📄 Dockerfile               # Backend Docker build
│   └── 📄 .env.example             # Environment variables template
│
├── 📁 frontend/                   # Frontend source code
│   ├── 📁 src/                    # React components
│   │   ├── 📁 components/         # UI components
│   │   ├── 📁 context/            # React context
│   │   ├── 📁 utils/              # Utility functions
│   │   ├── 📁 assets/              # Images, fonts
│   │   ├── App.jsx                 # Main app component
│   │   └── main.jsx                # Entry point
│   ├── 📁 public/                  # Static assets
│   ├── 📄 package.json             # Frontend dependencies
│   ├── 📄 Dockerfile.k8s           # Production Dockerfile
│   ├── 📄 nginx.conf               # Nginx configuration
│   ├── 📄 vite.config.js           # Vite configuration
│   └── 📄 .env.example             # Environment variables template
│
├── 📁 k8s-local/                   # Kubernetes manifests
│   ├── 📄 namespace.yaml           # devconnect-prod namespace
│   ├── 📄 configmap.yaml           # Environment configurations
│   ├── 📄 secrets.yaml             # Sensitive data (base64 encoded)
│   ├── 📄 mongodb.yaml             # MongoDB StatefulSet + PVC + Service
│   ├── 📄 backend.yaml              # Backend Deployment + Service
│   ├── 📄 frontend.yaml             # Frontend Deployment + Service
│   ├── 📄 hpa.yaml                  # Horizontal Pod Autoscalers
│   └── 📄 ingress.yaml              # Ingress controller config
│
├── 📁 scripts/                     # Helper scripts
│   ├── 📄 build-and-load.sh        # Build images & load into Kind
│   ├── 📄 deploy-to-kind.sh         # Deploy all K8s manifests
│   ├── 📄 check-status.sh           # Check deployment status
│   └── 📄 backup-project.sh         # Create project backup
│
├── 📄 kind-config.yml               # Kind cluster configuration
├── 📄 README.md                     # This documentation
├── 📄 SUMMARY.md                     # Project achievements
├── 📄 IMAGES.md                      # Docker images information
├── 📄 .gitignore                     # Git ignore rules
└── 📄 LICENSE                        # MIT License

☸️ Kubernetes Resources

Namespace

# k8s-local/namespace.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: devconnect-prod

ConfigMap

# k8s-local/configmap.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: backend-config
  namespace: devconnect-prod
data:
  NODE_ENV: "production"
  PORT: "5000"
  MONGODB_URI: "mongodb://mongodb-service:27017/devconnect"

Secrets (Base64 Encoded)

# k8s-local/secrets.yaml
apiVersion: v1
kind: Secret
metadata:
  name: backend-secrets
  namespace: devconnect-prod
type: Opaque
data:
  JWT_SECRET: <base64-encoded-value>

MongoDB StatefulSet

# k8s-local/mongodb.yaml
# Includes:
# - PersistentVolumeClaim (10GB)
# - StatefulSet with 1 replica
# - Headless Service for DNS

Backend Deployment

# k8s-local/backend.yaml
# Features:
# - 2 replicas (auto-scales to 5)
# - Liveness probe on /health
# - Readiness probe on /health
# - Resource limits (256Mi/500m)
# - References backend-config ConfigMap
# - References backend-secrets Secret

Frontend Deployment

# k8s-local/frontend.yaml
# Features:
# - 2 replicas (auto-scales to 5)
# - Nginx serving static files
# - Liveness probe on port 80
# - Readiness probe on port 80
# - NodePort service for external access

Horizontal Pod Autoscalers

# k8s-local/hpa.yaml
# Backend HPA:
# - Min: 2 replicas, Max: 5 replicas
# - Scale at CPU > 70% or Memory > 80%
#
# Frontend HPA:
# - Min: 2 replicas, Max: 5 replicas
# - Scale at CPU > 70%

🌐 Accessing the Application

Method 1: Port-Forwarding (Development)

# Run this in a terminal
kubectl port-forward -n devconnect-prod service/frontend-service 8080:80

# Access in browser: http://localhost:8080

Method 2: NodePort (Direct)

# Get the NodePort
kubectl get svc -n devconnect-prod frontend-service

# Example output: frontend-service   NodePort   10.96.34.178   <none>   80:32348/TCP
# Access: http://localhost:32348

Method 3: Ingress (If configured)

# Add to /etc/hosts (Linux/WSL) or C:\Windows\System32\drivers\etc\hosts (Windows)
127.0.0.1 devconnect.local

# Access: http://devconnect.local

🧪 Testing the Application

Test Script

# Create a test script
cat > test-app.sh << 'EOF'
#!/bin/bash

echo "🔍 Testing DevConnect Application"
echo "================================"

NAMESPACE="devconnect-prod"
PORT=8080

# Start port-forward
kubectl port-forward -n $NAMESPACE service/frontend-service $PORT:80 &
PF_PID=$!
sleep 3

echo -e "\n🌐 Testing endpoints:"

# Test health endpoint
HEALTH=$(curl -s http://localhost:$PORT/health)
echo "Health endpoint: $HEALTH"

# Test main page
MAIN=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$PORT)
echo "Main page HTTP status: $MAIN"

# Test API proxy
API=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$PORT/api/health)
echo "API proxy status: $API"

# Kill port-forward
kill $PF_PID 2>/dev/null

echo -e "\n✅ Test complete!"
EOF

chmod +x test-app.sh
./test-app.sh

Manual Testing

# Test backend directly
kubectl port-forward -n devconnect-prod service/backend-service 5000:5000 &
curl http://localhost:5000/health
kill %1

# Check pod logs
kubectl logs -n devconnect-prod -l app=backend --tail=50
kubectl logs -n devconnect-prod -l app=frontend --tail=50

# Exec into a pod
kubectl exec -it -n devconnect-prod deploy/frontend -- /bin/sh
# Inside: ps aux | grep nginx
# Inside: curl localhost/health
# Inside: exit

📊 Monitoring (Optional)

Install Prometheus Stack

# Add Helm repositories
helm repo add prometheus-community https://prometheus-community.github.io/helm-charts
helm repo add grafana https://grafana.github.io/helm-charts
helm repo update

# Create monitoring namespace
kubectl create namespace monitoring

# Install kube-prometheus-stack
helm install prometheus prometheus-community/kube-prometheus-stack \
  --namespace monitoring \
  --set grafana.enabled=true \
  --set prometheus.prometheusSpec.serviceMonitorSelectorNilUsesHelmValues=false

# Wait for pods
kubectl get pods -n monitoring -w

# Access Grafana
kubectl port-forward -n monitoring service/prometheus-grafana 3000:80 &
echo "Grafana: http://localhost:3000 (admin/prom-operator)"

# Access Prometheus
kubectl port-forward -n monitoring service/prometheus-kube-prometheus-prometheus 9090:9090 &
echo "Prometheus: http://localhost:9090"

Create ServiceMonitor for Backend

cat > k8s-local/servicemonitor.yaml << 'EOF'
apiVersion: monitoring.coreos.com/v1
kind: ServiceMonitor
metadata:
  name: backend-monitor
  namespace: devconnect-prod
  labels:
    release: prometheus
spec:
  selector:
    matchLabels:
      app: backend
  endpoints:
  - port: http
    path: /metrics
    interval: 15s
EOF

kubectl apply -f k8s-local/servicemonitor.yaml

🔧 Troubleshooting

Common Issues and Solutions

Issue: Pods stuck in Pending state

# Check events
kubectl describe pod -n devconnect-prod <pod-name>

# Check node resources
kubectl describe nodes

# Check PVC status
kubectl get pvc -n devconnect-prod

Issue: ImagePullBackOff or ErrImagePull

# Check if images are loaded in Kind
docker exec -it devconnect-cluster-control-plane crictl images | grep devconnect

# Reload images if missing
kind load docker-image devconnect-backend:latest --name devconnect-cluster
kind load docker-image devconnect-frontend:prod-final --name devconnect-cluster

# Check image pull policy
kubectl get deployment backend -n devconnect-prod -o yaml | grep imagePullPolicy

Issue: CrashLoopBackOff

# Check logs
kubectl logs -n devconnect-prod <pod-name>

# Check previous instance logs
kubectl logs -n devconnect-prod <pod-name> --previous

# Check pod events
kubectl describe pod -n devconnect-prod <pod-name>

Issue: MongoDB connection refused

# Check if MongoDB is running
kubectl exec -n devconnect-prod mongodb-0 -- mongosh --eval "db.runCommand({ping:1})"

# Check MongoDB logs
kubectl logs -n devconnect-prod mongodb-0

# Check backend logs for connection errors
kubectl logs -n devconnect-prod -l app=backend | grep -i mongo

Issue: Can't access application

# Verify services
kubectl get svc -n devconnect-prod

# Check endpoints
kubectl get endpoints -n devconnect-prod

# Port-forward directly to a pod
kubectl port-forward -n devconnect-prod pod/<pod-name> 8080:80

# Check if nginx is running in frontend pod
kubectl exec -it -n devconnect-prod deploy/frontend -- nginx -t

Issue: Backend can't reach MongoDB

# Check DNS resolution from backend pod
kubectl exec -it -n devconnect-prod deploy/backend -- nslookup mongodb-service

# Check if MongoDB service exists
kubectl get svc -n devconnect-prod mongodb-service

# Test connection from backend pod
kubectl exec -it -n devconnect-prod deploy/backend -- curl mongodb-service:27017

🧹 Clean Up

Delete the Kind cluster

# Delete the entire cluster
kind delete cluster --name devconnect-cluster

# Verify deletion
kind get clusters

Remove Docker images (optional)

# List images
docker images | grep devconnect

# Remove images
docker rmi devconnect-backend:latest devconnect-frontend:prod-final

Clean up local files (optional)

# Remove node_modules (if any)
rm -rf backend/node_modules frontend/node_modules

# Remove any temporary files
rm -f *.tar *.gz

📚 Quick Reference Commands

Repository Commands

# Clone
git clone https://github.com/ProgrammingProphet/devconnect-kubernetes-project.git

# Update
git pull

# Check status
git status

Cluster Commands

# Create cluster
kind create cluster --config kind-config.yml

# Get cluster info
kubectl cluster-info

# List nodes
kubectl get nodes

# Delete cluster
kind delete cluster --name devconnect-cluster

Image Commands

# Build images
docker build -t devconnect-backend:latest ./backend
docker build -f frontend/Dockerfile.k8s -t devconnect-frontend:prod-final ./frontend

# Load images
kind load docker-image devconnect-backend:latest --name devconnect-cluster
kind load docker-image devconnect-frontend:prod-final --name devconnect-cluster

# List images in Kind
docker exec -it devconnect-cluster-control-plane crictl images | grep devconnect

Deployment Commands

# Deploy all
kubectl apply -f k8s-local/

# Deploy specific
kubectl apply -f k8s-local/backend.yaml

# Delete deployment
kubectl delete -f k8s-local/frontend.yaml

# Update image
kubectl set image deployment/frontend -n devconnect-prod frontend=devconnect-frontend:new-tag

Monitoring Commands

# Watch pods
kubectl get pods -n devconnect-prod -w

# Check logs
kubectl logs -n devconnect-prod -l app=backend --tail=50

# Describe pod
kubectl describe pod -n devconnect-prod <pod-name>

# Get events
kubectl get events -n devconnect-prod --sort-by='.lastTimestamp'

# Check HPA status
kubectl get hpa -n devconnect-prod -w

Access Commands

# Port-forward frontend
kubectl port-forward -n devconnect-prod service/frontend-service 8080:80

# Port-forward backend
kubectl port-forward -n devconnect-prod service/backend-service 5000:5000

# Port-forward to specific pod
kubectl port-forward -n devconnect-prod pod/<pod-name> 8080:80

# Exec into pod
kubectl exec -it -n devconnect-prod deploy/frontend -- /bin/sh

Testing Commands

# Test health endpoints
curl http://localhost:8080/health
curl http://localhost:5000/health

# Test API
curl http://localhost:8080/api/health

# Test with HTTP status only
curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8080

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

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


🙏 Acknowledgments

  • React team for amazing frontend library
  • Kubernetes community for orchestration tools
  • Docker for containerization platform
  • All contributors and testers

📞 Support

For issues, questions, or contributions:


🎉 Summary

You now have a complete, production-ready MERN stack application running on Kubernetes! This project demonstrates:

Full-stack Development - React + Node.js + MongoDB ✅ Containerization - Multi-stage Docker builds ✅ Orchestration - Kubernetes on Kind ✅ Production Features - Auto-scaling, self-healing, persistent storage ✅ DevOps Best Practices - IaC, CI/CD ready, monitoring ready

Your DevConnect application is successfully deployed! 🚀

Access it at: http://localhost:8080


Last Updated: February 20, 2026
Version: 1.0.0

About

DevConnect – Developer Collaboration & Task Management Platform

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages