A blog writing website built with react.js, python flask and mongoDB
BlogNetwork is a comprehensive blogging platform designed to bring writers and readers together in a seamless environment. Built with the power of React.js for the frontend, Python Flask for the backend, and MongoDB as the database, it offers a robust and scalable solution for content creators and enthusiasts.
Whether you're an individual looking to share your thoughts, a professional showcasing your expertise, or simply a reader in search of quality content, BlogNetwork provides a user-friendly interface to cater to your needs. With features like user registration, article categorization, and the ability to add images to articles, it ensures a rich and interactive blogging experience.
The platform's responsive design ensures that users have a consistent experience across devices, making it easy to write, read, and interact on the go. Additionally, with its open-source nature, developers can contribute, customize, and enhance the platform to suit specific requirements.
Join us on this journey and be a part of the BlogNetwork community, where every story matters!
Main features of your application:
- User registration and login
- Writing articles
- Categorizing articles
- Adding images to articles
Before getting started, make sure you have the following prerequisites installed:
- Python 3.x: You can download Python from the official website: https://www.python.org/downloads/
- Node.js and npm: You can download Node.js from the official website: https://nodejs.org/
- MongoDB You can download mongoDB from the official website: https://www.mongodb.com/try/download/community
Instructions on how to install and set up the project locally. First of all make sure mongoDB is installed and running properly on your local machine.
- Clone the repository:
git clone https://github.com/Gourav2000/BlogNetwork
- Install dependencies for the Flask backend:
cd backend
pip install -r requirements.txt
- Start the Flask backend:
flask run
- Install dependencies for the React frontend:
cd ../frontend
npm install --force
- Start the React frontend:
npm start
Alternatively You can download and install docker from the official website https://docs.docker.com/engine/install/ for your respective OS. Then Type
docker-compose up
For setting up the whole project in a single command.
BlogNetwork is designed to be user-friendly and intuitive. Here's a guide to help you get started with the platform:
- If you're new to BlogNetwork, start by registering an account by navigating to the
Registerpage. - Provide your name, email, and a secure password.
- If you already have an account, simply log in using your email and password on the
Loginpage.
- Once logged in, head to the
Writepage. - Fill in the post title, content, and choose a relevant category.
- You can also upload a cover image to make your post visually appealing.
- Click on the
Publishbutton to make your post live.
- The
Homepage displays a list of all available posts. - Click on a post title to read it in detail.
- You can also leave comments on posts to engage with the author and other readers.
- Navigate to the
Profilepage to view and manage your personal details. - You can update your name, email, profile picture, and even view a list of all your posts.
- If needed, you can also delete your profile from this page.
- Once you're done, you can log out of your account from the top-right corner of the platform.
Remember, BlogNetwork is a community-driven platform. We encourage positive interactions and sharing of quality content. Happy blogging!
We warmly welcome contributions to BlogNetwork! Whether you're fixing bugs, enhancing documentation, or suggesting new features, your efforts and expertise are invaluable. Here's a step-by-step guide on how you can contribute:
Begin by forking the BlogNetwork repository to your own GitHub account.
After forking, clone your forked repository to your local machine:
git clone https://github.com/YOUR_USERNAME/BlogNetwork.git
Before making any modifications, create a new branch:
git checkout -b name-of-your-new-branch
Make your desired changes, improvements, or fixes within this branch.
Once you're satisfied with your modifications:
git add .
git commit -m "Briefly describe your changes here"
git push origin name-of-your-new-branch
Navigate to the BlogNetwork repository on GitHub and create a new pull request from your branch.
Our maintainers will review your pull request. Please address any feedback or comments to ensure your changes are merged.
Code of Conduct:
We expect all contributors to respect our code of conduct. Ensure your interactions within the community are considerate, inclusive, and adhere to open-source best practices.
A huge thank you for considering contributing to BlogNetwork! Your dedication helps enhance this platform for everyone.
BlogNetwork is licensed under the MIT License. This means you are free to use, modify, and distribute the project, as long as you include the original copyright and license notice in any copy of the software/source.
The details of the MIT License provide clear information about what you can and cannot do with the software. In essence, the MIT License is a permissive license, allowing for reuse in proprietary and free projects.
For the full license text, please refer to the MIT License on the Open Source Initiative's website.
Note: While the software is licensed under the MIT License, it's important to remember that any content (e.g., blog posts, images) created by users on the platform may have its own licensing and copyright terms. Always ensure you have the right to use or distribute such content.
 |
 |
 |
 |
 |
 |
 |
 |
Path: /
- Displays a list of all posts.
- Each post showcases its title, a brief description, and an image.
- Posts can be filtered based on categories.
- Quick navigation links are provided for easy access to posts.
- Method:
GET - Description: Fetches and displays all posts on the home page.
Path: /post/:id
- Displays a single post based on the provided post ID.
- Shows post title, content, and image.
- Displays the author's details.
- Allows users to comment on the post.
- Method:
GET - Parameters:
id: ID of the post to be fetched.
- Description: Fetches and displays a single post based on the provided post ID.
Path: /write
- Allows users to write a new post or edit an existing post.
- Users can add a title, content, and choose a category for the post.
- Provides an option to upload a cover image for the post.
- Method:
POST(for new posts) /PUT(for updating existing posts) - Description: Allows users to write a new post or edit an existing post.
Path: /profile
- Displays the profile details of the logged-in user.
- Shows user's name, email, and profile picture.
- Provides options to edit profile details or delete the profile.
- Method:
GET - Description: Fetches and displays the profile details of the logged-in user.
Path: /login
- Allows users to log in using their email and password.
- Provides a link to the registration page for new users.
- Method:
POST - Parameters:
email: Email of the user.password: Password of the user.
- Description: Authenticates and logs in the user.
Path: /register
- Allows new users to register by providing their name, email, and password.
- Provides an option to upload a profile picture.
- Method:
POST - Parameters:
name: Name of the user.email: Email of the user.password: Password of the user.
- Description: Registers a new user.