A web application designed to help users create, view, and comment on blog posts. Built using React for the frontend and Flask for the backend.
Blog Post App is a full-stack application that demonstrates core React concepts including components, state management, and routing with React Router. On the backend, it uses Flask to provide a RESTful API. Users can register, create posts, view posts, and add comments. This project serves as a learning tool for mastering full-stack web development.
- Home page displaying a list of blog posts.
- User profile creation and management.
- Post creation and management.
- Commenting on posts.
- Responsive and clean UI design.
- A computer, tablet, or phone.
- Access to the internet.
- A modern web browser.
Visit the deployed application at: oliver-blogspace.netlify.app
The live site allows you to:
- Browse and create profiles.
- Create and view blog posts.
- Add and view comments.
If you want to run the project locally, you'll need:
- Python and Flask installed on your computer.
- Basic understanding of React and Flask.
- Code editor (VS Code recommended).
- Terminal/Command Line.
-
Clone the repositories:
git clone git@github.com:Oliver9105/Blogpost-APP.git f git clone git@github.com:Oliver9105/Blogpost_client.git
-
Navigate to the backend directory and install dependencies:
cd Blogpost-APP pip install -r requirements.txtdownload and install environment shell dependencies and create environment
pipenv install && pipenv shell -
Start the backend server:
flask run # or python app.py -
Navigate to the frontend directory and install dependencies:
cd Blogpost_client npm install -
Start the frontend development server:
npm start
-
Open your browser and visit http://localhost:3000
The backend of this application is built using Flask, with Flask-SQLAlchemy for interacting with the database. The database models include User, Post, and Comment, which are linked through one-to-many relationships. Passwords are securely hashed using Werkzeug for authentication. The app follows a RESTful API design using Flask-RESTful to handle CRUD operations for users, posts, and comments. Additionally, SQLAlchemy Serializer is used to convert models to JSON and implement model validation to ensure data integrity.
- User Management: Register and authenticate users with secure password hashing.
- Post Management: Create, read, update, and delete posts.
- Comment Management: Add, view, and delete comments on posts.
- Database Models: User, Post, Comment with one-to-many relationships.
- Validation: Ensures data integrity with model validation.
- Serialization: Converts models to JSON for API responses.
Backend Repository: Blogpost-APP
Deployed API: https://blogpost-app-qx9s.onrender.com
The frontend of this application is built with React. It allows users to interact with the application by viewing posts, creating new posts, and adding comments. The frontend is deployed on Netlify.
- Home Page: Displays a list of posts with links to view individual posts.
- View Post Page: Displays the details of a single post along with its comments and a form to add new comments.
- Create Post Page: Provides a form to create a new post.
- Authors Page: Displays a list of authors.
Frontend Repository: Blogpost_client
Deployed Frontend: oliver-blogspace.netlify.app
- POST /users: Create a new user
{ "username": "johndoe", "email": "johndoe@example.com", "password": "password123" }
- GET /posts: Get all posts
- GET /posts/:id: Get a post by ID
- POST /posts: Create a new post
{ "title": "My First Post", "content": "This is the content of my first post", "user_id": 1 }
- GET /posts/:id/comments: Get comments for a post
- POST /posts/:id/comments: Add a comment to a post
{ "user_id": 1, "content": "This is a comment" }
- React - JavaScript library for building user interfaces.
- React Router - Library for routing in React applications.
- Formik - Library for building and managing forms.
- Yup - Library for form validation.
- Flask - Python micro-framework for the backend.
- CSS3 - Styling.
- JavaScript (ES6) - Scripting language.
- Python - Programming language.
- Netlify - Platform for deploying the frontend.
If you have any questions, suggestions, or need assistance, please contact:
- 📧 Email: Olivercher1000@gmail.com
MIT License © 2025 Oliver (Oliver9105)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.