Skip to content

Latest commit

 

History

History
105 lines (73 loc) · 3.66 KB

README.md

File metadata and controls

105 lines (73 loc) · 3.66 KB
Raw

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

User Account

Live Demo Link

App Demo

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.