An interactive and feature-rich blogging website developed using modern web technologies. This project allows users to create, edit, and delete blogs, comment on posts, and view trending blogs. Users can sign in using Google OAuth for easy authentication, upload images via Cloudinary, and manage their blogs through a personalized dashboard.
- Project Overview
- Features
- Statistics
- Technologies Used
- Installation
- Usage
- API Endpoints
- Contributing
- Pull Request Review Criteria
- Code of Conduct
- Contributors
- Stargazers
- Forkers
- License
The aim of this project is to provide users with an interactive platform to share their thoughts, experiences, and ideas through blogs. The website includes features like trending blogs, recent blogs, a user management dashboard, and Google OAuth-based authentication for easy sign-in.
- Develop a user-friendly blogging platform.
- Implement secure user authentication using Passport.js and Google OAuth.
- Integrate Cloudinary for efficient image management.
- Create a trending page to showcase the most liked blogs.
- Design a page to display recently created blogs.
- Provide a dashboard for users to manage their blogs.
- User Authentication: Secure user login and registration using Google OAuth.
- Blog Management: Users can create, edit, and delete blogs.
- Comment System: Engage in discussions by commenting on blogs.
- Trending Page: View the most popular blogs.
- Recent Blogs Page: Display newly created blogs.
- User Dashboard: Manage and track your blogs in a dedicated dashboard.
- Image Management: Upload and manage blog images with Cloudinary.
| π Stars | π΄ Forks | π Issues | π Open PRs | π Closed PRs | π Languages | π Contributors |
- React.js
- Vite.js
- Material UI (for styling)
- Node.js
- Express.js
- MongoDB
- Passport.js
- Google OAuth
- Cloudinary
-
Clone the repository:
git clone https://github.com/sharmavikas4/MERN_BLOG.git
-
Navigate to the project directory:
cd MERN_BLOG -
Install dependencies:
- For the server:
cd server npm install - For the client:
cd ../client npm install
- For the server:
-
Set up environment variables:
- Create a
.envfile in the server directory and add:GOOGLE_CLIENT_ID=<your-google-client-id> GOOGLE_CLIENT_SECRET=<your-google-client-secret> URL=<your-server-url> CLIENT_URL=<your-client-url> DB=<your-database-connection-string> CLOUD_NAME=<your-cloudinary-cloud-name> CLOUDINARY_KEY=<your-cloudinary-api-key> CLOUDINARY_SECRET=<your-cloudinary-api-secret>
- Create a
-
Start the backend server:
nodemon index.js
-
Set up environment variables for the client:
- Create a
.envfile in the client directory and add:VITE_REACT_APP_SERVER_URL=<your-server-url> VITE_REACT_APP_CLIENT_URL=<your-client-url>
- Create a
-
Start the client side (frontend):
npm run dev
- Visit the website and sign in using your Google account.
- Create, edit, or delete blogs from your dashboard.
- Explore trending or recent blogs on their respective pages.
- Comment on blogs to engage with the community.
| Method | Endpoint | Description |
|---|---|---|
| POST | /auth/google | Google OAuth login |
| POST | /success | Create a new blog |
| GET | /success | Fetch all blogs |
| POST | /success/like | Add like to a post |
| POST | /success/comments | Add a comment to a blog |
| GET | /trending | Fetch trending blogs based on likes |
| GET | /new | Fetch recently created blogs |
| POST | /edit | Edit a blog |
| POST | /del | Delete a blog |
| GET | /dashboard | Fetch current user data |
| GET | /likePost | Fetch posts liked by current user |
| GET | /logout | Logout current user |
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new feature branch:
git checkout -b feature/your-feature
- Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature
- Open a pull request.
- Please fill out the PR template properly when creating a pull request.
- Assign yourself to the issue youβre working on to help us track progress.
- Never commit to the main branch.
- Your work must be original and adhere to the project's coding standards.
- Comment your code where necessary for clarity.
- Always ensure all tests pass before pushing your changes by running:
npm run testWe strive to create a welcoming and inclusive environment for all contributors and users. By participating in this project, you agree to abide by our Code of Conduct.
- Respect: Treat everyone with respect, regardless of their background or opinions.
- Inclusivity: Encourage and support diverse perspectives and contributions.
- Collaboration: Be open to constructive feedback and collaboration.
- Professionalism: Maintain professionalism in all interactions, online and offline.
A heartfelt thank you to the following individuals for their valuable contributions to this project! Your support and dedication are greatly appreciated:
This project is licensed under the MIT License - see the LICENSE file for details.
