Python + JavaScript - Full Stack App Tutorial

Dive deep into full stack development in this comprehensive guide, where I will walk you through building a dynamic web application from scratch, utilizing the power of Python with Flask for the backend and JavaScript with React for the frontend.
Don't forget to like, share, and subscribe for more in-depth tech tutorials from Tech with Tim. Join the discussion in the comments below and share your progress or ask questions.
Register for the NVIDIA GTC: nvda.ws/3j19YDK
Enter the Giveaway: forms.gle/Lu7QQ4XancakaTjH8
The Future of Extended Reality and Generative AI [S62751]: www.nvidia.com/gtc/session-catalog/?tab.allsessions=1700692987788001F1cG&search.parvrp=1699042406066003SCBr#/session/1697836797138001TTNw?ncid=ref-inpa-737311
Large-Scale Production Deployment of RAG Pipelines [DLIT63054]
www.nvidia.com/gtc/session-catalog/?tab.allsessions=1700692987788001F1cG&search.pconversationalainlpp=1699468109960003YuO1#/session/1702668294942001QSt8?ncid=ref-inpa-737311
Exploring AI-Assisted Developer Tools for Accelerated Computing [SE62128]
www.nvidia.com/gtc/session-catalog/?tab.allsessions=1700692987788001F1cG&search.pgenerativeaip=1699468419333006hhuM#/session/1694625432057001G65M?ncid=ref-inpa-737311
🎞 Video Resources 🎞
Full Code: github.com/techwithtim/Flask-React-Full-Stack-App
If you want to land a developer job: techwithtim.net/dev
If you want to learn Web 3 & Blockchain: algoexpert.io/blockchain (use code “tim”)
If you want learn Python & Go: programmingexpert.io/tim (use code “tim”)
Skool community for free resources: softwaredeveloperacademy.com
Discord server: discord.gg/twt
⏳ Timestamps ⏳
00:00 | Introduction
02:40 | Project Demo
04:27 | Setup & Installation
08:50 | Building The Backend
45:08 | Building The Frontend
Hashtags
#PythonJavaScriptTutorial #fullstackdevelopment #FlaskReact #TechWithTim #WebDevelopmentGuide

Пікірлер: 150

  • @TechWithTim
    @TechWithTim2 ай бұрын

    Join a free Skool community with over 7000 developers where you can network and learn! www.skool.com/software-developer-academy/about

  • @kpopTv56

    @kpopTv56

    2 ай бұрын

    Hi you have been a source or inspiration can you please and please make a project of using sqllite and sql.js to help for browser database usage Thank you please reply I am a big fan kindly help me thank you for your time

  • @Anonymous-dy2te
    @Anonymous-dy2te2 ай бұрын

    Django and react project needed🥰

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    Like this comment if you want to see that!

  • @hellohere-pu8uj

    @hellohere-pu8uj

    2 ай бұрын

    @@TechWithTim waiting for django already completed the 9 hour project and many tutorial projects from your channel

  • @247aakashpavar6

    @247aakashpavar6

    2 ай бұрын

    ​@@TechWithTimI love the way you teach about python. 😊

  • @lucassilverio8923

    @lucassilverio8923

    2 ай бұрын

    Yes !!

  • @eternogigante685

    @eternogigante685

    2 ай бұрын

    @@TechWithTim yes pls

  • @joe2271
    @joe22712 ай бұрын

    HOLY CRAP!! I asked you for this last week. Thanks Tim, almost feel like it was answering my request! All kidding aside, thanks for doing this and gonna go through it now.

  • @lucaskellerlive

    @lucaskellerlive

    2 ай бұрын

    Dudes a dog

  • @code2compass

    @code2compass

    2 ай бұрын

    bullDog I'd rather say!@@lucaskellerlive

  • @avenisource

    @avenisource

    2 ай бұрын

    Every time I'm on KZread for entertainment and i come along a video of Tech with Tim i must open it. I just love this Channel. ❤

  • @thatsathishkumar

    @thatsathishkumar

    Ай бұрын

    I asked it a year before

  • @user-kc7uo4qn2x
    @user-kc7uo4qn2x2 ай бұрын

    Hey Tim! Just want you to know that your tutorial videos are so helpful and useful in expanding programming skills. I love how you keep it simple and open-ended for personal creativity to come into play. Thank you lots!

  • @skooma103
    @skooma1032 ай бұрын

    Hey Tim, I've followed your content for years. You were one of the people who sparked my interest in programming. Thankyou for all your hard work and keep up the great work. You're genuinely one of the best content creators on this platform.

  • @bobk9117
    @bobk91172 ай бұрын

    Thanks Tim, it's week 1 of my capstone project class and this is exactly what I needed. I can't believe my luck

  • @spencercooper367
    @spencercooper3672 ай бұрын

    Since I encountered your video last year I continue to feel passionate about Ilearning this. Thanks for always publishing fruitful and meaningful content that go in-depth. Tim your name and the names of other will surely be mentioned when I have fully grown.

  • @patrickprucha5522
    @patrickprucha55222 ай бұрын

    Thanks for the video. I like the way you explain the stuff. I'm at an impass. 62 years old, on linux and created a bunch of scripts working in tandem to carry out the maintenance of my computers and network. However, i am trying to jump into python. I was switching between perl and python and actually c. I have programmed in fortran, cobol, pascal, access and even foxpro to build databases apps. I would like to follow the path of Master programmer by Dr. Chuck...so have decided to go into python, using my bash scripts to whet my appetite on python. This is the hardest step to go past. In any case i do like how you present your videos. Very down to earth, understandable, and easy to follow. So for that, Thank You and Excellent job! Cheers!

  • @alimihakeem841
    @alimihakeem8412 ай бұрын

    Absolutely a nice projects. Thanks for this. I'm currently learning flask, so this project will give me a starter template in building full stack application

  • @parthkabra8880
    @parthkabra88802 ай бұрын

    I struggled learning this on my own, they way you explained it was outstanding

  • @ReeveJonathanA
    @ReeveJonathanA2 ай бұрын

    Tim this was perfectly timed. I’m a beginner developer and I know the basics of Python, JS and React but I’ve been struggling to put them together to build something full stack. Thank you so much for this! ❤

  • @carsonjamesiv2512

    @carsonjamesiv2512

    2 ай бұрын

    I agree with your comment.🎉

  • @jsto6056
    @jsto60562 ай бұрын

    Great work on this. This is a perfect example of a FS app base modal for anyone to use. Thanks. Could have used this years ago myself.

  • @nikhuge6580
    @nikhuge65802 ай бұрын

    This is really great.I really like to see more small fullstack projects like these...

  • @shallanrambaran7090
    @shallanrambaran70902 ай бұрын

    Thanks Tim! I'll be following along in the weekend!

  • @nomadti8591
    @nomadti85912 ай бұрын

    Just what I was looking for!! Thanks so much!

  • @pth55
    @pth552 ай бұрын

    Please continue making these type of beginner friendly videos. Thanks ❤

  • @iamqqu
    @iamqqu2 ай бұрын

    Absolutely great video Tim, this clears a lot of cobwebs

  • @penujahansith2688
    @penujahansith26882 ай бұрын

    yooooo! the perfectely matched tutorial 🔥 sending... love from Sri Lanka ❤❤❤

  • @ntahetony-blaise6386
    @ntahetony-blaise63862 ай бұрын

    Thank you for this amazing video, Tim!

  • @YousifMohammed-uk4zi
    @YousifMohammed-uk4zi20 күн бұрын

    Very well structured video i loved the way you explained everything, please make more videos of these with more complex DB. thanks

  • @codingpandas
    @codingpandas2 ай бұрын

    Have learned alot from you tim, thanks for the quality content🥰

  • @luisdavidbarranzuelacastil1844
    @luisdavidbarranzuelacastil1844Ай бұрын

    Master TIM, thank you so much for doing this!, blessings!

  • @user-vn7cd2jx9m
    @user-vn7cd2jx9m2 ай бұрын

    Wow just what I needed Thanks tim

  • @Mecagothits
    @Mecagothits9 күн бұрын

    This one is actually Tim’s best video

  • @thanhquangtranhuu1177
    @thanhquangtranhuu11772 ай бұрын

    Thank you so much Tim, You Are The Man! 🥰

  • @kudrah
    @kudrah2 ай бұрын

    This is exactly what I wanted. Thanks

  • @myhificloud
    @myhificloud2 ай бұрын

    This is fantastic. Thank you for this.

  • @vinodsagar2412
    @vinodsagar24122 ай бұрын

    Hello Tim , Thanks for your awesome video and i started working on it

  • @mdelim3128
    @mdelim31282 ай бұрын

    NICE TIM THIS IS WHAT I WAS LOOKING FOR TO BIND ALL AND HOW TO MAKE IT

  • @kosi5
    @kosi5Ай бұрын

    Thank you! this was really informative. You are a great teacher :)

  • @caleblwright1
    @caleblwright12 ай бұрын

    Great tutorial. If you are having trouble importing the flask packages (like I did), do some digging on python environments. Best practice is to create a new virtual environment for each project because Python isn't great at dependency management. Once you create the virtual environment, activate it and import the flask packages into the venv you just created. That should fix your problem!

  • @unopinionated1823

    @unopinionated1823

    2 ай бұрын

    Great advice, Caleb. I found Visual Studio Code to be super helful in this regard. It was easy to create a new virtual environment, and you can do this and switch your interpreters with one command at the bottom of the IDE.

  • @johnadriandodge
    @johnadriandodge2 ай бұрын

    Shalom Mr. TwT, thank you for sharing this. Generally, I get so swept away by the visual GUI GUI nifty neat style effects, and all the bells and whistles which accompany that, I quickly lose sight of the meat and potatoes of the functionality. I am glad you made a decision to bypass that noise, and focus on what matters most of the given app. After all, an app most certainly can function not looking nice, but it can look the best, yet not function at all! Thanks again Mr. TwT! Here is a thought... Tech Niche Tim: TNT!

  • @edisongarcia94
    @edisongarcia942 ай бұрын

    Thanks for the helpful and interesting video!

  • @mikeandersen8535
    @mikeandersen85352 күн бұрын

    Stumbled upon this video searching for more information to help me create a mockup for an idea I have, which I have decided to make with flask and a web frontend. Wish I have found this one first, because that would have saved me some time. Great work and you are very good at explaining the tings I need to learn. Did a lot of web-related programming back in the 1990s, but oh my how much have changed since then! Even how things are named. It even took me a while to understand that "Route" was nothing else than what we called "Path". So if you are up for a challenge: Create the application from this video with only the tools and technology available in 1996, and then do a comparison of then and now. Could be a cool video, and maybe you recognise more techniques that are the same today as they were then (but with other names)?

  • @arunpravin3579
    @arunpravin35792 ай бұрын

    Vera level so good please upload python+JavaScript tim

  • @Akshat2108
    @Akshat21082 ай бұрын

    Yessss..... FINALLY WHAT I NEEDED

  • @majestif
    @majestif2 ай бұрын

    A tutorial with Flask + HTMX would be much appreciated!

  • @dotsdigi
    @dotsdigi2 ай бұрын

    Damn finally I've caught up with you! Nice video as usual🔥

  • @andresbonelli
    @andresbonelli2 ай бұрын

    This is an amazing tutorial, concise and to the point, have you thought of following with a tutorial on how to deploy this proyect online? (you can even use some of your sponsors loke Linode or such as an example!)

  • @BossNerd
    @BossNerd2 ай бұрын

    It would be cool if you did this same project in pyscript and then compare the two as a measure of how well pyscript is coming along.

  • @ernie345
    @ernie3452 ай бұрын

    Great content 🎉

  • @davidcharles-daniel4362
    @davidcharles-daniel43622 ай бұрын

    Thanks a lot for the video.

  • @TheAraz95
    @TheAraz952 ай бұрын

    Great one! Do one for FastAPI backend and React frontend ❤️

  • @maikelvanvliet2716
    @maikelvanvliet2716Ай бұрын

    Really nice tutorial! Can we have a pt.2 tutorial where we go deeper and make a website where people can register, login and change their records after they are logged in?

  • @p21072
    @p210722 ай бұрын

    Hey Tim can you make a tutorial for building a fullstack website using react redux and django it would be really helpfull

  • @music4life467
    @music4life4672 ай бұрын

    it almost year i use python as backend to my javascript,, it very easy to use like ml or other lib of python, using it in react js and also plain javascript.. a month ago i create basic widget or controls library for my plain js

  • @cheerio4742
    @cheerio47422 ай бұрын

    WOW just the video i need Thank you so much. can you make a Django + React Vite w/ deployment process in it?

  • @pietraderdetective8953
    @pietraderdetective89532 ай бұрын

    Was excited to see you doing some frontend with React. Then i saw the looks of the demo project...ngl it took away my interest to do the project.

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    Fair enough, the idea is to let you style it on your own. Unless you want to watch me do css for 2 hours?

  • @vella166
    @vella1662 ай бұрын

    Nice video🔥

  • @MohammadAlikhany
    @MohammadAlikhanyАй бұрын

    Thanks a lot!

  • @ValeriPenchev
    @ValeriPenchev13 күн бұрын

    Hi, first of all - great video, thanks for it! I have the following python backend question - why are not database intereactions in try-catch blocks and only the add_contact is?

  • @user-os4lj3pi4q
    @user-os4lj3pi4q2 ай бұрын

    Btw, I'm using mac and I use pip, not pip3. P.D. Nice tutorial. This will help me to work on many personal projects.

  • @thesnedit5406
    @thesnedit54062 ай бұрын

    Please make a django and react course. Those two comprise one of the best tech stack

  • @bklynpeter
    @bklynpeterАй бұрын

    Overall, fantastic. One major question though. While this works great when you can start up your frontend and backend in a dev environment, ultimately if this was a real web app, wouldn't the backend need to deliver the frontend to the client when you first landed on the page? Maybe you could explore this in a follow-up video?

  • @adamtroup785
    @adamtroup785Ай бұрын

    this is a banger and i know bangers

  • @adilfarq3784
    @adilfarq37842 ай бұрын

    Go and react project needed 🎉

  • @kishan_0021
    @kishan_00212 ай бұрын

    Thanks 👍 ❤

  • @carsonjamesiv2512
    @carsonjamesiv25122 ай бұрын

    INTERESTING!😃

  • @user-ws4nz8fu6z
    @user-ws4nz8fu6z2 ай бұрын

    Спасибо за видео :)

  • @user-skxfwmm
    @user-skxfwmm2 ай бұрын

    Hi Tim, this is exactly what i'm looking for. Putting things together, having the whole picture of the app. But I actually find myself a little bit struggled when i go along the tutorial, i feel like it is because i'm not that familiar with flask and those back-end knowledge yet. Do you have any advice of what should i do? That would be really appreciated. Once again, thanks for the video.

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    I have a ton of flask tutorials on my channel they’re more beginner friendly why don’t u check those out!

  • @user-skxfwmm

    @user-skxfwmm

    2 ай бұрын

    @@TechWithTim Exactly what I'm doing right now😂 sorry for the dumb question

  • @TrilioniME
    @TrilioniMEАй бұрын

    FastAPI + React example please. Thank you for Flask and Django.

  • @146vj
    @146vj10 күн бұрын

    great work... how can I deploy this app on Vercel or similar platforms. Thanks

  • @WebDeveloper682
    @WebDeveloper68225 күн бұрын

    thank you for this tutorial but how to deploy both of them together

  • @user-tj5it2rz1t
    @user-tj5it2rz1t2 ай бұрын

    ❤thanks alot

  • @danielpeck1310
    @danielpeck13108 күн бұрын

    can you do a video on how to deploy flask + react?

  • @iosule3719
    @iosule3719Ай бұрын

    Hi Tim i hope i get a response to this question. Ive seen your other video series about using python+flask sqlalchemy without using JavaScript, so my question is since u are using python and JavaScript in this video and GitHub doesn't host site Python sites, will GitHub host sites with JavaScript and python? like the type u did in this video

  • @user-xx8cw6on7t
    @user-xx8cw6on7tАй бұрын

    Would you be able to do a tutorial on reflex?

  • @merahputiih
    @merahputiih2 ай бұрын

    thanks!

  • @StoiccGaming
    @StoiccGamingАй бұрын

    How did you get your text to be all of those colors? I installed 'prettier' but I don't like the color scheme of it. I like the one that you have

  • @joshuakibona3247
    @joshuakibona32472 ай бұрын

    can you please do a fastAPI and nextjs with AUTH flows, And how to implement RBAC

  • @drushkyy2017
    @drushkyy20172 ай бұрын

    can you explain how languages talk to each other? im confused how they fit together.

  • @TheNishi42
    @TheNishi422 ай бұрын

    Would have a complete project if you would have consider index.html and some config for hard-coded urls in jsx

  • @Alphalm100
    @Alphalm1002 ай бұрын

    How do we protect our api not to be accessed from different URLs?

  • @kamilmarszakowski8694
    @kamilmarszakowski86942 ай бұрын

    Nice one

  • @HyperbolicHarmony
    @HyperbolicHarmony2 ай бұрын

    Hi Tim! I was wondering: what is the best python IDE? I've been using Pycharm, but it is very difficult to get packages and such things. Do you have any advice?

  • @iosule3719

    @iosule3719

    Ай бұрын

    sublime text- super light weight

  • @sasukev9
    @sasukev929 күн бұрын

    When deleting I get an error to fetch, but when refreshing the page it successfully deletes? edit: I did not add the return to the delete_contact method.

  • @shuncho7844
    @shuncho7844Ай бұрын

    Can I ask what theme and font you are using because its a lot clearer than mine on vscode

  • @lytz
    @lytz2 ай бұрын

    Any recommendations on where to start to get the skills and insights needed to understand a bit more of this video.

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    I have all kinds of beginner tutorials on my channel for both JavaScript and Python. I would make sure you have a good understanding of both of those languages

  • @sasukev9
    @sasukev9Ай бұрын

    At the end of the video when wanting to use the fetch button, I get an ERROR TO FETCH, I checked the URL and the fetch method.. everything seems fine, what could it be? CREATE and UPDATE works, delete is the only one that does not

  • @Skarzx
    @Skarzx2 ай бұрын

    Would you ever consider (unless you did it already) do a web-scraping centric app for like sports statistics? Or any videos you have covering stuff like that you have already that you'd recommend? @Tech With Tim

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    I have a few videos covering that already, you can check my "Million Dollar Project Idea" video

  • @Skarzx

    @Skarzx

    2 ай бұрын

    @TechWithTim thank you yeah I'll check it out.

  • @rockerzhackers799
    @rockerzhackers7992 ай бұрын

    Do another with django and react

  • @bahae06
    @bahae062 ай бұрын

    i think you’re using an old version of flask sqlalchemy? correct if that’s wrong

  • @foterloter523
    @foterloter5232 ай бұрын

    Maybe could be better If you provide more information about real world practises using flask api.

  • @acerswift4386
    @acerswift43862 ай бұрын

    I'm very new in React and JS in general. Can someone recommend me a very short course to get it? Like "A bite of Python" but for JS and React.

  • @user-fu8ui1ct2e
    @user-fu8ui1ct2e2 ай бұрын

    Thanks this is what I can say to

  • @XdSparkle.
    @XdSparkle.2 ай бұрын

    u need to use __init__ to the class 16:18 timestamp (not reqired tho)

  • @daniell9062
    @daniell906220 күн бұрын

    What key switches are you using? 😅

  • @burntfried
    @burntfried2 ай бұрын

    How do you publish Python backend to a server? Does it just go in the public/html folder like PHP does?

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    It’s a bit of a different process, I have various deployment videos on my channel showing how to deploy a flask app.

  • @garrettsmith315
    @garrettsmith3152 ай бұрын

    Ask and you shall receive!!!!! Now that we have seen React, it would be interesting to see a comparison video to a different front-end framework!!!!!!!!

  • @user-hn5bh9ts9b
    @user-hn5bh9ts9b2 ай бұрын

    django and react project needed

  • @XxMissingDataxX
    @XxMissingDataxX2 ай бұрын

    Golden

  • @Br0_CoDeS
    @Br0_CoDeS2 ай бұрын

    Waitong for django and react project....

  • @josebaezc.7709
    @josebaezc.7709Ай бұрын

    add bootstrap, some beauty please.

  • @stew-san7840
    @stew-san78402 ай бұрын

    Which keyboard do you use? That keyboard sound made me feel things.

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    Keychron Q1 Max

  • @coderXplus1680
    @coderXplus16802 ай бұрын

    So cooll

  • @tanavposwal
    @tanavposwal2 ай бұрын

    Now he jumped in full stack world

  • @dimasarestu2043
    @dimasarestu20432 ай бұрын

    Fastapi + react or django ninja + react pls ❤

  • @robertwhite8194
    @robertwhite81942 ай бұрын

    would it be smart to make a virtual environment for installing the Python libraries?

  • @TechWithTim

    @TechWithTim

    2 ай бұрын

    Yes!

  • @harshkashyap8372
    @harshkashyap83722 ай бұрын

    should explain using drawing.

  • @jayant9416
    @jayant94162 ай бұрын

    nice tut although