FARM Stack Course – Full Stack Development with FastAPI, React MongoDB

Introduction

This tutorial will guide you through full stack development using the FARM stack, which consists of FastAPI, React, and MongoDB. By the end of this tutorial, you'll be able to create a simple Todo application, leveraging modern technologies for both backend and frontend development.

Step 1: Understand the FARM Stack

• The FARM stack is composed of:
  • FastAPI for building APIs quickly and efficiently.
  • React for creating dynamic user interfaces.
  • MongoDB for a NoSQL database solution.
• Advantages of the FARM stack include:
  • High performance and scalability.
  • Easy integration between components.
  • Flexibility in handling data.

Step 2: Set Up Your Development Environment

• Install the necessary tools:
  • Python for FastAPI.
  • Node.js for React.
  • Docker for containerization.
• Sign up for MongoDB Atlas to create a cloud database.
  • Visit MongoDB Atlas to register.

Step 3: Create a FastAPI Backend

• Begin by setting up a new FastAPI project:
  • Create a virtual environment and install FastAPI and uvicorn.

    pip install fastapi uvicorn
    

• Define your API endpoints in a new Python file, e.g., main.py.
  • Example code to create a simple endpoint:

    from fastapi import FastAPI
    
    app = FastAPI()
    
    @app.get("/")
    def read_root():
        return {"Hello": "World"}
    

• Run your FastAPI application:

  uvicorn main:app --reload
  

Step 4: Set Up MongoDB

• Create a new database in MongoDB Atlas.
• Use the MongoDB driver for Python, motor, to interact with your database.
  • Install motor:

    pip install motor
    

• Connect to your MongoDB instance in your FastAPI application:

  from motor.motor_asyncio import AsyncIOMotorClient
  
  client = AsyncIOMotorClient("your_mongo_connection_string")
  db = client.your_database_name
  

Step 5: Integrate Docker

• Create a Dockerfile for your FastAPI application:

  FROM python:3.9
  WORKDIR /app
  COPY ./requirements.txt ./
  RUN pip install --no-cache-dir -r requirements.txt
  COPY . .
  CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "80"]
  

• Use Docker Compose to manage your application stack:
  • Create a docker-compose.yml file:

    version: '3'
    services:
      web:
        build: .
        ports:
          - "80:80"
      mongo:
        image: mongo
        ports:
          - "27017:27017"
    

Step 6: Develop the Frontend with React

• Create a new React application using Create React App:

  npx create-react-app todo-app
  

• Set up Axios to handle API requests:

  npm install axios
  

• Create a simple Todo component that interacts with the FastAPI backend:

  import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  
  const TodoApp = () => {
      const [todos, setTodos] = useState([]);
  
      useEffect(() => {
          const fetchTodos = async () => {
              const response = await axios.get('http://localhost:80/');
              setTodos(response.data);
          };
          fetchTodos();
      }, []);
  
      return (
          <div>
              <h1>Todo List</h1>
              <ul>
                  {todos.map(todo => (
                      <li key={todo.id}>{todo.task}</li>
                  ))}
              </ul>
          </div>
      );
  };
  
  export default TodoApp;
  

Step 7: Testing the Application

• Ensure both your backend and frontend are running:
  • Start your FastAPI application using Docker.
  • Run your React application:

    npm start
    

• Open your browser and navigate to http://localhost:3000 to view your Todo application.

Conclusion

In this tutorial, you learned how to set up a full stack application using the FARM stack. You created a FastAPI backend, connected it to a MongoDB database, and developed a React frontend. As a next step, consider exploring additional features such as user authentication or deploying your application to a cloud service. Happy coding!