karthiikjr/blogbloom

blogBloom is a full-stack blog application

blogBloom

blogBloom is a full-stack blog application created using the MERN (MongoDB, Express.js, React, Node.js) stack. It allows users to register, login, create, edit, and view blogs with rich text content and embedded images.

Features

• User Authentication: Register and login securely using bcrypt for password encryption and JSON Web Tokens (JWT) for token creation and verification.
• Blog Listing: View a list of blogs, limited to 20, with newer ones displayed at the top.
• Blog Creation and Editing: Create your own blogs with text content and embedded images. Edit your existing blogs.
• Frontend Design: Designed with React for a modern and responsive user interface.
• Styling: Styled using Tailwind CSS for a clean and aesthetic look.
• Rich-Text Editing: Utilizes React Quill as the rich-text editor for an enhanced blogging experience.

Technologies Used

Frontend

• React: JavaScript library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for styling.
• React Quill: A powerful and customizable rich-text editor for React.

Backend

• Express.js: Web application framework for Node.js, used for routing.
• Bcrypt: Library for password hashing and encryption.
• Cookie Parser: Middleware for parsing Cookie headers.
• CORS: Middleware for enabling Cross-Origin Resource Sharing.
• JSON Web Token: For generating and verifying tokens for user authentication.
• Multer: Middleware for handling multipart/form-data (used for image uploads).
• Mongoose: MongoDB Object Data Modeling (ODM) library for Node.js.
• MongoDB: NoSQL database used for storing blog data.

Screenshots

Before Login

Home page

Post Page

Login / Register

After Login

How to Install

Client (Frontend)

1. Open the client folder in your terminal.
2. Run npm install to install the required dependencies.

Server (Backend)

1. Open the server folder in your terminal.
2. Create a folder named "uploads" for storing images.
3. Run npm install to install the required dependencies.

How to Run

1. In the client folder, run npm run dev to start the frontend server.
2. In the server folder, run npm run dev to start the backend server.

Visit http://localhost:5173 in your browser to access the blogBloom application.

Happy Blogging!