Blog Application

A full-stack blog application built with the MERN stack (MongoDB, Express, React, Node.js) featuring user authentication, blog post management, and a modern UI.

Features

• 🔐 User authentication with JWT
• ✍️ Create, read, update, and delete blog posts
• 🎨 Modern and responsive UI with Tailwind CSS and Flowbite
• 🔥 Firebase integration
• 📱 Mobile-friendly design
• 🔄 State management with Redux Toolkit

Tech Stack

Backend

• Node.js - Runtime environment
• Express. js - Web framework
• MongoDB - Database
• Mongoose - MongoDB object modeling
• JSON Web Tokens (JWT) - Authentication
• bcryptjs - Password hashing

Frontend

• React - UI library
• Vite - Build tool
• Redux Toolkit - State management
• React Router - Navigation
• Tailwind CSS - Styling
• Flowbite React - UI components
• Firebase - Additional services

Project Structure

Blog/
├── api/                    # Backend code
│   ├── controllers/       # Route controllers
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── utils/            # Utility functions
│   └── index. js          # Server entry point
├── client/               # Frontend code
│   ├── src/             # React source files
│   ├── public/          # Static files
│   └── index.html       # HTML entry point
└── package.json         # Root dependencies

Installation

Prerequisites

• Node.js (v14 or higher)
• MongoDB
• npm or yarn

Setup

1. Clone the repository

   git clone https://github.com/harshala334/Blog.git
   cd Blog

2. Install backend dependencies

npm install

3. Install frontend dependencies

   cd client
   npm install
   cd ..

4. Environment Variables

   Create a .env file in the root directory and add:

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   PORT=3000
   

   Create a .env file in the client directory for Firebase configuration:

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   

Running the Application

Development Mode

1. Start the backend server

   npm run dev

   The API server will run on http://localhost:3000 (or your specified PORT)

2. Start the frontend development server

   cd client
   npm run dev

   The React app will run on http://localhost:5173

Production Mode

1. Build the frontend

   cd client
   npm run build

2. Start the backend server

   npm start

Available Scripts

Backend

• npm run dev - Run the server with nodemon (auto-restart on changes)
• npm start - Run the server in production mode

Frontend

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

API Endpoints

The API provides endpoints for:

• User authentication (signup, login)
• Blog post CRUD operations
• User profile management