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

welcome to this course on the farm stack and fast API I'm Bo KS and I'll be teaching this course the farm stack is a modern web development stack that combines four powerful Technologies fast API react and mongodb this full stack solution provides developers with a robust set of tools to build scalable efficient and high performance web applications in this course I'll be giving you an introduction to each of the key Technologies and then we'll build a project using the farm stack and Docker so you can see how everything works together feel free to skip ahead

to any section you are most interested in the farm and farm stack stands for fast API the back end react the front end mongodb the database the farm stack is designed to leverage the strengths of each component allowing developers to create feature-rich applications with a smooth development experience now I'll give you an overview of the components in the farm stack fast API is a modern high performance python web framework for building apis it's designed to be easy to use fast to code and ready for production environments fast API is built on top of Starlet for

the web parts and pantic for the data Parts making it a powerful choice for building robust backend Services react is a popular JavaScript library for building user interfaces react allows developers to create reusable UI components that efficiently update and render as data changes its component-based architecture and virtual Dom make it an excellent choice for building Dynamic and responsive front-end applications mongodb is a document oriented nosql database it stores data in flexible Json like documents meaning Fields can vary from document to document and data structure can be changed over time and also the mongodb company provided

a grant to make this course possible let's discuss some of the advantages of using the farm stack first high performance fast API is one of the fastest python Frameworks available while react's virtual Dom ensures efficient UI updates mongodb's document model allows for quick reads and writs scalability all components of the farm stack are designed to scale fast API can handle concurrent requests efficiently react applications can manage complex uis and bangb can distribute data across multiple servers then there's the community and ecosystem all three technologies have large active communities and Rich ecosystems of libraries and tools

flexibility the farm stack is flexible enough to accommodate various types of web applications from simple crud apps to complex data data intensive systems so by combining these Technologies the farm stack provides a comprehensive solution for building modern web applications this stack is particularly well suited for applications that require real-time updates complex data models and high performance as we progress through the tutorial you'll gain a hands-on experience with each component of the farm stack and learn how to integrate the effectively before we combine the Technologies together let's talk about each individually a little more I'm going

to show you how to set up a super simple API using fast API so you have a better understanding of how it works later we'll create a full to-do application using the farm stack and we'll be using fast API to create a robust backend API we'll Define routes for creating reading updating and deleting to-do items and lists we'll use pantic models to ensure data consistency and fast apis automatic documentation to make our API easy to understand and use so let's build a super simple fast API project so you can understand the basics of fast API

this won't use any of the other elements of the farm stack but once you see this you'll have a better understanding for the context when we build our full Farm stack app application so again this is just a super simple fast API project and the code comes from the official documentation and this is what they recommend as your first project so first we're going to install by pip install and then we're going to put fast API standard and we want to put quotation marks depending your on your terminal the quotation marks may not be required

but sometimes they are depending on how you have your terminal set up and it always works so then you can make sure if you put the quotation marks around it it will always work uh you could also do fast API all inside the brackets if you want all the features instead of just the standard features so once we have that done we can create our file which is just we're just doing a simple file we're just going to call this main.py so first we import the union type from Python's typing module Union is used to

specify that a variable can be of multiple types in this case allows a variable to be either a string or none and then we obviously need fast API and then we create an instance of our fast API that will be used to define the API endpoints and their behavior then we have this section that defines our route for the HTTP git method at the root URL and it's just going to return a Json response with the content hello world when the route URL is accessed and this code here is going to be a different inpoint

which is going to be SL items and then it's going to have a query parameter which this query parameter the item id has to be an integer so it could be like item SL1 or slash2 this read item function is going to get the item ID and then this where says Q here that is an optional query parameter that can be a string or none it defaults to none if it's not provided in the request and then we're just going to return a Json response containing the item ID and the value of the query parameter

Q so this basically demonstrates the use of path parameters and optional query parameters and that's all we're going to do for our server we can actually just run that server in our terminal we're going to run our fast API application with uvicorn with a UV corn server so let's install that pip install UV corn okay now we can do uvicorn main that's the main.py and then I'm going to do main app and then I'll do reload and the app corresponds to the app in our file here let me just make sure that's saved okay so

now I'm going to go to this URL and we can see it says hello world now I'll go to the other inpoint so I'll do slash items slash6 and then I can put a query parameter because that got set up and the Q equals yo and then let's see what happens okay so we have the item id six the query is yo so we got that server set up both paths take the git operation but we could set it up to be post or put or delete or any of the other operations but now let

me show you about the interactive API docs it's something really cool in fast API so I'm just going to go to slash docs and then we see this API doc set created automatically so we have our root path that's going to show information about the response and the root path and then we have the SL item item id we can see it's going to take an item ID and a query an optional uh query parameter so this is pretty cool that going to create all this for us and then we can even see the full

schemas for our API this is all provided by Swagger UI so there's different ways to view docs so this like I said this is the Swagger UI but if we go to slash redock we'll see the documentation provided by redock it's just a different way to show the documentation for API including both the root and then the item with the item ID in the query parameter so let's now do a little upgrade to our application we're going to modify this to receive a body from a put request so first I'm going to make sure I

also import pantic or from Panic I'm going to import base model and we'll declare the body using standard python types thanks to pantic so first we'll create a class item that's going to have the name which is a string a price a flute and is offer which is going to be a boole but it can also be none and then so we have the get request for an item now we're doing the put request for an item with the item ID so this is going to allow us to update an item with that ID and

then put in the item information and it's going to return the item name and the item id here so if I save this it's going to update automatically I can go right back over here I'm going to go to docs and then you can now now see this put request here and it's going to have information about what we're putting for the put request Item ID and the request body we have the example schema with the string the price and the is offer so we're going to actually go to the top here where it says

try it out and so I'm going to put item id1 and I can update this offer or item unicycle price 100 is offer true then I can just click the execute button execute and so that's it sent the parameters and now we can get the results and see the results on screen so we have this curl the request URL and our response here's our response body our response headers and successful response so basically we declare once the types of parameters body Etc as function parameters we do that with standard modern python types and we don't

have to learn any new syntax or methods or classes of a specific Library it's a standard python so we'll go be going into even a more complex example when we build build our to-do application fast API is combination of speed ease of use and Power ful features make it an excellent choice for building the backend of our farm stack application as we progress through the tutorial you'll see firsthand how fast API simplifies the process of building a robust high performance API next we'll cover the basics of react react is a popular JavaScript library for building

user interfaces particularly single page applications where you need a fast interactive user experience here's some key features of react it has a component-based architecture react encourages the development of reusable UI components which manage their own State and can be composed to build complex uis virtual Dom react uses a virtual Dom to improve performance when the state of an object changes react updates the virtual Dom first then it efficiently updates the real Dom to match toar cative UI react makes it easy to design interactive uis you design simple views for each state in your application and

react will update and render just the right components when your data changes jsx react uses jsx which is a syntax extension that allows you to write HTML directly within JavaScript this makes the code easier to understand and debug to start using react you need to have node.js and mpm uh node package manager installed on your machine machine you can create a new application with the following command we have MPX create react app my app note that it's also very common to create a react app with nextjs which instead of doing create react app you would

do create next app so that's a very popular way to create a react app but for now we'll just do uh use this create react app and this is going to create a new directory called my app with all the necessary files and dependencies so now in the terminal we can change directory into my app and then if I just do mpm start it will start the development server and automatically open the default web browser to display the react application so here it is here's the react welcome page so let's just do a very quick

review of this uh project structure now this is not a react tutorial so this is going to be pretty brief here we have the public tutorial where it's going to contain static assets like the index HTML which is the main entry point for the application and then we have the SRC folder which is where you'll write most of your react code so like index.js is the JavaScript entry point that renders your react application into the root element in the public. HTML file here so we can see this uh root element and that's where the JavaScript

is going to uh send all your react application basically additionally we have the appjs which is the root component of the react application so the index.js is going to send our appjs to the index.html to make sure our web page shows correctly so now let's create a basic react component just so you can have a very um brief overview of react component so inside the SRC folder I'm going to create a welcome. JS and then we'll just put this code here this just defines a functional component called welcome that takes a props object as input

and returns a jsx element which is basically like uh HTML within a Javascript file and this displays a personalized greeting so now let's see how to use this component that we just created so I'm going to go to the app.js and I'm just going to delete everything that's already in there so we can do something a little simpler uh we're going to import react then we import the component that we just created now it's just going to return this and see this is how we access a component and it's going to use the welcome component

to render different names three different names so let me just save that and we can see it says hello Alice hello Bob hello Charlie so we just put in the welcome component hello and then the name three different times so just really quick I want to talk about State and life cycle I'm going to do one more example this will be called clock. JS and react components can also manage their own state so this is an example of a class component to demonstrate the state and life cycle methods so we have the class clock extend

component and we have the Constructor where we're going to get the date that which is we use for the clock and then we have the component did Mount component will unmount these are basically functions that get called at different parts of the life cycle and then we have a custom function tick that will be calling um here this. tick to tick the clock forward so basically the clock component sets up a timer when it is mounted and clears it when it's unmounted unmounted and the tick method updates the component state every second causing the component

to render with each new time and then it just gives the HTML or the jsx that's going to appear on the page react is a powerful library for building Dynamic and interactive user interfaces it's component based architecture efficient rendering with the virtual Dom and declarative nature make it a popular choice among developers as you become more familiar with react you can explore more advanced topics like hooks context and performance optimization next we'll learn more about mongodb mongodb is a popular nosequel database designed to handle large volumes of data and provide high performance scalability and flexibility

unlike traditional relational databases mongodb stores data in flexible Json like documents this document oriented approach allows for the storage of complex data structures in a more natural and intuitive way in mongodb data is stored in collections which are similar to tables in relational databases but without a fixed schema this means you can have documents with different structures in the same collection this flexibility is one of the key advantages of using mongod to be especially when dealing with unstructured or semi-structured data let's take a look at an example of a mongodb document imagine we have a

collection called users that stores information about users in an application here's what a typical document might look like in this document we have various Fields such as name email age and address the address field itself is an embedded document containing multiple subfield Fields like Street city state and zip Additionally the Hobbies field is an array of strings while this looks like Json mongodb stores data in a binary format called bon or binary Json Bon extends the Json model to provide additional data types such as integers floats dates and binary data this binary format is optimized

for performance and flexibility allowing mongodb to efficiently store and retrieve data another important feature of B is its ability to scale horizontally this means you can distribute your data across multiple servers making it easier to manage large data sets and Ensure High availability MDB also supports Rich queries indexing and aggregation making it a powerful tool for a wide range of applications for example you can perform a query to find all users who live in a specific city mongodb is widely used in various industries from e-commerce and content management ment to realtime analytics and Internet of

Things applications its flexibility and scalability make it an excellent choice for modern applications that need to handle diverse and dynamic data Docker is not technically part of the farm stack but it can make running a farm stack application simpler so in this section I'll teach the basics of Docker and containerization in essence docker is a platform that allows you to package your applications and all their dependencies into neat little containers think of these containers as self-sufficient boxes containing everything your application needs to run smoothly regardless of the environment Docker offers a bunch of benefits for

developers and anyone who works with software a first consistency you can say goodbye to the dreaded it works on my machine problem Docker ensures your application runs the same way everywhere from your laptop to a Cloud Server isolation each application runs its own isolated container preventing conflicts and dependencies issues this means you can run multiple applications on the same server without them interfering with each other efficiency Docker containers are lightweight and share the host operating systems kernel making them incredibly resource efficient compared to additional virtual machines scalability need to handle more users no problem Docker

makes it easy to scale your application by spinning up more containers and here are a few key Docker Concepts we have the docker image which is a readon template that contains instructions for creating a Docker container it's like a blueprint for your application then we have the docker container a running instance of a Docker image you can start stop and manage containers independently and Docker Hub which is a public registry where you can find and share Docker images think of it as the GitHub for Docker images Docker compose is a tool for defining and running

multi-container Docker applications we'll be using it in our to-do application here are some elements of Docker compose the yaml file it uses a yaml file to configure application Services single command it allows starting all services with a single command environment management it can manage multiple environments for your application and network creation it automatically creates a network for your applications containers in our farm stack to-do application we'll be using Docker to containerize our fast API backend react front end and mongodb database this will allow us to ensure consistency across development testing and production environments and also

easily manage dependencies for each part of our application plus it will allow us to simplify the process of running and testing our full stack application and we'll be able to prepare application for easy deployment and scaling we'll use a Docker file to define the environment for our fast API backend and we'll use Docker compos to orchestrate our entire application including the react front end and mongodb database now I'll talk more about the to-do project will create and how the elements of the farm stack fit into the project our farm stack to-do application will include the

following features multiple to-do lists users can create view update and delete multiple to-do lists each list has a name and contains multiple to-do items and then the to-do items within each list users can add view update and delete to-do items each item has a label a checked unchecked status and belongs to a specific list real-time updates the UI updates in real time when changes are made to lists or items responsive design the application will be responsive and work well on both desktop and mobile devices our mongod Tob data model will consist of two main structures

the to-do list and here's what that structure will look like and also the list summary for displaying in the list of all the to-do lists and here's what that structure will look like our fast API backend will expose the following restful endpoints so for the to-do list here are the in points and for the to-do items here are the end points this project will provide a solid foundation in farm stack development and Docker containerization which you can then expand upon for more complex applications in the future so let's get started with the project so let's

start with setting up everything for the project we'll set up the project structure first we'll create a new directory for the project uh Farm too and switch to the directory then we'll create subdirectories for the backend and front-end section next we'll set up the backend environment so we'll go to the backend directory and we'll create a virtual environment and then activate it then we'll create the files the docker file and P project. tol which I'll be explaining more in a moment and then we're going to install the required packages so fast API this is what

we already talked about we'll be install we're installing it with the all extra which includes additional dependencies like UV corn for serving our app application and then motor is an asynchronous mongodb driver for python we're using the SRV extra which adds support for mongodb's SRV connection settings connection strings and then beanie is an object document mapper for mongodb built on top of motor it's going to allow us to Define our data models as python classes and provides an intuitive API for database operations and finally uh AI stream or AO stream this package provides tools for

working with asynchronous streams which can be useful when dealing with large data sets or realtime data now that we got those installed we can generate the requirements.txt file and uh we've already installed the dependencies but if we still needed to do that if you're trying to set up this project on a different computer you can install the dependencies using pip install - R requirements.txt okay now let's go into our Docker file and we'll add the following content so a Docker file is a text document that contains all the commands a user could call on the

command line to assemble an image it's essentially a blue print for creating a Docker container so let's look at this Docker file we have from Python 3 that just specifies the base image we're using in this case we're starting with an official Python 3 image it gives us a preconfigured environment with python installed then we have the worker user srca which sets the working directory inside our container and then copy requirements.txt uh this copies our requirements. txt file from our local machine to the current directory and the container which lists all our python dependencies then

we have the Run pip install and then that whole line there uh this command installs all the python packages listed in our requirements.txt file and the exposed 3001 informs Docker that our container will list on Port 3001 at runtime then we have the command CMT Python and the SRC server.py this is the command that will be executed when our container starts it runs our server.py file located in the SRC directory with this Docker file we're creating a reproducible environment for our application anyone with Docker install can use this file to build an identical container ensuring

consistency across different development and deployment environments which makes me remember that if you don't have Docker installed you're going to have to install Docker on your computer to follow along with the rest of this tutorial and you you can just kind of search up another like text Bas tutorial just search install Docker and then figure out how to install Docker on your computer the P project. file is a newer standard in the python ecosystem which is introduced in pep 58 is designed to be a centralized configuration file for python projects which replaces many tool specific

files like set to Pi and then others like that so this can contain configuration settings for various tools used in Python development so in this specific one this tool. pest. options uh indicates that we're configuring pie test options so in this course actually the testing is beyond the scope of what we're going to do but this is just kind of setting it up for later if we wanted to introduce tests into our projects and the python path equals SRC is just telling py test to add the SRC directory to the python path when running tests

again this is just setting up for if you want to add test yourself later and it's just kind of best practice to have this in there okay speaking of the SRC file let's uh set up the backend structure by creating an SRC directory inside the backend directory and then we're going to create two files server.py and D.P d stands for the data access layer the D file is responsible for handling all interactions between application and the database and it abstracts the complexities of database operations from the rest of the application so let's create Dow that

P I'm just going to paste in some code here so like I said this is going to handle the interactions with the mang database so we're first going to import some stuff we have uh the Bon to handle mongodb's object ID which is going to handle mongodb's object ID I talked about Moto asynchronous mongodb driver and then we have the P for specifi return behavior and update operations the pantic dobas model is going to create data models with validation and then The UU ID is going to generate unique IDs now we're going to have a

few different data models so we're going to have the list summary which represents a summary of the to-do list the to-do list item which is an individual to-do list item and a to-do list which is a complete to-do list with items so each is going to have a from Doc static method to create instances from mongodb documents the to-do D class encapsulates all database operations so you see we have a list to-do lists and it's just going to and this code will asynchronously yield summaries of all to-do lists from the mongodb database we have the

create to-do list which is going to create a new to-do list and return its ID and you can see all this code just uses standard uh what you would use when you're working with mongodb and then we have the get to-do lists retries a specific to-do list um delete pretty self-exam delet the to-do list item then we have the create item which go is going to add a specific to-do list and then the set check state will update the check state of a specific item um it's going to have to find the item and then

it will update it and all this should look familiar if you're at all familiar with mongodb but if not this cell works and then finally we have the delete item to delete an item uh some key points about this file is that all methods are asynchronous using the async await Syntax for non-blocking database operations and there's also extensive use of type hints for better code clarity and IDE support and this you'll you would notice that it uses various MB operations like find insert one find one find one and update there's also a data transformation which

converts between mongodb documents and pantic models for type safety and validation and all methods accept an optional session parameter for transaction support and then most methods return none if the operation fails or the document is not found so this di file provides a clean typesafe interface for the rest of the application to interact with the database abstracting away the details of mang operations and document structure now let's implement the fast API server so we'll go into server.py file I'll paste in this code um we're going to have these various Imports up top for fast API

Mong B and custom modules and a lot of these are some of these are similar to what we saw in the other file uh we're also going to configure variables for the Mong be connection and debug mode you'll see that we're using the O the environment variable Mong be Ur that's going to be the mongodb connection string which will create an environment a EMV file with that connection string later and I'll show you how to get that so we start off with this async context manager this and defining LIF span function this function manage the

LI manages the life cycle of the fast API application we see this what happens on Startup which is going to connect to the mongodb and initializes the 2o D it's going to ensure that the database is available and get the the actual The Collection the to-do list collection and then on shutdown it's going to just close the mongodb connection then we have the app equal the fast app equals fast API with the lifespan the debug this is going to create the fast API application with the lifespan manager that we had just defined next we get

to the I guess the core of this which is the API endpoints so we're going to the the get request to API lists is going to retrieve all the to-do lists then we have a post request to apil lists which is going to create a new to-do list and we're just going to pass in a name for this one which is just the name of the to-do list then the get API listlist ID is going to retrieve a specific to-do list then when we if we make a delete request we can delete a list and

then if we post to API listlist id/ items we can add a new item to to a to-do list and we're just going to pass in the item name or we can delete an item and we can also set a check State whether if you're going to check the that uh an item is checked we also just have a dummy inpoint for testing um we're not going to really use this but we're just going to put in there for future testing now throughout this we've been seeing these pantic models like new list new list response

new item new item response to-do item update dummy response these models Define the structure of request and response data for various in points and then we have at the bottom we have our main function uh this function runs the fast API application using UV corn when the script is executed directly so some of the fast API features that are demonstrated in this file is async support all inpoint handlers are asynchronous allowing for non-blocking Io application operations we also have typ hinting for request and response models which improves the code Clarity and enables automatic request validation

and response serialization we also have the path parameters with the endpoints like the API list list ID to capture the dynamic parts of the URL we have the request body parsing where fast API automatically parses Json request bodies into pantic models like the new list and new item we also have the response models which are the in points that specify return types which fast API uses for response validation and open AI documentation then HTTP status codes which are the custom status codes that are set for certain endpoints like we saw the status. HTTP 2011 created

for post requests and then dependency injection the to doal instance is injected into the app and used across the different endpoints finally we have the Swagger integration fast API automatically creates Swagger documentation for this API okay we got that out of the way now let's actually create our database on mongodb so you can go to mongod b.com and then you can either sign in or create a new account and then after you sign in you can um create a new project uh if you're creating the account for the first time it may go into this

automatically but you may also have to select new project so we'll just name our project and then we can create the project then we just need to create a cluster and we can choose what type of cluster we want to create you're probably going to want to create the free one which is basically just for learning um uh if you if your project gets really big you can always switch to the paid one then create username and password uh note I will delete this or change the password before this video goes live so don't worry

about seeing my password and then after creating the user we can choose a Connect ction method um we're going to have to wait till our cluster is all set up but after the cluster is all set up we can go into the connection screen again and we can if we click through a little bit we can see our mongodb URI this is what we're going to need to connect to our database so just copy this URI and then we'll go back into Visual Studio code code and now we're going to need this URI for our

environment variable so in our the root of our directory we'll create the EnV file and then we'll create a variable mang Vore all capital letters equals and then we're going to put quotation marks around this and put our URI that we just copied we're going to have to make sure that we put in our password again I'll be changing this later and then we are going to have to put in the database name this doesn't have to exist already it will create this database if we don't have this so after it says MB on that

slash we're going to put to-do right before the question mark and that's going to create our database name okay now let's create our Docker compose file this is just going to be in the root directory of our project compose do yaml so put in this code here this is the docker compos configuration file file and Docker compos is a tool for defining and running multi- doer multicontainer Docker applications so we are going to configure it by adding the name um Services is going to define the different containers that make up the application so we basically

have three three containers we have the engine X service which is going to use the official engine X 1.17 image and it amounts a local enginex configuration file on into the container and then it's going to expose Port 80 in the container to Port 8,000 on the host this is going to help reroute the front and the back end to the correct URLs on our on our site and it it's going to depend on the backend and frontend services so the front-end service um you this is going to just specify using node the the user

it's going to set the working directory and the user in the container mounts the local front directory into the Container it's going to expose Port 3000 on the internally into the host sets the environment variables and then runs mpm start command to start the front application then we have the backend service which is going to use the Custom Image built from the backend directory it's going to mount the local backend directory into the Container expose Port 3001 internally and map it to port 80001 on the host it's going to on the python server script um

and it's going to use the envi this how we get in the environment variable file that we just created the EMV so yeah we just have the three main sections the engine X reverse proxy that routes the request to the front and backend the nodejs Bas front end application and the python based backend application and this is going to basically create a consistent reproducible development environment that closely mimics the production setup and we can and start start the entire application stack with all three containers with the single command which we'll do it later so it's

easier to develop and Test full stack applications so let's finish with setting up the engine X configuration so create a directory named engine X at the root of the project we'll create a file Nam engine x.f comp for config inside the enginex directory and we'll paste in some code so this is going to configure inex web server which I said like I said was used as a reverse prop proxy for the Farms application so first we're going to Define uh the server Block it's going to listen to onour 80 for incoming HTTP requests and then

we're going to set the server name and then we're going to create the front- end proxy which is going to forward the request to the root path um to the frontend service which is going to be running on Port 3000 and then we have the backend proxy uh which is going to forward the requests to the/ API to the backend service running on Port 3001 so this will make sure the host names front and back end are going to be resolved within the docker Network so we can use these names instead of IP addresses and

then we have the port mapping the API routing the websocket support so this is basically going to allow us this engine X is going to allow us to serve both the front end and back end applications from a single domain and and port and in the context of our Docker compost setup this engine X container acts as the entry point for all web traffic and routes request either the front end or backend Service as appropriate okay time for the front end we are going to set up the react application which is the front end built

with react so we'll go to our front end directory and then create a new react application using Create react app now there's some more modern ways to create a react app with next uh but this is going to work just fine for what we're doing here so we're going to install additional dependencies this axios is a popular promise-based HTTP client for the browser and nodejs which is going to help create the HTP HTTP request from node.js and then we have react icons which is a library that includes popular icon p as react components and we

are going to use some icons in our application so now we are going to set up the main app component so let's go over to app.js and there's one that's already created by default but I'm going to update it with all new code so this is a pretty standard react application we are going to import stuff like react cooks for State Management and side effects um aios which you just install for HTP request some custom components that we are going to create then we have for State Management we have the list summaries that stores the

list of to-do list the selected item that stores the selected to-do list we have the use effect hook which is going to uh call reload data when the component mounts to fetch initial data and the relo data function it will fetch the list of to-do lists from the API and updates the list summaries State and you can see it's doing http.get API lists so this is going to our backend because of engine X rerouting anything that SL API to our back end of our application then we have the event handlers the handle new to-do list

that creates a new to-do list uh handle delete to-do list deletes um handle select to-do list obviously selecting and then back to list which is going to clear the selected list and reload data we have some conditional rendering if select item equals null it renders the list to-do list component and if a list is selected it renders the to-do list component for that specific list and then we have some props passing various State values and Handler functions are passed as props to child components this app component serves as the main container for the to-do application

and it manage the manages the over All State and orchestrates the interactions between the list View and the individual to-do list view it handles data fet fetching updates and user interactions at the top level and it passes necessary data and functions down to child components so let's create the list to-do list component which was referenced in the previous file let's create a new file called list Todo list.js and we'll paste s some code here it's going to start with Imports the component CSS file for styling the use ref Hook from react for creating a reference

to the input element and then here's we're going to we're going to use the buy solid trash this is an icon from the react icons library that we installed earlier then we have a functional component list to-do list that's going to take four props the list summaries which is an array of to-do list summaries handle select list the function to handles which is the function to handle selecting a list the handle new Todo list which is the function to create a new a new list and the handle delete to-do list which is obviously going to

delete a list and then we have the use ref it's which is used to create a reference label ref for the input field we also have conditional rendering so if list summaries is null it's going to show a loading message and if it's an empty array it shows a message and then the form to create a new list otherwise it's going to render the list of to-do lists so we got the heading then uh form to create a new to-do list even if you already have a to-do list and then it Maps over the list

summaries to render each to-do list summary which is going to each summary each list is going to have a name a count and a trash icon for deleting the list and then there's a few events um if you click on a list summary it calls the select list with a list ID clicking the trash is going to delete it and then the trash icon click event uses the stop propagation to prevent triggering the list selection and you can also uh like I already mentioned create a new uh list so this component is purely presentational with

all logic handled via props from the parent component and this whole component serves as the main view for displaying all to-do lists which allows users to view select create and delete lists and as you can see it's designed to be flexible which can handle and it can handle various states of the application data efficiently then we're going to create the styling for this so we're going to create the file list Todo list. CSS and this is just some really basic styling and then we'll move on to the to-do list component so we'll create a new

to-do list.js which is going to be pretty similar same similar import it's going to have the component definition the functional component to-do list with the list ID and the handle back but button function is going to be one of the are the props it's going to have some State here and then the use effect hook this fetches the to-do list data when the component mounts Or List ID changes and then it also updates the list data state with the fetch data then we have the three event handlers that create an item delete item or check

the toggle if someone clicks that the to-do list item is complete and the conditional rendering um if it's null it shows a loading message or it's going to render the to-do list with all the main parts of the list including a back button and then it just yeah Maps over the list data items to render each to-do item and for each Todo item there's a checkbox um an item label and the trash trash icon and then we got the event handling uh clicking on an item triggers it check State clicking on the trash iccon icon

deletes the item and then if there's an empty state it will display the message there currently no items so this component manages its own State for the to-do list data it all the crud operations for to-do items are handled within this component and the component is responsible for displaying the to-do list and managing the item so it's basically a detailed view for a single to-do list then we're going to create the to-do list. CSS to style the this it's pretty basic and let's update the main CSS file as well we'll go to uh index.css and

then we'll just update the code with some basic simple styling for the CSS so basically we' we're done setting up the react front end for the farm stack to-do application we created the main app component the list to-do to-do list component the to-do list component and and it's basically complete so now we're going to test it out so in this part we're going to run the application using Docker compose so um like I said earlier you're going to make sure you have Docker installed on your system so we can open the terminal and the root

directory of the project and then we'll run Docker compose up-- build which is going to build and start the con containers up means it's a this it just means it's going to create and start the container ERS defined in the composed. yaml file and the Das build flag tells Docker compos to build the images before starting containers even if they already exist so first like I said it's going to read the composed. Y file to understand the services networks and volumes defined in the application then for each service that has a build context specified it's

going to build a new Docker image using the docker file in the specified directory this happens even if an image for for the service already exists which basically means it's going to rebuild it so once all the images are built it's going to create and start the containers for each service to find in the composed file and then it's going to attach to the containers and streams their input to the terminal so now they should be up and running we can go to the web browser and then we're going to go to a local host

8000 so um if you remember it's actually using under the inside the docker containers it's using Us Port 300 3001 but that's being rerouted to Port 88000 so let's test it out a new to-do list Farm stat course and then if we click where it says zero items we can start adding some items so let's just add a few items here associated with our course and now you can see we have Farm one of our lists is the farm set course for items now I'm going to create another list shopping list We'll add some items

to our shopping list and you can see both lists on this page if I click into the items I can check them off when they're finished uh checking a few more off I can delete some items and you can see all that works I can delete a list now let's go to our mongodb Atlas dashboard where we set up our database and I'll show you how you can see the data right from the mongodb website it so let's so let me refresh this page and we'll go to browse collections go to the collection and we

can see here's the the only item is the farm course and we can see the different items within this which is an array so we can see the different uh to-do items in this list and we can even make a change right from this page so I'm going to change this to write and edit articles and then if I I can click update here if I go to my to-do list and we'll see it says write and edit article I can check and uncheck it okay let me just add another little to-do list here with

some items I'll go back over to Mong be Atlas and we can see that list now appears in the list of items here so we we're done with the project congratulations on completing this comprehensive Farm stack tutorial by building this to-do application you've gained hands-on experience with some of the most powerful and popular Technologies in modern web development you've learned how to create a robust backend API with fast API build a dynamic and responsive front- end with react persist data with mongodb and containerize your entire application using Docker this project has demonstrated how these Technologies

work together seamlessly to create a full-featured scalable web application okay happy coding