BlogByte Blog - Version 2 Update

BlogByte Blog is a full-stack blogging platform built using the MERN (MongoDB, Express, React, Node.js) stack. This platform allows users to create, view, and manage blog posts with user authentication and real-time updates. It utilizes RESTful APIs for backend operations and follows the MVC (Model-View-Controller) design pattern for better scalability and organization.

What's New in Version 2

1. User Empowerment

   • Posts and Comments for All: Users (not just admins) can now create, edit, and manage their own posts and comments, making the platform more inclusive and dynamic.

2. Enhanced User Experience

   • New Input Styles: Refined input styles for a polished and professional look.
   • Improved Responsiveness: Optimized design for compatibility across all devices, from mobile to desktop.

3. Text Editor Upgrade

   • Switched from react-quill to jodit-react for a smoother, more robust text editing experience.

4. Interface Improvements

   • Floating Action Button: Added to all pages for quick access to key actions, enhancing usability.
   • Logo Update: A fresh, modern logo to represent the updated vision of BlogByte Blog.

5. Performance Optimizations

   • Reduced code redundancy for faster load times and improved application stability.

Demo

Check out the live demo of BlogByte Blog: Live Demo

Here are some screenshots of Admin Pages: Click here

Features

• Admin Role: Mange the user accounts and admin role approval.
• Google OAuth / User Authentication: Users can sign up, log in, and manage their profiles.
• Create, Read, Update, Delete (CRUD): Full functionality to write, edit, and delete blog posts.
• RESTful API: All blog and user operations are handled through RESTful API endpoints.
• Comments and Likes: Users can engage with blogs by adding comments and liking posts.
• Responsive Design: The UI is fully responsive, providing a seamless experience across devices.
• MVC Architecture: Ensures a clean separation of concerns between data, business logic, and user interface.
• Search and Filter: Users can search and filter blogs by keywords or categories.
• Rich Text Editor: Provides a rich text editor for writing blog posts.

Tech Stack

Backend:

• Node.js: Server-side JavaScript runtime.
• Express.js: Web framework for building RESTful APIs.
• MongoDB: NoSQL database for storing blogs, users, and comments.
• Mongoose: ODM (Object Data Modeling) library for MongoDB.
• JWT (JSON Web Tokens): For secure user authentication.

Frontend:

• React.js: JavaScript library for building user interfaces.
• Redux: State management for consistent data flow in the app.
• Tailwind CSS: For responsive and modern design.

API:

• RESTful APIs: Handling CRUD operations for blogs, users, comments, and likes.

Installation

Prerequisites:

• Node.js and npm installed.
• MongoDB set up.

Steps:

1. Clone the repository:

   git clone https://github.com/Shaik-Nagur-Basha/blogbyte-blog.git

2. Install server dependencies:

   cd blogbyte-blog
   npm install

3. Set up environment variables:

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

   MONGODB_URI=<mongodb+srv://<username>:<password>@cluster0.sat8w.mongodb.net/<database-name>?retryWrites=true&w=majority&appName=Cluster0> from "https://www.mongodb.com/products/platform/atlas-database" from "https://www.mongodb.com/products/platform/atlas-database"
   JWT_SECRET=<Random String>

   Create a .env file in the client directory and add the following:

   VITE_FIREBASE_API_KEY=<firebase-API-KEY> from "https://console.firebase.google.com"

4. Run the server:

   cd blogbyte-blog
   npm run dev

5. Run the frontend: Navigate to the client directory and run:

   cd client
   npm install
   npm run dev

6. Access the app: Open your browser and go to http://localhost:5173 to access the app.

Folder Structure

blogbyte-blog/
│
├── client/                         # Frontend code (React)
├── api/                            # Backend code (NodeJS, ExpressJS, MongoDB & JWT.
├── api/controllers/                # API controllers
├── api/models/                     # Database models
├── api/routes/                     # API routes
├── api/utils/                      # Utility functions
└── api/index.js                    # Main server file

Screenshots

Here are some screenshots of the BlogByte Blog Admin Pages:

Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any features, improvements, or bug fixes.

License

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