Skip to content
BranchesTags

Latest commit

 

History

10 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
client
client
 
 
server
server
 
 
README.md
README.md
 
 
Week7-Assignment.md
Week7-Assignment.md
 
 

Repository files navigation

Open in Visual Studio Code

MERN Stack Blog Application

A full-stack blog application built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring user authentication, CRUD operations for blog posts, and modern UI with dark/light theme support.

🚀 Live Applications

Frontend Application

Backend API

📋 Table of Contents

✨ Features

Core Features

  • 🔐 User Authentication: JWT-based authentication with registration and login
  • 📝 Blog Posts: Create, read, update, and delete blog posts
  • 🏷️ Categories: Organize posts by categories
  • 🔍 Search: Search posts by title and content
  • 📄 Pagination: Efficient pagination for large datasets
  • 🌓 Theme Support: Dark and light theme toggle
  • 📱 Responsive Design: Mobile-first responsive design

Advanced Features

  • 🛡️ Security: Input validation, rate limiting, CORS protection
  • 📊 Error Handling: Comprehensive error handling and logging
  • 🔄 Real-time Updates: Optimistic UI updates
  • 📈 Performance: Optimized queries and caching strategies

🛠️ Tech Stack

Frontend

  • React 18 - UI library
  • Vite - Build tool and dev server
  • Tailwind CSS - Utility-first CSS framework
  • React Router - Client-side routing
  • Axios - HTTP client
  • Context API - State management

Backend

  • Node.js - Runtime environment
  • Express.js - Web framework
  • MongoDB - NoSQL database
  • Mongoose - MongoDB ODM
  • JWT - Authentication
  • bcryptjs - Password hashing
  • cors - Cross-origin resource sharing
  • helmet - Security middleware

DevOps & Deployment

  • GitHub Actions - CI/CD pipeline
  • Render - Backend hosting
  • Vercel - Frontend hosting
  • MongoDB Atlas - Cloud database

📁 Project Structure

├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── contexts/       # React contexts
│   │   ├── hooks/          # Custom hooks
│   │   ├── services/       # API services
│   │   └── assets/         # Static assets
│   ├── public/             # Public assets
│   └── package.json
├── server/                 # Backend Node.js application
│   ├── controllers/        # Route controllers
│   ├── middleware/         # Custom middleware
│   ├── models/             # Mongoose models
│   ├── routes/             # API routes
│   └── package.json
├── deployment/             # Deployment configuration
│   ├── config/             # Platform-specific configs
│   └── scripts/            # Deployment scripts
├── monitoring/             # Monitoring and health checks
├── .github/workflows/      # GitHub Actions workflows
├── env.example             # Environment variables template
└── README.md

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn
  • MongoDB Atlas account
  • Git

Local Development Setup

  1. Clone the repository

    git clone https://github.com/yourusername/mern-blog-app.git
cd mern-blog-app

  2. Install dependencies

    # Install backend dependencies
cd server
npm install

# Install frontend dependencies
cd ../client
npm install

  3. Set up environment variables

    # Copy environment template
cp env.example .env

# Edit .env file with your configuration
nano .env

  4. Start the development servers

    # Start backend server (from server directory)
npm run dev

# Start frontend server (from client directory)
npm run dev

  5. Access the application

🔧 Environment Variables

Copy env.example to .env and configure the following variables:

Required Variables

# Database
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/database

# Authentication
JWT_SECRET=your_super_secret_jwt_key

# Server
PORT=5000
NODE_ENV=development

# CORS
CORS_ORIGIN=http://localhost:5173

Optional Variables

# Rate Limiting
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100

# Logging
LOG_LEVEL=info

# JWT
JWT_EXPIRES_IN=7d

🚀 Deployment

Backend Deployment (Render)

  1. Create a Render account at render.com

  2. Connect your GitHub repository

  3. Create a new Web Service

    • Build Command: cd server && npm ci && npm run build
    • Start Command: cd server && npm start
    • Environment: Node

  4. Configure environment variables in Render dashboard:

    • MONGODB_URI
    • JWT_SECRET
    • NODE_ENV=production
    • CORS_ORIGIN=https://your-frontend-domain.vercel.app

  5. Deploy - Render will automatically deploy on every push to main branch

Frontend Deployment (Vercel)

  1. Create a Vercel account at vercel.com

  2. Import your GitHub repository

  3. Configure build settings:

    • Framework Preset: Vite
    • Build Command: npm run build
    • Output Directory: dist
    • Install Command: npm ci

  4. Set environment variables:

    • VITE_API_URL=https://your-backend-domain.onrender.com/api

  5. Deploy - Vercel will automatically deploy on every push to main branch

Alternative Deployment Options

Backend Alternatives

Frontend Alternatives

🔄 CI/CD Pipeline

This project uses GitHub Actions for continuous integration and deployment.

Pipeline Overview

graph LR
    A[Push to Main] --> B[Run Tests]
    B --> C[Build Applications]
    C --> D[Deploy Backend]
    C --> E[Deploy Frontend]
    D --> F[Health Checks]
    E --> F
    F --> G[Notify Team]
Loading

Workflow Steps

  1. Backend CI

    • Install dependencies
    • Run linting
    • Execute tests
    • Build application

  2. Frontend CI

    • Install dependencies
    • Run linting
    • Execute tests
    • Build application
    • Upload build artifacts

  3. Deployment

    • Deploy backend to Render
    • Deploy frontend to Vercel
    • Run health checks
    • Send notifications

Screenshots

CI/CD Pipeline in Action

GitHub Actions Workflow

Deployment Status

Deployment Status

📊 Monitoring

Health Checks

The application includes automated health checks that monitor:

  • Backend API endpoints
  • Frontend accessibility
  • Database connectivity
  • Response times

Monitoring Script

Run health checks manually:

# Single health check
node monitoring/health-check.js --once

# Continuous monitoring
node monitoring/health-check.js --monitor

Monitoring Setup

  1. Uptime Monitoring: Set up uptime monitoring with services like:

  2. Error Tracking: Integrate error tracking with:

  3. Performance Monitoring: Monitor application performance with:

📚 API Documentation

Authentication Endpoints

Register User

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

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

Login User

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

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

Posts Endpoints

Get All Posts

GET /api/posts?page=1&limit=10&category=tech
Authorization: Bearer <token>

Create Post

POST /api/posts
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "My First Blog Post",
  "content": "This is the content of my blog post...",
  "category": "60f7b3b3b3b3b3b3b3b3b3b3"
}

Update Post

PUT /api/posts/:id
Authorization: Bearer <token>
Content-Type: application/json

{
  "title": "Updated Blog Post Title",
  "content": "Updated content..."
}

Delete Post

DELETE /api/posts/:id
Authorization: Bearer <token>

Categories Endpoints

Get All Categories

GET /api/categories

Create Category

POST /api/categories
Authorization: Bearer <token>
Content-Type: application/json

{
  "name": "Technology",
  "description": "Tech-related posts"
}

🤝 Contributing

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

Development Guidelines

  • Follow the existing code style
  • Write tests for new features
  • Update documentation as needed
  • Ensure all tests pass before submitting PR

📄 License

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

🙏 Acknowledgments

  • React - A JavaScript library for building user interfaces
  • Express.js - Fast, unopinionated, minimalist web framework
  • MongoDB - The database for modern applications
  • Tailwind CSS - A utility-first CSS framework
  • Vite - Next Generation Frontend Tooling

📞 Support

If you have any questions or need help with the application:

Made with ❤️ by [Your Name]

About

my-blog-gray-chi.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages