A full-stack blog application built using the MERN stack (MongoDB, Express.js, React.js, Node.js). This application allows users to create, update, delete, and manage blog posts and comments. It includes authentication (JWT and Google OAuth), a like/dislike feature, and an admin panel for managing content.
- User Authentication: Sign up, sign in, and social login with Google OAuth.
- Admin Panel: Admin users can manage posts and comments.
- CRUD Operations: Create, read, update, and delete blog posts and comments.
- Like/Dislike System: Users can like or dislike posts, and admins can view detailed statistics of likes/dislikes.
- Commenting System: Users can comment on blog posts with the ability to like comments.
- Responsive Design: Built with modern UI components for a seamless user experience across devices.
- Fully Documented API: All API endpoints are documented using Swagger for easy interaction with the backend.
Frontend:
- React.js
- Axios (for HTTP requests)
- Flowbite (UI components)
Backend:
- Node.js
- Express.js
- MongoDB (with Mongoose)
- JWT (JSON Web Token) for authentication
- Google OAuth for social login
- Swagger for API documentation
Other Tools:
- ESLint for code linting
- Nodemon for development
Before you begin, ensure you have the following installed on your system:
- Node.js (>=14.x)
- MongoDB (Local or Cloud, like MongoDB Atlas)
- Git
git clone https://github.com/jaydeep-pipaliya/MERN-Blog-Website.git
cd MERN-Blog-Websitenpm installcd client
npm installThe API is fully documented using Swagger. You can access the API documentation by navigating to:
http://localhost:3000/api-docs
This provides a clear and interactive interface for all available API endpoints, including request/response formats, parameters, and expected status codes.
To start the Node.js/Express server (Backend):
npm run devThe backend server will be running at: http://localhost:3000
To start the React development server (Frontend):
cd client
npm run devThe frontend will be running at: http://localhost:5173
Admin users have access to extra features, such as:
- Creating blog posts
- Deleting/Editing any user’s posts
- Viewing details of users who liked or disliked a post
To run this project, you will need to set up the following environment variables in your .env file:
MONGO=mongodb+srv://<username>:<password>@cluster0.mongodb.net/blog-app?retryWrites=true&w=majority
JWT_SECRET=your_jwt_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_GOOGLE_CLIENT_ID=your_google_client_id
- JWT Authentication: Ensures secure user sessions with the use of access tokens.
- Google OAuth: Allows users to sign in using their Google account.
- Create, Update, Delete: Users (with admin permissions) can create, update, and delete blog posts.
- Like/Dislike: Users can like or dislike blog posts and comments.
- Comments: Users can add comments to blog posts, with the ability to edit or delete their comments.
Admins have additional privileges to manage user-generated content, including the ability to:
- View who liked/disliked specific posts
- Delete any posts or comments
Contributions are always welcome! If you find a bug or have a suggestion for a new feature, please open an issue or submit a pull request.
To contribute:
- Fork this repository.
- Create a new branch (
git checkout -b feature-branch). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature-branch). - Open a pull request.
This project is open source and available under the MIT License.
For more information, feel free to reach out:
Jaydeep Pipaliya
LinkedIn
Email: jbpipaliya71@gmail.com
This README provides all the necessary details to set up, run, and contribute to the project, ensuring that anyone who interacts with the repository understands the project structure and functionality. You can modify any part of it according to your specific requirements.
Let me know if you'd like further changes or additional sections!