Farm Stack

THIS IS A DRAFT

This text may not be complete.

title

FARM Stack Course

author

Lukasz Sokolowski

FARM Stack Course

FARM Stack Training Materials

Copyright Notice

Copyright © 2004-2026 by NobleProg Limited All rights reserved.

This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise.

Overview

• What is FARM stack?
• FARM vs MERN

FARM acronym

• FAstAPI - FastAPI
• React - React
• MongoDB - MongoDB

FastAPI Intro

• Fast and fast to code
  • Very high performance (like NodeJS or Go)
• Fewer bugs and intuitive
  • Reduce of human errors, great editor support (completion, less debugging)
• Easy and short
  • easy to use and learn (less docs),
  • plenty features from each parameter, etc
• Robust and standards-based:
  • production-ready code, automatic interactive docs
  • OpenAPI (aka Swagger), JSON Schema, etc

Our Course Plan

In overall

1. DAY1 - FARM intro, JS, TS, React.js
   • js_mats (bits only) - Typescript
   • dev envi(FE)
   • react part (hands-on) - React Basics
2. DAY2 - MongoDB, FastAPI, connecting with FE (react)
   • dev envi(BE)
   • db - cli, queries, functions - MongoDB part
   • FastAPI - crud, deploying, securing, testing

Additional Exerc, React

Collapsed by default, some additional exercs below

Part 1
 Install Axios and Bootstrap.
 Create the TypeScript models.
 Create citizenService.ts.
 Configure Axios.
 Verify the React application can communicate with the FastAPI backend.

Part 2
 Refactor App.tsx.
 Use useEffect().
 Fetch citizens asynchronously.
 Display a loading spinner and handle errors.

Part 3
 Build a reusable Bootstrap CitizenForm component.
 Add a proper <form onSubmit={...}>.
 Implement the Create operation.

Part 4
 Build a reusable Bootstrap CitizenTable component.
 Display all citizens.
 Add Delete functionality.

Part 5
 Implement Edit and Update.
 Populate the form with the selected citizen.
 Switch between Create and Update modes.

Part 6
 Refactor into a production-ready application.
 Add custom hooks.
 Improve error handling.
 Add Bootstrap alerts and spinners.
 Improve component organization.
 Final cleanup and best practices.

Exerc, FastAPI part

Collapsed by default, some additional exercs below

1. Technology Stack

FastAPI (latest stable)
Python 3.13+
MongoDB
Motor (official async MongoDB driver)
Pydantic v2
Uvicorn
Python typing
Async/await throughout the application

2. Envi setup

python3 --version
# sudo apt update ; sudo apt install python3 python3-pip python3-venv
# todo
mongosh
# sudo apt install mongodb -y ; sudo systemctl enable mongod ; sudo systemctl status mongod ; sudo systemctl start mongod

3. Inside the project root folder (follow the Trainer's instrs about sources)

python3 -m venv .venv             # making virtual environment in python
source .venv/bin/activate         # activating it 
pip install -r requirements.txt   # installing dependencies
cp .env.example .env              # Create the '.env' file, i.e. local db config
uvicorn app.main:app --reload     # Run FastAPI

4. Automatically generated 'RestAPI' docs in the browser

http://localhost:8000/docs        # Open 'Swagger UI' docs
http://localhost:8000/redoc       # Alternative docs (redocly)

6. Backend exerc - 'git switch trainee' and become Sherlock (-,

7. Frontend final exerc - 'git switch trainee' and become Sherlock, again (-'