https://github.com/munavarhs/fullstack_blog_app

Blog Application. Upload topics that interests you...
https://github.com/munavarhs/fullstack_blog_app

axios jwt-authentication mern-stack multer-fileupload react-quill responsive-design

Last synced: 3 months ago
JSON representation

Blog Application. Upload topics that interests you...

• Host: GitHub
• URL: https://github.com/munavarhs/fullstack_blog_app
• Owner: munavarhs
• Created: 2024-11-24T00:09:42.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-24T15:52:20.000Z (6 months ago)
• Last Synced: 2025-01-05T23:17:34.662Z (5 months ago)
• Topics: axios, jwt-authentication, mern-stack, multer-fileupload, react-quill, responsive-design
• Language: JavaScript
• Homepage:
• Size: 3.42 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blog Application (MERN Stack)

## **Overview**

This project is a **Blog Application** built using the **MERN Stack** (MongoDB, Express.js, React, Node.js). It allows users to create, edit, and manage blog posts with a rich-text editor powered by **React Quill**. The application features user authentication using **JWT (JSON Web Tokens)** for secure access and provides functionalities like image uploads and dynamic content management.

---

## **Features**

### **User Authentication**

- Secure user login and registration with JWT-based authentication.

- Persistent user sessions with token management.

- Role-based access to resources (e.g., only authors can edit their posts).

### **Post Management**

- **Create New Posts**: Users can compose posts using a rich text editor (**React Quill**) with advanced formatting options.

- **Edit Existing Posts**: Edit content, update summaries, and modify uploaded images dynamically.

- **View Posts**: A clean and responsive interface to display blog content.

### **File Upload**

- Users can upload images for their blog posts.

- Uploaded images are stored in the server's file system and dynamically rendered.

### **Rich Text Editing**

- Powered by **React Quill**, enabling features like:

  - Bold, italic, and underline formatting.

  - Lists, links, and media embedding.

  - Header styles and blockquotes.

### **Responsive Design**

- Fully responsive front-end, optimized for desktop and mobile devices.

---

## **Technology Stack**

### **Frontend**

- **React**: Dynamic and responsive user interface.

- **React Router**: Navigation and routing between pages.

- **React Quill**: Rich-text editor for post content creation and editing.

- **Axios**: For API calls to the backend.

### **Backend**

- **Node.js**: Server-side JavaScript runtime.

- **Express.js**: Web framework for handling routes and middleware.

- **Multer**: Middleware for handling file uploads.

- **JWT**: Secure token-based authentication.

### **Database**

- **MongoDB**: Document-oriented database to store user and blog post data.

---

## **Features in Detail**

### **Authentication**

1. **Registration**:

   - Users register with their email, username, and password.

   - Passwords are securely hashed before storing in the database.

2. **Login**:

   - Users authenticate with their credentials.

   - A JWT token is generated and stored for secure session management.

---

### **Post Management**

- **Create Post**:

  - Compose posts with a title, summary, content, and optional image.

- **Edit Post**:

  - Modify post content, title, summary, or image.

  - Authorization ensures only the original author can edit the post.

---

### **Image Uploads**

- Users can upload images as part of their blog posts.

- Images are stored in a server-side folder and linked dynamically in posts.

---

## **Installation Instructions**

### **Prerequisites**

- Node.js and npm installed.

- MongoDB installed and running.

### **Steps to Run the Project**

1. Clone the repository:

   bash

   git clone https://github.com/munavarhs/FullStack-Blog-App.git

   cd FullStack-Blog-App