This is a full-stack blog application built using the FARM stack:

• FastAPI for the backend
• React for the frontend
• MongoDB as the database
• MongoDB Compass for database management

The application allows users to create, read, update, and delete (CRUD) blog posts, with a simple and responsive interface.

• FARM (FastAPI, React, MongoDB) Blog App
  • Table of Contents
  • Features
  • Prerequisites
  • Project Structure
  • Backend Setup (FastAPI)
    • 1. Install Backend Dependencies
    • 2. Create MongoDB Connection (database.py)
    • 3. Define Blog Models (models.py)
    • 4. Set Up FastAPI Routes (app.py)
  • Frontend Setup (React)
    • 1. Install Frontend Dependencies
    • 2. Create Blog App Interface (App.js)
  • MongoDB Setup (MongoDB Compass)
    • 1. Install MongoDB and MongoDB Compass
    • 2. Create a Database and Collection
  • Running the Application
    • 1. Run the FastAPI Backend
    • 2. Run the React Frontend
  • API Endpoints

• Create, Read, Update, and Delete blog posts
• FastAPI backend with MongoDB as the database
• React frontend for interacting with the blog
• Simple form for creating and updating blog posts
• CORS support for communication between frontend and backend

Before running this project, ensure you have the following installed:

• Python 3.x
• Node.js and npm
• MongoDB and MongoDB Compass

FARM-Blog-App/
├── backend/
│   ├── app.py              # FastAPI app with blog routes
│   ├── database.py         # MongoDB connection setup
│   ├── models.py           # Pydantic models for blog posts
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── App.js          # React app for frontend
│   ├── package.json        # React dependencies
├── README.md               # Project documentation

pip install -r requirements.txt

Inside database.py, set up a connection to MongoDB.

Create models.py to define the BlogPost model for request validation.

Define CRUD routes in app.py to create, read, update, and delete blog posts.

Navigate to the frontend directory and install dependencies:

cd frontend
npm install

The React frontend is set up in src/App.js.

• Download and install MongoDB from the MongoDB website.
• Open MongoDB Compass and connect to the MongoDB instance.

• In MongoDB Compass, create a new database called blog_db.
• Add a collection named posts.

Start the FastAPI server:

cd backend
uvicorn app:app --reload

The FastAPI backend should now be running at http://localhost:8000.

In a new terminal, navigate to the frontend directory and start the React app:

cd frontend
npm start

The React app should be accessible at http://localhost:3000.

• POST /posts/: Create a new blog post
• GET /posts/: Retrieve all blog posts
• GET /posts/{post_id}: Retrieve a specific blog post by ID
• PUT /posts/{post_id}: Update a blog post by ID
• DELETE /posts/{post_id}: Delete a blog post by ID