prashant0664/blog-website

A Blogging website created using MERN(MongoDB, ExpressJS, ReactJs, NodeJS)

Blogging Website Version 2.0

For older version checkout the branch named version1

Table of Contents

• Introduction
• New Features
• Demo
• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License

---

Introduction

Welcome to the Blogging Website project! This is a web application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It allows users to create and manage their blogs, post projects, follow other users, comment on blogs, save content, bookmark blogs, like blogs and more. The application also includes features such as email verification for user registration and Redux for state management.

---

New Features:

🔥 Like: Users can now like Blogs and can see their liked blogs in profile. 🔥 Filter: User can now filter the content from dropdown menu below Navbar. 🔥 Share: User can now share blogs on social media using share button. 🔥 Use of Params: Blog Article now use params decreasing the coupling and increasing speed. 🔥 Optimised: More optimised than ever. 🔥 User Frinedly: More user friendly tha ever.

Demo Link:

Full Demo Video Drive link: https://drive.google.com/file/d/1zPDw9Q28q-86CVlG62k5363gzIeGL7YX/view?usp=sharing

---

Features

Here are some of the key features of this Blogging Website:

🔥 User Authentication and Profiles: Users can create and manage their profiles, with email verification for account security.

🔥 Blogging: Users can create and publish their blogs with rich text formatting.

🔥 Sharing: Users can share any blogs on social media platforms;

🔥 Filter Blogs: Users can search other users and filter content according to category.

🔥 Project Posting: Users can share and showcase their projects on their profile.

🔥 Social Features: Users can follow other users, comment on blogs, and save, like and bookmark content they like.

🔥 Responsive Design: The website is designed to work seamlessly on various screen sizes and devices.

🔥 Secure: The application follows best practices for security, including password hashing and user authentication.

🔥 Content Management: Users can easily edit, delete, or download their own posts.

---

Technologies Used

The Blogging Website is built using the following technologies:

• MERN Stack:
  💫 MongoDB: A NoSQL database used to store user data, blogs, and other application data.
  💫 Express.js: A Node.js web application framework used for building the server.
  💫 React.js: A JavaScript library for building the user interface.
  💫 Node.js: A JavaScript runtime used for server-side code execution.
  

• Additional Technologies:
  💫 Redux: Used for state management within the React application.
  💫 Nodemailer: Used for email verification and sending email notifications.
  

---

Getting Started

To set up this project locally, follow the instructions below.

Prerequisites

Before you begin, make sure you have the following installed on your system:

• Node.js and npm (Node Package Manager)
• Git

Installation

(Request: Please Star⭐️ the Repo or follow github if you find this project interesting😁!
)

1. Clone this GitHub repository to your local machine:

   git clone https://github.com/Prashant0664/All-Blogs-V2.git
   

2. Change into the project directory:

   cd All-Blogs-V2
   

3. Install the backend dependencies:

   cd backend
   npm install
   

4. Install the frontend dependencies:

   cd ../client
   npm install
   

5. Set up your MongoDB database and configure the connection details in the backend's .env file.

IMP: Seperate setup of both frontend and backend is given in client and backend folders Readme.md

6. Start the backend server:

   cd ../backend
   npm start
   

7. Start the frontend development server:

   cd ../client
   npm start
   

8. Open your web browser and navigate to http://localhost:3000 to access the Blogging Website.

---

Usage

You can now use the Blogging Website to create, like, save, share, and discover blogs, projects, and much more. Use Google Signin or Register an account, verify your email, and start enjoying the features of the application.

---

Contributing

Please Star⭐️ the Repo or follow github if you find this project interesting😁!
Contributions to this project are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with clear and descriptive commit messages. (Installation and Setup has been Explained in Getting-Started )
4. Push your changes to your fork.
5. Submit a pull request to the main repository.

---

License

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

---

Note: For any doubt or question you can open an issue. I will reply ASAP.

Thank you for using and contributing to the Blogging Website project! If you have any questions or need assistance, please don't hesitate to reach out to the maintainers.

blog-website's Issues

bug: Search Bar dropdown

What is the bug here?

Every time you try to search for something, a dropdown or something else appears, giving the page a bad-looking design.

Skills required

knowledge of create-react-app

Attachments

ALL.BLOGS.-.Google.Chrome.2023-10-03.21-44-56.mp4

[BUG] : Fix Navigation Bar Right Side Button Styling

Make it more stylish Navigation Bar and also make sure logo Text alignments vertically Center etc.

Upload a video

Can you also add a video after running the project?

Decrease border radius of Search bar to 10px

High contrast of the image background in the intro section

In the intro image, the contrast is high and hurts the eyes, and also due to the similar color of the text, it's hard to read.

Suggestion: Use the image as a background image for the div and add a bit of color gradient so it mixes well with the website theme and is easy to read.

Current ~

Suggested ~

Uncaught runtime error, how to fix this?

This screenshots is of :after going live , which shows uncaught runtime error.

this one is of terminal where on backend side ,it shows : [nodemon] app crashed & on client side it works perfectly.

**So, How to solve these errors if you could help it would be great. As I'm a beginner , I don't know how to fix this.. Sorry for disturbance. **
@Prashant0664 kindly reply.

Decrease gap between Post heading and post description

Decrease the gap between Post heading and its brief description on home page.

Add a dark theme option to the website home page

Add a working dark theme option/button to the website for homepage. Website should remain in the dark theme on refreshing the page. For any query you can leave an comment.

Optimising Image Size during fetch from cloud

On opening website, blogs are taking too much time to load on home page due to high resolution of image size fetched. Optimise the home page so that it wil loads the posts in lesser time.