How to build a React + FastAPI application (Full Stack Guide)

In this step-by-step tutorial on building a full-stack web application. We'll be using React for the frontend, FastAPI for the backend, and SQLite as our database, supported by SQLAlchemy and Pydantic.

React and FastAPI are hot technologies in the market! These skills will enable you to be able to get a job FAST!

This guide is designed for everyone - whether you're a seasoned FastAPI developer or a beginner developer just starting out, we'll take you from the basics of HTML, CSS, and Python, to creating beautiful, interactive user interfaces with Bootstrap and React with all the data powered by FastAPI.

Lets build your full stack fastapi react application today!

===========================
🎓 Courses can be found:
===========================

#python #fastapi #fullstack

[TannerBarcelos]

I absolutely love the Python BE | TS React FE architecture. Gives you the best of both worlds. Pydantic is like a cheat code that no NodeJS/JS libraries offer also. Great vid! Found you a few weeks ago and your content choices resonate exactly with what I am looking for

[shinoyb]

You have explained the details in a simple way showing each and every step that helped me understand how to call FastAPI APIs from ReactJS. Thanks a lot for posting this video

[doghosuedean]

Awesome stuff lad, the only video out there that has made it click for me

[johnharrington]

Thank you for making such a great video! It was very helpful, the example was relevant and it explained everything you need. Great job!

[hoegge]

When you don't say WHY you do things, people don't learn much. Explaining WHY is the most important thing to explain when teaching.

[Miho_]

Great breakdown, I appreciated it very much. I love your tutorials, they are very easy to follow.

I am currently working on a project with fast api and jinja 2 and was wondering if I am missing on something by not working in react.

But I can see that the end result is pretty much the same and (correct me if I am wrong) React won’t make a big difference in a small scale project. Could try it out though just for the practice, especially on the mobile version of the web app.

[herozero]

Thank you man, this was a very good tutorial.

[jasonzhang]

thanks, Eric. nice video and explanation. really helpful

[goodatsomething]

Thanks for this to the point and precise tutorial!

[craigdrummond]

Great tutorial! One question. I noticed that when I click the Income checkbox when creating an entry, it works great, but when the form refreshes, it is still checked. Right at the end of the video, I noticed that your checkbox also remained checked. I have tried different values for the is_income line in the handleFormSubmit function, but nothing clears that checkbox after hitting submit. However, if you refresh the browser, it becomes unchecked. Do you have any hints for a brand new React dev to understand this?

[soumrock]

Thank you for the wonderful video series. One question: Can you tell us the logic behind a PUT request here? Tried to delete and add a new request but it is not updating the old transaction, instead it creates a new transaction

[danilatarbaya]

Thank you very much, your guide has helped me a lot. Everything is clear and explained in detail

[polynomen]

Hi, what is the advantage of putting FE and BE in the same folder? Isn't it better to separate it, deploy the BE and take the data from there?

[mcgamr_tv]

excellent video and an excellent teacher. New sub!

[rstiekema]

Thanks a lot. The React part is totally new for me and didn't understand much, but it works haha

[valentinmarin]

Thanks a lot Eric for this great course, excellent indeed, it's content, your broad knowledge and delivery really engage the audience, very clear and precise explanations, I highly recommend the instructor and the course, best wishes and God bless you.

[judevector]

I just came across this channel and am already in love, i just subscribed ❤

But please i have a question how is this used in production like eg the origins of localhost/3000 and 8000 that was set in both react and fastapi in production how are they set

[ekemkkw]

Really good content. Thanks. See you in a next video)

[shristikoju]

So helpful, need other similar videos too

[skribeworks]

Any idea why I'm getting this error when starting the app for the first time (14:13) -
.../Python/fastapp-react-app/FastAPI/models.py", line 4, in <module>

class Transaction(Base):
TypeError: function() argument 'code' must be code, not str