FARM Stack Course - FastAPI, React, MongoDB

The FARM stack is FastAPI, React, and MongoDB. It is a simpler form of the MERN stack that can make developing apps even faster. In this course, you will learn how to create a basic CRUD application using the FARM stack.
✏️ Bek Brace developed this course. Check out his channel: / @bekbrace
💻 Code: github.com/BekBrace/FARM-Stac...
⭐️ Course Contents ⭐️
⌨️ (00:00) FARM STACK Explained (Theory)
⌨️ (11:20) Backend build (FastAPI)
⌨️ (39:39) MongoDB Queries
⌨️ (42:15) Frontend Design
⌨️ (58:03) App Testing
--
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@haaris4693]

This channel should be awarded with honour for what they have been doing for the society ❤️

[@Josh-qb4em]

I have this issue when watching tutorial videos like this where if the instructor makes a typo or something, I'll be hyper-fixated on it until it gets acknowledged. Anything said/taught between the time of the typo and the time of acknowledgment goes in one ear and out the other. So the fact that you did those little popups immediately acknowledging it was wonderful.

[@mayankrai165]

Love the channel ❤️ such great content

[@kabylekabyle9250]

Hello! thanks you sir carnes FCC, thanks all of you guys to help us.

[@Miho_13]

Very good introduction , thank you !

[@naveens9575]

That was an awesome short tutorial on farm stack✌

[@nyashachiroro2531]

I love this stack

[@laracombina]

this was really helpful, thank you!!

[@surayuthpintawong8332]

Thanks, I can finally see the big picture how each component (FastAPI, React, MongoDB) connects togther!

[@marcscherzer]

Didn't know FARM stack existed ...

[@BRISKLYHIDDEN]

GREAT JOB! Thank You, Bek !

[@BekBrace]

Thank you, Kratos :)

[@jeanleloup2205]

MongoDB not graphql - Thank you for this refreshing turtorial

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@narutokun5093]

Thank you for such great videos , great work

[@mauricefakhry8039]

Great tutorial !!

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@shahriar.shourov]

Thanks!

[@project-pcs]

First, and also fast api is really good!

[@123arskas]

Thank you so much for this. Now I can dive deeply into the FARM stack

[@horizons4225]

thank you

[@mahendranath2504]

Wow, thank you so much for sharing the knowledge 🫡🙏👍😊

[@BayarUdval]

Nicely done, :)

[@nikolaikletnoi9346]

This is a great guide!! Everything works really well and relative to other frameworks it is super-easy to learn and use; i was wondering if you could please show how to connect to mongodb proper ( in the cloud); i have tried a few things but somehow, something was off; it would be nice to connect to cloud, not just on-prem; thanks so much!!

[@b20lopez]

use Pymongo

[@frosty7674]

First, Edit: tomorrow's my exam and these pple posting one after other videos, cool videos

[@BekBrace]

Thank you 🙏

[@sachinsudaraka6397]

Thanks

[@cybr774]

I'm somehow not able to delete the todos. Every time I press the button that removes the todo, in the console I get the following error: "Failed to load resource: the server responded with a status of 404 (Not Found)". The thing is that the uri is correct, but it somehow gives me that error. From the swagger UI it works fine, but it doesn't from the frontend. Any tips on what can be done to resole this issue? I'd appreciate it! Edit: I actually found the problem! If anyone is encountering the same problem, it's that in the file Todo.js, in the deleteTodoHandler, the uri is wrong (in the frontend , Bek Brace used this uri "localhost:8000/api/todo/${title}", while the API responds to "localhost:8000/api/todo${title}" and the difference is the / that shouldn't be there to match the uri to the API).

[@erickheredia8910]

Next Stack: NUTS (Nuxtjs, TailwindCSS, Supabase). Mark my words!

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@frackinfamous6126]

Don’t you mean get on your NUTS? 😂

[@rangabharath4253]

Awesome 👍😎

[@mareboinaravi5272]

❤️❤️MERN is love❤️❤️

[@sathyapriya3999]

Hi sir I just joined this channel .very usefull to my software study

[@BekBrace]

Great

[@satyasridevi851]

I just saw this stack in mongodb channel live

[@satyasridevi851]

@c_a yes kzbin.info

[@peterkulik5943]

0:02 "The FARM stack is FastAPI, React and GraphQL." I went through this video, but I didn't find any other reference to GraphQL

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@aureli4nus]

probably just a miss on their side, it shouldbe MongoDB not GraphQL

[@robertmazurowski5974]

These 3 letter acronyms don't make sense anymore, and most of them wont sound good, or be memorable.

[@astronemir]

Can’t believe this is free. People charge hundreds for such lessons split into a bunch of short form videos.

[@MehulBhuradia]

How do we dockerize this stack?

[@tranquillityEnthusiast]

Need a mean stack full course..

[@Shou06]

It would be great if there will be a course on deployment an web app

[@michaeljayarizala9305]

Great tutorial very easy to follow along! Do you have any suggestion for an ideal approach to adding user authentication in FastAPI i.e. recommended authentication library we can use that allows pbkdf2 or ssha encryption as well as generating session tokens?

[@BekBrace]

Thank you, Michael - glad to hear :) I have a tutorial for user authentication with FastAPI and JSON Web Tokens - maybe this can help you : kzbin.info/www/bejne/ZpDWloF8eNmaos0

[@dajlefromcb]

If you are using Python 3.11, you have to use motor == 3.1.1 dependency.

[@luisdato1712]

26:12 Why do you use await? I tried to run program without await but it also runs nomarlly.

[@coleblender1998]

Where is the video to set up the paths?

[@Faybmi]

40:12 if you don't have todo in mongo, try post method in docs

[@mrrishiraj88]

👍

[@mdabirkhan1103]

Woow🥰🥰🥰

[@piyushmahapatra6405]

Waiting for some database to start with T to make it " FART Stack " Sorry for that joke :( Appreciate the Content

[@sircosm]

There's Teradata and Tibero for farts ;)

[@allthecommonsense]

lol

[@EveRestUpsb]

FastAPI, React and Typescript!

[@raphael6441]

Thank you so much for this tutorial. I'm just wondering how and how often the data are refreshed ? The backend seem to have a lot of requests in my implementation.

[@rice5817]

Does the official docs not mention anything about that?

[@himanshchauhan4287]

@@rice5817 yes i was facing the same problem because there is no dependency on which the state should change that is why we get that endless api calls in terminal. Solution-> create a new usestate key with initial value set to 0.Then in useeffect just add 1 in old key const [refreshKey, setRefreshKey] = useState(0); useEffect(() => { axios.get('localhost:5007/fetch_all_todo') .then(res => { setTodoList(res.data) }) }, [refreshKey]); const addTodoHandler = (id,title,desc) => { axios.post('localhost:5007/create_todo', { 'id': id, 'title': title, 'description': desc }) .then(res => setRefreshKey(oldKey => oldKey +1))

[@webcodingoprogrammingtips2090]

LAMP, MEAN, MERN, FARM - what is the next stack? :)

[@Filiq.]

MEVN, PERN, WISA xD

[@satyasridevi851]

You missed MEVN

[@ac130kz]

RUSP - Rust Svelte Postgres

[@rustamshrestha4]

JAM stack JS, Api & -MongoDB- * Markup * 😂

[@danielibanez1855]

How about FAVM?

[@tyronefrielinghaus3467]

great : and you have a good , easy to follow voice. Some FCC courses have AWFUL voices , super hard to listen to for long....high extrinsic cognitive load imposed!

[@michaelshort2388]

when creating a post I get the error "object has no attribute 'dict'

[@himanshchauhan4287]

Hi im having trouble. axios keeps calling backend api when fetching all todos in useeffect part. Is this expected?

[@ketchupparty9997]

A course on Three.js please

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@kyleshrader9053]

Why do you prefer NPM over YARN?

[@leepham7782]

So I'm trying to follow along with this tutorial, but when I run both front and backend, once my react page loads, it continuously makes calls and doesnt stop. I also am unable to delete or create tasks. Does someone have a repo of this project I can check out?

[@samalexkoshy2877]

It's the onChange that makes the call continuously for me. As for the deletion and creation of tasks, even I'm facing the same issue. An empty task is being displayed for me

[@alpha3twin]

Why start with todo ids when defining routes and then switch to using titles as identifiers?

[@munchabel]

That's a great point. Using title as an identifier is bad practice. What if you have duplicate titles, for example? Stick to the todo id, which is always unique!

[@tr.j4079]

Can we have a FARM with Fastify?

[@moazim1993]

what's he using to run Linux terminal on windows?

[@TheHummChannel]

Why did not you use Moralis Serverless?

[@kenfeier5542]

For those that don't know Python, this can also be done using NodeJS, Express, and Mongoose. You can create a schema and set routers that can generate simple CRUD API calls in a very similar way as the FastAPI.

[@revernd2491]

ofc, but that defeats the very purpose of this course

[@yashvarshney6761]

How to deploy this?

[@timbrap4693]

Is this serverside rendering or clientside rendering?

[@athulkrishnadiyil1735]

how to use gridfs/imageupload with fastapi motor

[@atomicbreath4360]

Can anyone help me how to upload file in FARM stack

[@BlakeTedKord]

FCC Team - Will there be a complete class with more courses in a playlist on the topics of computer vision/Neural network and CISSP and SEC+? I’m sure a lot of people here would look forward to that.

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@himanshusharma-ve7uj]

I am facing pydantic.error_wrappers.ValidationError: 1 validation error for Todo response value is not a valid dict (type=type_error.dict) , While calling post method response = await create_todo(todo.dict()) . Please can you help in this.

[@bohdan134]

At database.py you need to change return of create_todo function to "document", not "result" value.

[@robertmazurowski5974]

@@bohdan134 In the video he said that was a mistake. He should correct somewhere or do an annotation.

[@robertmazurowski5974]

@@bohdan134 And because of that error I discovered I can put multiple Duplicate titles. is there a primary key in Mongo DB

[@user-rk3jg1bk5f]

when will be java backend tutorial?

[@user-rk3jg1bk5f]

Please

[@komandan6868]

Bro tutoriall full video python androidhelper... Plsee bro🙏🙏

[@robertmazurowski5974]

In Poland it is AŻUR not aizure

[@astronemir]

I could feel the lag after 45:00 in real life

[@slothpete7773issleeping]

I clicked on this video because the stack name sounds interesting.

[@utkarshbansal2758]

pls make a course on ios development using swiftui

[@martynbirdem189]

kzbin.info/www/bejne/iWapq42Gpdahmrs Javascript tutorial easy example kzbin.info/www/bejne/rZK7n513eap4d8k

[@sukantagarwal6824]

Hi, can you provide the link for fast api course in comments?

[@TR1ckY_TV]

there you go Bro kzbin.info/www/bejne/bGPTgWymm9-BiNU

[@sukantagarwal6824]

@@TR1ckY_TV thanks bro!

[@coleblender1998]

At 40:17 my database did not connect to the compass. I even replaced all of my code with the one in the repo and it still didn't work. Does anyone know what the problem could be?

[@dwein008]

I think, i have the same problem, for me it works when i do close vs code and open again and do the post method.

[@XShollaj]

Execute the post method after the connection- that triggers the automatic creation of the TodoList database (since we already have established the connection)

[@rohitkumarb.r3865]

What about update?

[@kz_cbble9670]

24:00 33:00

[@fumano2679]

Im using angular as frontend but i really liked the backend part

[@amirbraham6507]

How would you go about deploying it on heroku for example ? Do you host two separate apps and hard code your backend url instead of localhost:3000 ? Thanks in advance

[@kartyk7415]

Superb tutorial I also had the same problem in VS code so i used PyCharm😁😁😁😁

[@City__Walker]

Ehh enterprise not use mongo :( I need FARP Postrges variant

[@ananthvankipuram4012]

FARM stack is proudly sponsored by the exceptional Farmers over at Ligue1! Jokes apart, at this rate we have MERN, PERN, NERN(Next) and we will have JS Fatigue all over again. LOL

[@sarthakgautam8035]

I am not able to import motor package .... tried upgrading all packages also still the same problem is there

[@esmailalmoshki3506]

most likely it is a python-version-related problem

[@martinmiz]

It's probably an issue with how you setup your virtual environment and if you are using VS Code, you need to check and see that you're using the correct interpreter that matches with your current venv file. You can press Ctrl+Shift+P and select "Python: Select Interpreter". Choose the one with (venv) or having "Recommended". You may need to restart your VSCode window sometimes.

[@nonameiskickass1319]

Who wants LAME stack next ?

[@rustamshrestha4]

Linux Apache MongoDB Elixir 😂

[@atefe3919]

Hi thank you for an amazing tutorial. I can not find the FastApi course, would you share the link?

[@liriani]

32:45

[@leewseea]

I thought u have some really cool mouse pointer afterimage effects, but it was just the video lagging XD

[@BekBrace]

Yes, I apologize for that, it also bothered me when I was done recording

[@danielibanez1855]

How common would a FAVM stack be? 🤔

[@BekBrace]

I'd love to recreate this with Vue.js someday

[@manliomarchica4911]

I see in the console of the browser that // Read all todos useEffect(() => { axios.get('localhost:8000/api/todo') .then(res => { setTodoList(res.data) }) }); generate and infinite call to get todos as the component App was continuosly rendered. I add [] as second parameter of useEffect to call it once and change the add handler to update the state, further I move the delete hanlder in the App.js and pass the reference deep in the child component, also in the delete handler I have to update the state // Post a todo const addTodoHandler = () => { axios.post('localhost:8000/api/todo/', { 'title': title, 'description': desc }) .then(res => { console.log(res); const newTodoList = [...todoList]; newTodoList.push(res.data); setTodoList(newTodoList); }); } const deleteTodoHandler = (title) => { const encoded = encodeURI(`localhost:8000/api/todo/${title}`); axios.delete(encoded) .then(res => { console.log(res.data) const newTodoList = todoList.filter(item => item.title !== title); setTodoList(newTodoList); }); };

[@isaacafara5811]

Thanks Manlio, nice update to this great video. Quick question: how did you pass the reference after moving "deleteTodoHandler" tp App.js? Can you please show example?

[@danielleivy8180]

@@isaacafara5811 useEffect(() => { readTodosHandler() }, [todoList]) This will watch when todoList changes (I didn't have to move the delete function). Also it's a good idea to extract the useEffect axios call into it's own function.

[@jon7035]

Now we need something a T so we can have a FART Stack

[@jon7035]

FastAPI React TErraform DynamoDB - FARTED

[@thesameerjoshi]

Thats a lot of stack rhyme

[@satyasridevi851]

Is FastAPI python framework?

[@dragonarch0]

Yup

[@Deiwulf]

666.. that's bound to be some sort of a sign

[@oussamanidhalbelhadjhammou643]

kzbin.info/www/bejne/nnOYfnqLpc-fn5Y

[@raminatox]

The web dev had a FARM, E-I-E-I-O...

[@florijnterstal6590]

Nice.. now make the right tutorial... FastApi, Vuejs and PostgreSQL

[@Abdiwazic]

First♥️

[@b20lopez]

Could you please do a video on how to deploy this to Google cloud? or firebase? or any hosting?

[@yinghouwang]

Save my life!!!!

[@Ken-S]

LMAO - Linux, Mongo, Angular, OpenAPI

[@sardor1391]

Make channel like that on Russian

[@neotiwari3772]

Fourth

[@credoboyofficial]

Wooo 7 comment 😂

[@shahriar.shourov]

First

[@yinghouwang]

Thanks!