/MERN-Blog-Application

📝 This is a full-stack blog application built with the MERN stack (MongoDB, Express.js, React.js, Node.js). The project also utilizes ✨ Tailwind CSS for styling, 🔄 Redux for state management, and 💻 Flowbite for UI components. Additionally, Firebase is used for image storage.

Primary LanguageJavaScript

MERN Blog App 📝

overview (20)

Posts

post

admin dashboard

alsoo

see comments

see posts

see users

add comments

Welcome to the MERN Blog App, a full-stack blog application built with the MERN stack (MongoDB, Express.js, React.js, Node.js). This project provides a platform for users to create, view, and interact with blog posts.

Features ✨

  • Admin Dashboard: Administrators have access to a dashboard where they can manage posts, view user profiles, and see statistics such as the number of comments, posts, and users.
  • Post Management: Admins can create new posts, edit existing posts, and delete posts as needed.
  • User Profiles: Users have their own profiles where they can update their information, including their profile photo, name, email, and password.
  • Commenting System: Users can leave comments on blog posts, interact with other users' comments by liking or replying to them, and delete their own comments if needed.
  • Authentication: Authentication is implemented to ensure that only registered users can interact with the blog, such as leaving comments or liking posts.
  • Image Storage: Images for blog posts are stored in Firebase, providing efficient and scalable storage for media assets.

Technologies Used 💻

  • Frontend: React.js with Redux for state management and Tailwind CSS for styling, powered by Vite for lightning-fast development.
  • Backend: Node.js with Express.js for the server and MongoDB for the database.
  • UI Components: Flowbite is used for UI components to enhance the user experience.
  • Image Storage: Firebase is used to store images for blog posts, ensuring efficient and scalable media asset management.

Installation and Setup 🚀

  1. Clone the repository to your local machine.
  2. Navigate to the project directory and install dependencies using npm install.
  3. Set up the MongoDB database and configure the connection in the server.
  4. Set up Firebase and configure the storage for image uploads.
  5. Start the server using npm start and the client using npm run dev.

Usage 📋

  1. Register as a new user or log in as an existing user.
  2. Explore blog posts, leave comments, and interact with other users' comments.
  3. Admins can access the dashboard to manage posts and view user profiles.

Contributing 🤝

Contributions are welcome! Feel free to fork this repository and submit pull requests to suggest improvements or new features.