FARM Stack Course – FastAPI, React, MongoDB

Ecommerce Empire Academy

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:

💻 Code:

⭐️ 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:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

30 thoughts on “FARM Stack Course – FastAPI, React, MongoDB”

  1. 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

  2. Hello Everyone 👋

    It’s a true honor and pleasure to be here on freeCodeCamp Channel.
    Thank you Beau Carnes, FCC and everyone who made this possible.
    If you have any questions guys, please let me know.
    Peace out 👍
    Bek

    1. H. Nazmul Hassan (Rakib)

      @Bek Brace Hey you didn’t explain everything deeply.. but good work man..

  3. 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.

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

  5. 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.

  6. 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 “http://localhost:8000/api/todo/${title}”, while the API responds to “http://localhost:8000/api/todo${title}” and the difference is the / that shouldn’t be there to match the uri to the API).

  7. 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

  8. Manlio Marchica

    I see in the console of the browser that

    // Read all todos
    useEffect(() => {
    axios.get(‘http://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(‘http://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(`http://localhost:8000/api/todo/${title}`);
    axios.delete(encoded)
    .then(res => {
    console.log(res.data)
    const newTodoList = todoList.filter(item => item.title !== title);
    setTodoList(newTodoList);
    });
    };

    1. 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?

  9. Raphael Bevenot

    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.

  10. ananth vankipuram

    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

  11. Nikolai Kletnoi

    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!!

  12. Michael Jay Arizala

    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?

  13. Surayuth Pintawong

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

  14. himanshu sharma

    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.

    1. Bogdan Solyanik

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

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

Comments are closed.