How to Create a FastAPI & React Project - Python Backend + React Frontend

Today I'll show you how to connect a FastAPI Backend to a React Frontend, we'll do this from scratch, and I'll show you how to fix the common errors you're bound to run into, like a CORS error.

🎞 Video Resources 🎞

⏳ Timestamps ⏳
00:00 | Overview
00:40 | IDE Choice
01:56 | Backend vs Frontend
03:50 | Python Setup
08:30 | FastAPI Setup
11:28 | FastAPI CORS
13:00 | FastAPI Routes
17:08 | Testing Routes
19:59 | Frontend Setup
21:25 | Frontend Code
25:28 | Testing the App
26:55 | Auth & Advanced Template

Hashtags
#fastapi #python #reactdevelopment

[shadowslayer]

Thank you Tim for not being like my college teachers who teach programming and assume everyone should know things without putting in the extra effort of explaining every step. Loved the part where you teach even basic steps like creating a venv because many of your viewers like might have just started out learning Python.

[gfcastellano]

Such a great video. You are an excellent teacher!

[ciscoh]

Hi Tim, I love this kind of videos (and all of them BTW), because it is a good starter and remove the fear I could feel before starting a full new (full stack) project. I know AI could also help but here you provide something that works.
It would be nice if you could also show the deployment part (and the configuration we should have for PROD). At the end we want to see this website be online. I know that you also posted some examples in the past.
Another suggestion is to do the same with Vue.js, because it is also widely used.

[niyonda_clothing]

Another insightful knowledge sharing... Tim, thank you as always.

[stevinsebastian]

Which code formatter are you using for python Tim

[TysonPowerPunches]

what the name of the autocomplete that display before you start typing

[akalad]

This channel becomes, all contents for sell 👍

[useronetwothree-zf]

we want more django content 🙏 🙏 🙏🙏🙏🙏🙏🙏

[SmoothSmellsWithT]

All these projects, Tim I'm going to need an External Hard drive 😅
As I begin this one and fill my current one up 😂
All valuable knowledge, Thanks for all the time and effort help! 🎉

[dijei_fullfine]

Nice topic, but at least on the fastapi part that is where I have experience, I feel it quite simple, I think you should split the code into multiple files as minimum. It's not only about knowing how the specific code works, but also how to handle the project and scale it easily.

[sanchOlabs]

I am not sure you are going to respond but maybe someone else has an idea, why people in quite recent tutorials are importing and using uvicorn, if fastapi project can be run with "fastapi run/dev" and it is actually using uvicorn as far as I am aware?

[Arun]

Why don't you bring learn react in one video?

[Vishnu-jn]

There is no option to choose fast api while creating a project in PyCharm. How to solve this problem?

[riccardorubini]

Anyone try to run the Auth Path? Main won’t to start..

[AlvinMutongozwa-dbbu]

We need Django updated course for 2025 and machine learning updated course

[PHX]

Good afternoon. I am writing from Nigeria and I know nothing but willing to learn how to code.

[gachawings]

MERN (2025) ❌
Django + React (2025) ✅

[truthwillout]

The more I look at the word 'fruits' the less and less it looks correct.

[TanmayBhatgare]

Hi Tim,
Many FastAPI projects stick to HTTPS, but integrating WebSockets can unlock real-time features like chat apps. Since there aren't many resources on this, could you make a video showing how to use WebSockets with FastAPI for live applications?
Thanks!

[phat]

Pycharm is a disgusting piece of software. It's the worst IDE I've ever worked with. It stupidly interferes with writing code. I don't understand how anyone can like it at all.