📝 Modern Blog App (MERN Stack)

🚧 WORK IN PROGRESS: This project is currently under active development. Features are being added and improved daily. You might encounter bugs or incomplete UI elements.

🌟 About The Project

This is a full-stack blogging platform designed to provide a seamless writing and reading experience. It includes a robust Admin Dashboard for managing posts, a rich text editor for content creation, and a responsive UI.

I am building this project to master the MERN Stack (MongoDB, Express, React, Node.js) and implement complex features like image handling and authentication.

🛠️ Tech Stack

Frontend:

• React.js (Vite + SWC)
• Tailwind CSS (Styling & Responsiveness)
• React Hook Form (Form Validation)
• Quill (Rich Text Editor)
• Axios (API Integration)

Backend:

• Node.js & Express.js
• MongoDB (Mongoose) for Database
• Multer (Image Uploads)

🚀 Features & Progress

Here is the current status of the project implementation:

• Project Setup: Vite + React environment configured.
• Admin Dashboard: Responsive Sidebar and Layout.
• Blog Management: Add, Edit, and Delete blogs.
• Rich Text Editor: Integrated Quill Editor for writing blogs.
• Image Handling: Image upload with preview functionality.
• Form Validation: Robust validation using React Hook Form.
• Responsiveness: Mobile-friendly Admin Panel.
• Authentication: Admin Login/Logout (In Progress).
• Public View: Frontend for users to read blogs.
• Comments System: User engagement features.
• Search & Filter: Filtering blogs by category.

💻 How to Run Locally

If you want to check out the code, follow these steps:

1. Clone the repository

   git clone [https://github.com/Anos714/Modern-Blog-App-MERN-Stack-.git](https://github.com/Anos714/Modern-Blog-App-MERN-Stack-.git)
   cd your-repo-name

2. Setup Backend

   cd backend
   npm install
   npm run server

3. Setup Frontend

   cd frontend
   npm install
   npm run dev

4. Environment Variables Create a .env file in the backend folder and add your credentials:

   PORT=4000
   MONGO_URI=your_mongodb_connection_string

📸 Screenshots (Coming Soon)

Screenshots of the Dashboard and Add Blog page will be added once the UI is finalized.

🤝 Contact / Connect

Created by [Rahul Sain] - feel free to reach out!

• LinkedIn: [https://www.linkedin.com/in/rahul-sain-2190a2315]
• GitHub: [https://github.com/Anos714]

---

Thanks for visiting! If you have any suggestions, feel free to open an issue.