How to Build a Bookstore App with FARM Stack (FastAPI, React, and MongoDB)

The need to build full-stack applications that are fast, scalable and easy to maintain is now more important than ever. The FARM stack - FastAPI, React and MongoDB offers a combination of tools that can get the job done.

• FastAPI is a high-performance web framework known for its speed and instant documentation used in building APIs with the Python programming language.

• React is a popular JavaScript library used to build reliable, fast and scalable web applications. It allows for the creation of reusable UI components.

• MongoDB is a flexible NoSQL database that makes data modelling and storage simple especially for JSON-like documents.

In this article, we’ll build a simple full-stack Bookstore application to show key CRUD operations using the FARM stack. The backend will showcase a RESTful API using FastAPI, the frontend will be built using the React library, and MongoDB will serve as the database. By the end of this article, you should be able to do the following:

• View a list of books

• Add new books

• Edit an already existing book

• Delete books

Prerequisites

• Basic understanding of Python, JavaScript, and REST APIs

• Tools required: Python 3.x, Node.js, MongoDB, npm/yarn,

• Project structure overview

  • Create a directory for your app

mkdir bookstore_farm
cd bookstore_farm

• Create subdirectories for the backend and frontend

mkdir backend frontend

Setting Up the Backend with FastAPI

Set up the Backend

• Navigate to the backend directory, create a virtual environment and activate it

cd backend
python -m venv venv
# On Windows
.\venv\Scrips\activate
# On MacOS
source venv\bin\activate

• In your terminal, install the necessary packages

pip install "fastapi[all]" "motor[srv]"

• Generate the python packages in the requirements.txt file and install them

pip freeze > requirements.txt
pip install -r ./requirements.txt

• Create three Python files

  • models.py: This file defines the data models used in the application. They are Pydantic schemas used to define the structure, and validate data.

  • main.py: This is the entry point for this application.

  • database.py: This file handles the MongoDB connection and abstracts the database operation like insert, find, update and delete.

Define Book model and Implement CRUD routes

• models.py

from pydantic import BaseModel, Field
from typing import Optional
from bson import ObjectId

# Define the Book schema with the fields
class Book(BaseModel):
    id: str
    title: str
    author: str
    summary: str

    @staticmethod
    def from_doc(doc) -> "Book":
        return Book(
            id=str(doc["_id"]),
            title=doc["title"],
            author=doc["author"],
            summary=doc["summary"]
        )

class BookCreate(BaseModel):
    title: str
    author: str
    summary: str

class BookUpdate(BaseModel):
    title: Optional[str]
    author: Optional[str]
    summary: Optional[str]

• main.py

from contextlib import asynccontextmanager
from datetime import datetime
import os
from dotenv import load_dotenv
import sys
from fastapi.middleware.cors import CORSMiddleware
from bson import ObjectId
from fastapi import FastAPI, Request, status, HTTPException, Depends, Request
from motor.motor_asyncio import AsyncIOMotorClient
from pydantic import BaseModel
import uvicorn

from models import Book, BookCreate, BookUpdate
from database import BookDAL

load_dotenv()

COLLECTION_NAME= "book_lists"
MONGODB_URI= os.environ["MONGODB_URI"]
DEBUG= os.environ.get("DEBUG", "").strip().lower() in {"1", "true", "on", "yes" }

@asynccontextmanager
async def lifespan(app: FastAPI):
    client = AsyncIOMotorClient(MONGODB_URI)
    database = client.get_default_database()

    pong = await database.command("ping")
    if int(pong["ok"]) != 1:
        raise Exception("Cluster connection is not okay!")
    
    book_lists = database.get_collection(COLLECTION_NAME)
    app.book_dal = BookDAL(book_lists)

    yield
    client.close()

app = FastAPI(lifespan=lifespan, debug=DEBUG)

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

def get_dal(request: Request) -> BookDAL:
    return request.app.book_dal

@app.get("/")
def home():
    return {"message": "Welcome to the BookStore CRUD API"} 

@app.post("/books", response_model=Book)
async def create_book(book: BookCreate, dal: BookDAL = Depends(get_dal)):
    return await dal.create_book(book)

@app.get("/books", response_model=list[Book])
async def get_books(dal: BookDAL = Depends(get_dal)):
    return await dal.get_all_books()

@app.get("/books/{book_id}", response_model=Book)
async def get_book(book_id: str, dal: BookDAL = Depends(get_dal)):
    book = await dal.get_book_by_id(book_id)
    if not book:
        raise HTTPException(status_code=404, detail="Book not found")
    return book

@app.patch("/books/{book_id}", response_model=Book)
async def update_book(book_id: str, updates: BookUpdate, dal: BookDAL = Depends(get_dal)):
    book = await dal.update_book(book_id, updates)
    if not book:
        raise HTTPException(status_code=404, detail="Book not found or no updates applied")
    return book

@app.delete("/books/{book_id}")
async def delete_book(book_id: str, dal: BookDAL = Depends(get_dal)):
    success = await dal.delete_book(book_id)
    if not success:
        raise HTTPException(status_code=404, detail="Book not found")
    return {"message": "Book deleted successfully"}

Connect to MongoDB

• Create a .env file and add your MongoDB connection string

MONGODB_URI='mongodb+srv://<db_username>:<db_password>@cluster0.kzk0k.mongodb.net/<db_name>?retryWrites=true&w=majority&appName=Cluste

• Use Motor (async MongoDB driver for Python) in the database.py file

from bson import ObjectId
from motor.motor_asyncio import AsyncIOMotorCollection
from pymongo import ReturnDocument
from uuid import uuid4

from models import Book, BookCreate, BookUpdate

class BookDAL:
    def __init__(self, collection: AsyncIOMotorCollection):
        self.collection = collection

    async def create_book(self, book_data: BookCreate):
        result = await self.collection.insert_one(book_data.dict())
        doc = await self.collection.find_one({"_id": result.inserted_id})
        return Book.from_doc(doc)

    async def get_all_books(self):
        books = []
        async for doc in self.collection.find():
            books.append(Book.from_doc(doc))
        return books

    async def get_book_by_id(self, book_id: str):
        doc = await self.collection.find_one({"_id": ObjectId(book_id)})
        return Book.from_doc(doc) if doc else None

    async def update_book(self, book_id: str, update_data: BookUpdate):
        update_dict = {k: v for k, v in update_data.dict().items() if v is not None}
        result = await self.collection.find_one_and_update(
            {"_id": ObjectId(book_id)},
            {"$set": update_dict},
            return_document=ReturnDocument.AFTER
        )
        return Book.from_doc(result) if result else None

    async def delete_book(self, book_id: str):
        result = await self.collection.delete_one({"_id": ObjectId(book_id)})
        return result.deleted_count == 1

3.5. Run and test the API with Swagger UI

uvicorn main:app --reload

Creating the Frontend with React

Set up React project with TailwindCSS

• Using Vite

cd frontend
npm create vite@latest . – –template react
npm install
npm run dev

• Install Axios

Axios is a popular interface for making common requests like GET, POST, PUT, PATCH, DELETE and more. Axios allows us to handle HTTP requests asynchronously and cleanly. Axios has straightforward syntax and is ease to use in JavaScript projects.

cd frontend
npm install axios

Build the Bookstore CRUD App

• In the src folder create a components folder and create two .jsx files:

  • BookForm.jsx

// Import all dependecies
import { useState, useEffect } from "react";
import axios from "axios";

// Define the API URL
const API_URL = "http://localhost:8000/books";

export default function BookForm({ onBookAdded,  editingBook, onCancelEdit  }) {
  // Define and set state
  const [book, setBook] = useState({
    title: "",
    author: "",
    summary: "",
  });
	// Updates the form fields
  useEffect(() => {
    if (editingBook) {
      setBook({
        title: editingBook.title,
        author: editingBook.author,
        summary: editingBook.summary,
      });
    } else {
        setBook({
            title: "",
            author: "",
            summary: "",
        })
    }
  }, [editingBook]); 
	// Handles changes as user inputs book details
  const handleChange = (e) => {
    setBook({ ...book, [e.target.name]: e.target.value });
  };
	// Handles form submission
  const handleSubmit = async (e) => {
    // creates a payload from the current book state
    const payload = {
      ...book,
    };
		// Sends a PATCH request if true,
		// Else send a POST request to create new book
    if (editingBook) {
      await axios.patch(`${API_URL}/${editingBook.id}`, payload);
      onCancelEdit();
    } else {
      await axios.post(API_URL, payload);
    }
    // After submission, reloads the book list
    onBookAdded();
    // Clears form input
    setBook({ title: "", author: "", summary: "" });
  };

  return (
    <form onSubmit={handleSubmit} 
    className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      {["title", "author", "summary"].map((field) => (
        <div className="mb-4" key={field}>
            <label className="block text-gray-700 text-sm font-bold mb-2 capitalize" htmlFor={field}>
            {field}
            </label>
            <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline placeholder-gray-400"
            key={field}
            name={field}
            placeholder={field}
            value={book[field]}
            onChange={handleChange}
            required
            />
        </div>
      ))}
      <div className="flex items-center justify-between">
      <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit"
        >
          {editingBook ? "Update Book" : "Add Book"}
        </button>
        {editingBook && (
          <button
            type="button"
            onClick={onCancelEdit}
            className="ml-4 bg-gray-400 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          >
            Cancel
          </button>
        )}
      </div>
    </form>
  );
}

• BookList.jsx

// Import all dependecies
import { useEffect, useState } from "react";
import axios from "axios";
// import BookForm component
import BookForm from "./BookForm"
// Define the API URL
const API_URL = "http://localhost:8000/books";

export default function BookList() {

// Define and set state
  const [books, setBooks] = useState([]);
  
// Get books from database
  const loadBooks = async () => {
    const res = await axios.get(API_URL);
    setBooks(res.data);
  };
// Deletes a book
  const handleDelete = async (id) => {
    await axios.delete(`${API_URL}/${id}`);
    loadBooks();
  };
  
// Load all books when component is first mounted
  useEffect(() => {
    loadBooks();
  }, []);

  return (
    <div className="max-w-3xl mx-auto p-4">
      <h2 className="text-2xl font-bold mb-4 text-center">Bookstore CRUD App</h2>
      <BookForm onBookAdded={loadBooks} />
      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <h3 className="text-xl font-semibold mb-4">Books</h3>
        {books.length === 0 ? (
          <p className="text-gray-600">No books available.</p>
        ) : (
            <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Summary</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {books.map((book) => (
                  <tr key={book.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{book.title}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{book.author}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{book.summary}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <button
                        onClick={() => handleDelete(book.id)}
                        className="text-red-500 hover:text-red-700"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}

• App.jsx

import BookList from "./components/BookList";
import "./App.css"

// Render the app
function App() {
  return (
    <div className="min-h-screen bg-gray-100 py-10 font-serif">
      <div>
        <BookList />
      </div>
    </div>
  );
}

export default App;

Run the Application

• Start the Backend server first

uvicorn main:app --reload

• Start the Frontend Application

npm run dev

Conclusion

Well-done! You have a simple Bookstore CRUD app built with the FARM stack. You can add additional features like authentication, pagination and search features. Feel free tp copy the code or clone the Github repository. If you found this guide helpful, please consider sharing and connecting with me.

Learning Resources

• GitHub repo link: https://github.com/Nkwor-Jane/bookstore_CRUD_app

• React Docs

• Vite Docs

• TailwindCSS Docs

• MongoDB Docs

• FastAPI Docs