Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kush-ankit/blog-mern
This MERN Stack Blog App lets users register, log in, and create blogs. Built with MongoDB, Express, React, and Node.js, it features JWT authentication and a responsive UI. Users can easily write and view blogs with public access.
https://github.com/kush-ankit/blog-mern
bcrypt expressjs javascript jwt-authentication mongodb nodejs reactjs zustand
Last synced: about 1 month ago
JSON representation
This MERN Stack Blog App lets users register, log in, and create blogs. Built with MongoDB, Express, React, and Node.js, it features JWT authentication and a responsive UI. Users can easily write and view blogs with public access.
- Host: GitHub
- URL: https://github.com/kush-ankit/blog-mern
- Owner: kush-ankit
- Created: 2024-09-19T11:13:30.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T20:27:11.000Z (3 months ago)
- Last Synced: 2024-10-25T12:54:58.478Z (3 months ago)
- Topics: bcrypt, expressjs, javascript, jwt-authentication, mongodb, nodejs, reactjs, zustand
- Language: JavaScript
- Homepage: https://my-bloggers.web.app/
- Size: 688 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog App
                
This is a full-stack Blog application built with the MERN stack (MongoDB, Express, React, Node.js). The application allows users to create and manage blogs, and it includes an admin approval workflow before blogs are published. Users can sign in using Google or email/password.
## Features
- **User Authentication**: Sign in via email/password or logout.
- **Blog**: Users can post, read, edit and delete blogs after signing in.
- **Responsive Design**: Fully responsive UI built with TailwindCSS.
## Tech Stack
- **Frontend**: React, TailwindCSS, React Router DOM, Zustand (for state management), Material-Tailwind Library
- **Backend**: Node.js, Express, MongoDB, JavaScript, Mongoose
- **Authentication**: JWT, Bcrypt for Encryption
- **Database**: MongoDB
## Setup
### Prerequisites
- Node.js and npm installed.
- JavaScript and react knowledge required.
- MERN stack
### Frontend Setup
1. Clone the repository and navigate to the frontend directory:
```bash
git clone https://github.com/kush-ankit/blog-mern.git
cd blog-app/client
```
2. Install the dependencies:
```bash
npm install
```
3. Start the React development server:
```bash
npm run dev
```
4. The app will run at `http://localhost:5173`.
### Backend Setup
1. Navigate to the backend directory:
```bash
cd blog-app/server
```
2. Install the dependencies:
```bash
npm install
```
3. Set up environment variables by creating a `.env` file in the backend directory:
```
PORT=4000
MONGO_URI=
JWT_SECRET=
```
4. Start the Node.js server:
```bash
npm run dev
```
5. The backend server will run at `http://localhost:4000`.
### Environment Variables
| Variable | Description |
| ---------------------- | -------------------------------------------- |
| `PORT` | The port on which the server will run |
| `MONGO_URI` | MongoDB connection string |
| `JWT_SECRET` | Secret key for signing JWT |
## How It Works
1. **User Authentication**: Users can sign in using email/password. Upon successful authentication, a JWT is generated and stored in a cookie for subsequent requests.
2. **Blog Creation**: After logging in, users can create a new blog. The blog is stored in the database.
3. **Public Display**: The blog becomes visible to the public. The user sees their blogs in their dashboard.
## Screenshots
## Folder Structure
## API Endpoints
### Auth Routes
- `POST /api/auth/login` - Log in with email/password
- `POST /api/auth/google` - Log in with Google OAuth
- `POST /api/auth/register` - Register a new user
### Blog Routes
- `GET /api/blogs` - Fetch all approved blogs
- `POST /api/blogs` - Create a new blog (requires authentication)
- `GET /api/blogs/:id` - Fetch a single blog by ID
### Admin Routes
- `GET /api/admin/blogs/pending` - Fetch all pending blogs
- `PUT /api/admin/blogs/:id/approve` - Approve a blog
- `PUT /api/admin/blogs/:id/reject` - Reject a blog with comments
## Contributing
If you'd like to contribute to this project, please submit a pull request with clear explanations of the changes made.