AuroraBlog - A Full-Stack MERN Blog Application

AuroraBlog is a comprehensive web application built using the MERN stack, designed to provide a seamless blogging experience for both authors and readers. It features user authentication, blog creation and management, a personalized dashboard for authors, and a responsive user interface with dark/light mode capabilities.

Features

User Management

• Reader Role: Users can register as readers to browse and read blogs.
• Author Role: Users can register as authors to create, manage, and publish their own blogs.
• Authentication: Secure user registration and login with JWT-based authentication.
• Profile Management: Authors can view and update their profiles.

Blog Management

• Create Blog: Authors can create new blog posts with rich content, including multiple paragraphs and images.
• Update Blog: Authors can edit their existing blog posts.
• Delete Blog: Authors can remove their blog posts.
• View Blogs: Browse all published blogs.
• Single Blog View: View individual blog posts with full content.
• My Blogs: Authors can view a list of all their own published and unpublished blogs.

Dashboard & Analytics (for Authors)

• Personalized Dashboard: A dedicated section for authors to manage their content.
• Blog Analytics: A chart (Doughnut chart) showing the number of published vs. unpublished blogs.

User Interface

• Responsive Design: Optimized for various screen sizes (desktop, tablet, mobile).
• Dark/Light Mode: Users can switch between dark and light themes for a personalized viewing experience.
• Categories: Blogs are categorized (Lifestyle, Technology, Sports, Travel, Business, Economy) for easy navigation.
• Trending & Latest Blogs: Homepage sections highlighting popular and recent posts.
• Popular Authors: Displays a list of active authors.

Technologies Used

Frontend (React.js)

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool that provides a lightning-fast development experience.
• Axios: Promise-based HTTP client for making API requests.
• Chart.js & React-Chartjs-2: For creating interactive charts (e.g., blog analytics).
• React Icons: A collection of popular SVG icons.
• React Multi Carousel: A responsive carousel component for React.
• React Hot Toast: A lightweight and customizable toast notification library.
• React Spinners: A collection of loading spinner components.
• React Router DOM: For declarative routing in React applications.

Backend (Node.js & Express.js)

• Node.js: JavaScript runtime environment.
• Express.js: A fast, unopinionated, minimalist web framework for Node.js.
• MongoDB & Mongoose: MongoDB is a NoSQL database, and Mongoose is an ODM (Object Data Modeling) library for MongoDB and Node.js.
• Cloudinary: Cloud-based image and video management service for handling media uploads.
• Cookie Parser: Middleware for parsing cookies.
• CORS: Middleware for enabling Cross-Origin Resource Sharing.
• Dotenv: Loads environment variables from a .env file.
• Express Fileupload: Middleware for handling file uploads.
• JSON Web Token (JWT): For secure user authentication.
• Bcrypt: For hashing passwords.
• Validator: For string validation and sanitization.

Installation and Usage

To get this project up and running on your local machine, follow these steps:

1. Clone the repository

git clone https://github.com/Shikhar1504/AuroraBlog
cd AuroraBlog

2. Backend Setup

Navigate to the backend directory:

cd backend

Install dependencies:

npm install

Create a .env file in the backend directory and add the following environment variables. Replace the placeholder values with your actual credentials and URLs:

PORT=4000
MONGO_URI="your_mongodb_connection_string"
JWT_SECRET_KEY="your_jwt_secret_key"
JWT_EXPIRES="7d"
COOKIE_EXPIRE=7
CLOUDINARY_CLIENT_NAME="your_cloudinary_cloud_name"
CLOUDINARY_CLIENT_API="your_cloudinary_api_key"
CLOUDINARY_CLIENT_SECRET="your_cloudinary_api_secret"
FRONTEND_URL="http://localhost:5173"

Start the backend server:

npm start
# or for development with hot-reloading
npm run dev

3. Frontend Setup

Navigate to the frontend directory:

cd ../frontend

Install dependencies:

npm install

Create a .env file in the frontend directory and add the following environment variable:

VITE_BACKEND_URL="http://localhost:4000/api/v1"

Start the frontend development server:

npm run dev

The frontend application should now be running, typically accessible at http://localhost:5173.

API Endpoints

User Routes (/api/v1/user)

• POST /register: Register a new user (Reader or Author).
• POST /login: Log in a user.
• GET /logout: Log out the current user.
• GET /myprofile: Get the profile of the authenticated user.
• GET /authors: Get a list of all authors.

Blog Routes (/api/v1/blog)

• POST /post: Create a new blog post (Author only).
• DELETE /delete/:id: Delete a blog post by ID (Author only).
• GET /all: Get all published blog posts.
• GET /singleblog/:id: Get a single blog post by ID.
• GET /myblogs: Get all blog posts by the authenticated author.
• PUT /update/:id: Update a blog post by ID (Author only).

File Structure

./
├── backend/                                # Node.js/Express.js backend
│   ├── controllers/                        # Logic for handling requests
│   │   ├── blogController.js
│   │   └── userController.js
│   ├── database/
│   │   └── dbConnection.js                 # MongoDB connection setup
│   ├── middlewares/
│   │   ├── auth.js                         # Authentication and authorization middleware
│   │   ├── catchAsyncErrors.js             # Utility for catching async errors
│   │   └── error.js                        # Custom error handling
│   ├── models/
│   │   ├── blogSchema.js                   # Mongoose schema for blogs
│   │   └── userSchema.js                   # Mongoose schema for users
│   ├── routes/
│   │   ├── blogRouter.js                   # API routes for blogs
│   │   └── userRouter.js                   # API routes for users
│   ├── utils/
│   │   └── jwtToken.js                     # JWT token generation and handling
│   ├── .gitignore
│   ├── app.js                              # Main Express application setup
│   ├── package.json                        # Backend dependencies and scripts
│   ├── package-lock.json
│   └── server.js                           # Entry point to start the backend server
├── frontend/                               # React.js frontend
│   ├── public/
│   │   ├── blog.jpg
│   │   ├── imgPL.webp
│   │   └── vite.svg
│   ├── src/
│   │   ├── assets/
│   │   │   └── react.svg
│   │   ├── components/
│   │   │   ├── layout/
│   │   │   │   ├── Footer.jsx
│   │   │   │   ├── Navbar.jsx
│   │   │   │   └── SideBar.jsx
│   │   │   ├── miniComponents/
│   │   │   │   ├── Chart.jsx
│   │   │   │   ├── CreateBlog.jsx
│   │   │   │   ├── HeroSection.jsx
│   │   │   │   ├── LatestBlogs.jsx
│   │   │   │   ├── MyBlogs.jsx
│   │   │   │   ├── MyProfile.jsx
│   │   │   │   ├── PopularAuthors.jsx
│   │   │   │   └── TrendingBlogs.jsx
│   │   │   └── pages/
│   │   │       ├── About.jsx
│   │   │       ├── AllAuthors.jsx
│   │   │       ├── Blogs.jsx
│   │   │       ├── Dashboard.jsx
│   │   │       ├── Home.jsx
│   │   │       ├── Login.jsx
│   │   │       ├── Register.jsx
│   │   │       ├── SingleBlog.jsx
│   │   │       └── UpdateBlog.jsx
│   │   ├── App.css
│   │   ├── App.jsx                       # Main React application component
│   │   └── main.jsx                      # React entry point
│   ├── .gitignore
│   ├── eslint.config.js
│   ├── index.html                        # Frontend HTML entry file
│   ├── package.json                      # Frontend dependencies and scripts
│   ├── package-lock.json
│   └── vite.config.js                    # Vite configuration
└── README.md                               # This README file

Author

Shikhar

License

This project is licensed under the ISC License.