FARM (FastAPI, React, MongoDB) Blog App

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.

Table of Contents

• 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

Features

• 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

Prerequisites

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

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

Project Structure

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

Backend Setup (FastAPI)

1. Install Backend Dependencies

pip install -r requirements.txt

2. Create MongoDB Connection (database.py)

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

3. Define Blog Models (models.py)

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

4. Set Up FastAPI Routes (app.py)

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

Frontend Setup (React)

1. Install Frontend Dependencies

Navigate to the frontend directory and install dependencies:

cd frontend
npm install

2. Create Blog App Interface (App.js)

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

MongoDB Setup (MongoDB Compass)

1. Install MongoDB and MongoDB Compass

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

2. Create a Database and Collection

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

Running the Application

1. Run the FastAPI Backend

Start the FastAPI server:

cd backend
uvicorn app:app --reload

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

2. Run the React Frontend

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.

API Endpoints

• 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