---

MERN Blog App

A full-stack blog application built with the MERN (MongoDB, Express, React, Node.js) stack, offering a robust platform for users to create, edit, and manage blog posts. The app includes a powerful admin dashboard with a Content Management System (CMS), allowing admins to have complete control over the content, users, and comments.

Features

User Features:

• Authentication: Secure login and registration using Firebase Auth.
• Blog Management: Users can create, read, update, and delete blog posts.
• Commenting System: Readers can comment on blog posts to engage with content.
• Responsive UI: Fully responsive design using Tailwind CSS, ensuring a smooth user experience on all devices.

Admin Features:

• Content Management System (CMS): Admins have access to a CMS for managing blog posts, users, and comments.
• User Management: Admins can view, block, or remove users.
• Post Moderation: Admins can approve, edit, or delete posts.
• Comment Moderation: Control over comment visibility and moderation tools for community management.

Installation

Step 1: Clone the repository

git clone https://github.com/Bamof25th/BlogApp.git

Step 2: Install dependencies

Navigate to the api and client directories and install dependencies:

cd api && npm install
cd client && npm install

Step 3: Set up environment variables

Add your configuration details to the env.js file for Firebase and MongoDB integration:

FIREBASE_API_KEY=yourFirebaseKey
MONGO_URI=yourMongoDBConnection

Step 4: Start the app

To run the application in development mode:

npm run dev

Demo

You can try out the live demo using the following credentials:

Admin Account

• Email: [email protected]
• Password: admin123

User Account

• Email: [email protected]
• Password: user123

Live Demo Link

Technologies Used

• Frontend: React, Redux for state management, Tailwind CSS for responsive styling.
• Backend: Node.js and Express for the server-side logic and APIs.
• Database: MongoDB for storing blog data and user information.
• Authentication: Firebase Authentication for secure user login and registration.
• Deployment: Render for hosting both the frontend and backend.

Future Improvements

• Role-based Access Control: Implement more granular permissions for different user roles.
• Rich Text Editor: Adding a WYSIWYG editor for more flexible content creation.
• SEO Optimization: Improve the app's visibility with search engine optimization techniques.

Lessons Learned

• Strengthened understanding of full-stack development using the MERN stack.
• Enhanced knowledge of implementing CMS for real-world applications.
• Improved state management techniques using Redux.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the project.
2. Create your feature branch .
3. Commit your changes.
4. Push to the branch.
5. Open a pull request.

---

Let me know if you’d like to include more details or adjustments!

Insert gif or link to demo

https://drive.google.com/file/d/18iP15DXcK1sFibjuUncIuyucK6UMowg0/view?usp=sharing

Lessons Learned

I have polished my MERN and redux skills while making this project and it was a great learning journy.