Introducing FARM Stack - FastAPI, React, and MongoDB

1
git clone git@github.com:mongodb-developer/FARM-Intro.git

1
cd FARM-Intro/backend
2
pip install -r requirements.txt

1
export DEBUG_MODE=True
2
export DB_URL="mongodb+srv://<username>:<password>@<url>/<db>?retryWrites=true&w=majority"
3
export DB_NAME="farmstack"

1
app = FastAPI()

1
app.include_router(todo_router, tags=["tasks"], prefix="/task")

1
if __name__ == "__main__":
2
    uvicorn.run(
3
        "main:app",
4
        host=settings.HOST,
5
        reload=settings.DEBUG_MODE,
6
        port=settings.PORT,
7
    )

1
@app.on_event("startup")
2
async def startup_db_client():
3
    app.mongodb_client = AsyncIOMotorClient(settings.DB_URL)
4
    app.mongodb = app.mongodb_client[settings.DB_NAME]
5
6
7
@app.on_event("shutdown")
8
async def shutdown_db_client():
9
    app.mongodb_client.close()

1
class TaskModel(BaseModel):
2
    id: str = Field(default_factory=uuid.uuid4, alias="_id")
3
    name: str = Field(...)
4
    completed: bool = False
5
6
    class Config:
7
        allow_population_by_field_name = True
8
        schema_extra = {
9
            "example": {
10
                "id": "00010203-0405-0607-0809-0a0b0c0d0e0f",
11
                "name": "My important task",
12
                "completed": True,
13
            }
14
        }

1
class UpdateTaskModel(BaseModel):
2
    name: Optional[str]
3
    completed: Optional[bool]
4
5
    class Config:
6
        schema_extra = {
7
            "example": {
8
                "name": "My important task",
9
                "completed": True,
10
            }
11
        }

1
@router.post("/", response_description="Add new task")
2
async def create_task(request: Request, task: TaskModel = Body(...)):
3
    task = jsonable_encoder(task)
4
    new_task = await request.app.mongodb["tasks"].insert_one(task)
5
    created_task = await request.app.mongodb["tasks"].find_one(
6
        {"_id": new_task.inserted_id}
7
    )
8
9
    return JSONResponse(status_code=status.HTTP_201_CREATED, content=created_task)

1
@router.get("/", response_description="List all tasks")
2
async def list_tasks(request: Request):
3
    tasks = []
4
    for doc in await request.app.mongodb["tasks"].find().to_list(length=100):
5
        tasks.append(doc)
6
    return tasks

1
@router.get("/{id}", response_description="Get a single task")
2
async def show_task(id: str, request: Request):
3
    if (task := await request.app.mongodb["tasks"].find_one({"_id": id})) is not None:
4
        return task
5
6
    raise HTTPException(status_code=404, detail=f"Task {id} not found")

1
@router.put("/{id}", response_description="Update a task")
2
async def update_task(id: str, request: Request, task: UpdateTaskModel = Body(...)):
3
    task = {k: v for k, v in task.dict().items() if v is not None}
4
5
    if len(task) >= 1:
6
        update_result = await request.app.mongodb["tasks"].update_one(
7
            {"_id": id}, {"$set": task}
8
        )
9
10
        if update_result.modified_count == 1:
11
            if (
12
                updated_task := await request.app.mongodb["tasks"].find_one({"_id": id})
13
            ) is not None:
14
                return updated_task
15
16
    if (
17
        existing_task := await request.app.mongodb["tasks"].find_one({"_id": id})
18
    ) is not None:
19
        return existing_task
20
21
    raise HTTPException(status_code=404, detail=f"Task {id} not found")

1
@router.delete("/{id}", response_description="Delete Task")
2
async def delete_task(id: str, request: Request):
3
    delete_result = await request.app.mongodb["tasks"].delete_one({"_id": id})
4
5
    if delete_result.deleted_count == 1:
6
        return JSONResponse(status_code=status.HTTP_204_NO_CONTENT)
7
8
    raise HTTPException(status_code=404, detail=f"Task {id} not found")

1
npm install
2
npm start

1
useEffect(() => {
2
    const fetchAllTasks = async () => {
3
        const response = await fetch("/task/")
4
        const fetchedTasks = await response.json()
5
        setTasks(fetchedTasks)
6
    }
7
8
    const interval = setInterval(fetchAllTasks, 1000)
9
10
    return () => {
11
        clearInterval(interval)
12
    }
13
}, [])

1
useEffect(() => {
2
    const timelineItems = tasks.reverse().map((task) => {
3
        return task.completed ? (
4
            <Timeline.Item
5
                dot={<CheckCircleOutlined />}
6
                color="green"
7
                style={{ textDecoration: "line-through", color: "green" }}
8
            >
9
                {task.name} <small>({task._id})</small>
10
            </Timeline.Item>
11
        ) : (
12
            <Timeline.Item
13
                dot={<MinusCircleOutlined />}
14
                color="blue"
15
                style={{ textDecoration: "initial" }}
16
            >
17
                {task.name} <small>({task._id})</small>
18
            </Timeline.Item>
19
        )
20
    })
21
22
    setTimeline(timelineItems)
23
}, [tasks])

1
<>
2
    <Row style={{ marginTop: 50 }}>
3
        <Col span={14} offset={5}>
4
            <Timeline mode="alternate">{timeline}</Timeline>
5
        </Col>
6
    </Row>
7
</>