MERN Stack CI/CD Application

A full-stack MERN (MongoDB, Express.js, React, Node.js) application with automated CI/CD pipeline, featuring user authentication, task management, and AWS deployment capabilities.

Note: This is a portfolio/demonstration project. Live demo instances have been taken down to manage costs, but the application can be deployed locally or to your own cloud infrastructure using the provided configuration.

✨ Features

🔐 Authentication & Security

JWT-based authentication with secure token management
Password hashing using bcrypt
Protected routes and middleware
Input validation and sanitization

📝 Task Management

CRUD operations for tasks (Create, Read, Update, Delete)
Task prioritization (High, Medium, Low)
Task completion tracking with timestamps
User-specific task isolation
Real-time statistics and progress tracking

🎨 Modern UI/UX

Material-UI components for professional design
Responsive design for mobile and desktop
Dark/Light theme support
Loading states and error handling
Form validation with user feedback

🚀 DevOps & Deployment

Automated CI/CD pipeline with GitHub Actions
AWS deployment configuration (EC2 + S3)
Docker support for containerization
Environment-based configuration
Health checks and monitoring

🛠️ Tech Stack

Frontend

React 18 - Modern React with hooks
Material-UI (MUI) - Component library
React Router - Client-side routing
Axios - HTTP client
React Context - State management

Backend

Node.js 18 - JavaScript runtime
Express.js - Web framework
MongoDB - NoSQL database
Mongoose - Object modeling
JWT - Authentication tokens
bcrypt - Password hashing

DevOps & Tools

GitHub Actions - CI/CD pipeline
PM2 - Process management
AWS EC2 - Backend hosting capability
AWS S3 - Frontend hosting capability
Docker - Containerization
ESLint - Code linting

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Backend API   │    │   Database      │
│   (React/S3)    │────│   (Node.js/EC2) │────│   (MongoDB)     │
│                 │    │                 │    │                 │
│  Material-UI    │    │  Express + JWT  │    │  Atlas/Local    │
│  Task Manager   │    │  RESTful API    │    │  Collections    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                    ┌─────────────────┐
                    │   CI/CD Pipeline │
                    │  (GitHub Actions)│
                    │                 │
                    │  Automated      │
                    │  Testing &      │
                    │  Deployment     │
                    └─────────────────┘

🚀 Quick Start

Prerequisites

Node.js >= 18.0.0
npm >= 8.0.0
MongoDB (local or Atlas)
Git

Clone and Install

# Clone the repository
git clone https://github.com/ManuJB023/mern-cicd-app.git
cd mern-cicd-app

# Install all dependencies
npm run install-all

# Set up environment variables
cp server/.env.example server/.env
cp client/.env.example client/.env

# Start development servers
npm run dev

The application will be available at:

Frontend: http://localhost:3000
Backend: http://localhost:5000
API Health: http://localhost:5000/api/health

📦 Installation

Backend Setup

cd server
npm install

# Configure environment variables
cp .env.example .env
# Edit .env with your MongoDB URI and JWT secret

# Start backend server
npm run dev

Frontend Setup

cd client
npm install

# Configure environment variables
cp .env.example .env
# Edit .env with your API URL

# Start frontend development server
npm start

Full Stack Development

# From project root
npm run dev
# This starts both frontend and backend concurrently

🔧 Environment Variables

Backend (.env)

NODE_ENV=development
PORT=5000
MONGODB_URI=mongodb://localhost:27017/mernapp
JWT_SECRET=your_super_secret_jwt_key

Frontend (.env)

REACT_APP_API_URL=http://localhost:5000/api

Production Environment

NODE_ENV=production
PORT=5000
MONGODB_URI=mongodb+srv://user:pass@cluster.mongodb.net/mernapp
JWT_SECRET=production_jwt_secret_key

📚 API Documentation

Authentication Endpoints

Register User

POST /api/auth/register
Content-Type: application/json

{
  "username": "john_doe",
  "email": "john@example.com",
  "password": "securePassword123"
}

Login User

POST /api/auth/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "securePassword123"
}

Get Current User

GET /api/auth/me
Authorization: Bearer <jwt_token>

Task Endpoints

Get All Tasks

GET /api/tasks
Authorization: Bearer <jwt_token>

Create Task

POST /api/tasks
Authorization: Bearer <jwt_token>
Content-Type: application/json

{
  "title": "Complete project",
  "description": "Finish the MERN stack application",
  "priority": "high"
}

Update Task

PATCH /api/tasks/:id
Authorization: Bearer <jwt_token>
Content-Type: application/json

{
  "completed": true,
  "priority": "medium"
}

Delete Task

DELETE /api/tasks/:id
Authorization: Bearer <jwt_token>

Response Format

{
  "success": true,
  "data": { ... },
  "message": "Operation successful"
}

Error Response

{
  "success": false,
  "error": "Error message",
  "statusCode": 400
}

🚀 Deployment

Local Development

# Install dependencies
npm run install-all

# Start development environment
npm run dev

Production Deployment Options

Docker Deployment

# Build and run with Docker Compose
docker-compose up --build

# Or run individual containers
docker build -t mern-backend ./server
docker build -t mern-frontend ./client

AWS Deployment

The project includes configuration for AWS deployment:

Backend deployment to EC2 with PM2 process management
Frontend build deployment to S3 with static website hosting
CI/CD pipeline for automated deployments

See deployment configuration files:

.github/workflows/deploy.yml - GitHub Actions workflow
docker-compose.yml - Container orchestration
server/ecosystem.config.js - PM2 configuration

Manual Deployment

# Backend (Node.js server)
cd server
npm install --production
npm start

# Frontend (Static build)
cd client
npm run build
# Serve build folder with nginx or apache

🔄 CI/CD Pipeline

GitHub Actions Workflow

The project includes automated CI/CD pipeline that:

Continuous Integration
- Runs tests on multiple Node.js versions
- Builds frontend application
- Performs security audits
- Validates code quality
Deployment Stages
- Staging: Auto-deploy on develop branch
- Production: Auto-deploy on master branch
Quality Gates
- All tests must pass
- Security vulnerabilities check
- Build validation

Pipeline Configuration

# .github/workflows/deploy.yml
name: MERN Stack CI/CD
on:
  push:
    branches: [ master, develop ]
  pull_request:
    branches: [ master ]

Required Secrets (for deployment)

Set these in GitHub repository settings:

MONGODB_URI - Database connection string
JWT_SECRET - JWT signing secret
AWS_ACCESS_KEY_ID - AWS credentials
AWS_SECRET_ACCESS_KEY - AWS credentials

🧪 Testing

Backend Tests

cd server
npm test

Frontend Tests

cd client
npm test

Integration Tests

npm run test:integration

Test Coverage

npm run test:coverage

📊 Scripts

Development

npm run dev          # Start both frontend and backend
npm run server       # Start backend only
npm run client       # Start frontend only

Building

npm run build        # Build frontend for production
npm run build:server # Build backend (if using TypeScript)

Testing

npm test            # Run all tests
npm run test:watch  # Run tests in watch mode
npm run test:coverage # Generate coverage report

Utilities

npm run install-all  # Install all dependencies
npm run clean        # Clean node_modules and build files
npm run lint         # Run ESLint
npm run format       # Format code with Prettier

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Add tests for new functionality
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Code Style

Follow ESLint configuration
Use Prettier for code formatting
Write meaningful commit messages
Add tests for new features

📝 License

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

🙏 Acknowledgments

Create React App for the React boilerplate
Material-UI for the component library
Express.js for the web framework
MongoDB for the database
AWS for cloud infrastructure

📞 Support

If you have any questions or need help with setup, please:

Check the Issues page
Read the Documentation
Create a new issue if needed

📗 Links

Portfolio project demonstrating full-stack development with modern DevOps practices

⭐ Star this repository if you found it helpful!

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
client		client
server		server
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json
server.js		server.js

Latest commit

History

Folders and files

Repository files navigation