Build Full Stack Web Apps in Pure Python with Reflex - No Javascript Required

[@CodingEntrepreneurs]

Thanks for watching! The code is here: github.com/codingforentrepreneurs/full-stack-python The chapters are: 0:00:00 Welcome 0:02:53 Demo 0:12:34 Getting Started with Full Stack Python 0:20:05 Dynamic Content and on_click Events 0:25:17 HTML Inputs for Dynamic Content Changes 0:31:08 Building a Custom Reflex Component 0:39:25 Using the Navbar Recipe 0:43:47 Better Code Management 0:46:37 Identifying Rendered Components in the Browser 0:53:16 Full Width Navbar and Content 1:04:13 Pages and URL Routes 1:08:03 Using Link-based Navigation 1:13:43 Click Events and Reflex Redirect 1:17:21 URL Route Path Constants 1:21:43 Navigation State 1:28:07 Contact Form 1:33:53 Making the Form Responsive 1:40:40 Conditional Rendering in Reflex 1:47:43 Refresh State with Python Asyncio Timeouts 1:49:32 Counting with Asyncio and Reflex 1:53:55 Your First Database Model 2:02:51 Storing Data with Models and Forms 2:09:44 Model Field Changes and Migrations 2:12:15 Adding a DateTime Field 2:17:05 Decouple the Contact Page, State & Model 2:26:49 Listing Stored Database Entries 2:36:49 New Data Model 2:43:24 State for Listing Blog Post Data 2:46:29 List View Route for Blog Posts 2:53:37 Dynamic URL Routing for Detail Pages 3:01:27 Form, State, and Page for New Blog Posts 3:11:41 Editing Pre-Filled Form Input Basics 3:18:47 Edit and Save Database Data 3:31:15 Edit Link & Detail Page Updates 3:35:30 Blog Post Redirect and Urls 3:42:26 Publish Date Toggle 3:51:36 Publish Date Field 4:01:45 Narrow Results with Database Queries 4:07:03 Users with Reflex Local Auth 4:12:30 Customize Login and Register Pages 4:18:22 Extending the Reflex Local Auth User Model 4:22:07 Customize User Registration for Related Model 4:27:15 User SessionState Object 4:34:13 Fixing Registration Bug with Extended Model Data 4:37:20 Creating the Dashboard & Sidebar Layouts 4:47:22 Sidebar Toggle Button and Color Mode Condition 4:54:05 User Dashboard & Logout User 5:05:40 Display Logged-in User Info 5:16:26 Multiple Ways to Associate Users to Data Models 5:28:32 Rendering Related Data 5:38:36 Foreign Key Relationships & The Models Module 5:49:57 Saving UserInfo ID to Related Models 5:58:22 Loading Related data with sqlalchemy `joinloaded` 6:05:24 Managing My Blog Posts 6:13:20 Require Login Decorator 6:14:50 Public Articles Display 6:28:41 Limited Data Results on Dashboard and Landing Page 6:45:22 Theme and Color 6:55:26 Thank you and next steps

[@danieldesenna7611]

I think something went missing between chapters: 2:46:29 List View Route for Blog Posts and 2:53:37 Dynamic URL Routing for Detail Pages. The files blog/add.py and blog/forms.py just appear without you showing their development.

[@danieldesenna7611]

It seems the correct order of the chapters would be: [...] 2:46:29 List View Route for Blog Posts 3:01:27 Form, State, and Page for New Blog Posts 2:53:37 Dynamic URL Routing for Detail Pages 3:11:41 Editing Pre-Filled Form Input Basics [...] @CodingEntrepreneurs can you check this and maybe add an observation to the video description? It was really confusing watching these chapters as they were, it seems, not in the correct order. Thanks!

[@FranciscoAMZ]

just a small observation regarding the video edition, 2:53:37 Dynamic URL Routing for Detail Pages, it should come after 3:01:27 Form, State, and Page for New Blog Posts, in addition to that for now it has been an excellent help in learning Reflex, thank you

[@chyngyzmonokbaev7548]

My career started with your videos like 7 years ago. Thank you for the best python tutorials.

[@CodingEntrepreneurs]

Amazing! Thank you for sharing

[@judyasem1293]

Hi ,I am new to python I really want to be very good as well ,could you mentor me

[@conan7647]

I was waiting for someone to make a tutorial on reflex Thanks🎉

[@HGLabs-s7k]

I'm 2 hours in and I gotta say man, what a beast of a tutorial. This is really comprehensive. I hadn't heard of reflex before seemed like a cool concept. But, I'm still on the fence. I love the idea of using a single language to handle everything front and backend, I really do. And python really is quite convenient. It's also massively easier to debug than Javascript which tells you basically nothing and just lets you simmer. But at the same time, I feel like this takes away a lot of the inherent flexibility and customization that plain Javascript and CSS offer. Sometimes messing with components can be a bit fiddly and you need to find workarounds .I found myself messing around for 30 minutes on a simple styling issue that I'd solve in 2 minutes of CSS. Now, I'm just starting out. But I also feel like this won't give you the pinpoint accuracy of Javascript in terms of animating elements or different parts of elements. For example, if I want to animate a single letter in a word, I can do that pretty easily in Javascript, set the timing properly, the animation style and make some really cool looking frontends. The problem with pre-built components is that it comes with a bunch of pre-packaged html and css which can sometimes end up fucking up what you want to do, causing conflicts and unintended behaviour which takes ages to iron out. This is a problem inherent to all component libraries and frameworks. I often find it just much faster to work with vanilla until I really need to bring in a component library. And overriding some styles or behaviours of, for example, a bootstrap component is really straightforward. You go in, change the JS, change the CSS and voila. Problem here could be much more problematic as there seems to be no easy way to directly access the CSS and JS through reflex which could in turn shoehorn you into certain styles and layouts / animations. But again, I'm only 2 hours in and those are just initial impressions. I might be completely wrong. Overall though, really, props to you. This tutorial clearly took a lot of hard work to make, it's well presented, it's well paced, and it's very comprehensive. Thank you for this!

[@CodingEntrepreneurs]

Thank you. this is great feedback. I am a bit torn too. Reflex is awesome but so is JavaScript. From my many talks with the Reflex team, they are doing everything possible to make Reflex the go-to for full stack interactive development. I'm pretty sure you can still use pure JavaScript with reflex, I just didn't find a good enough need to do so since so many things are well thought out already. That said, I bet the Reflex team would love to hear your feedback.

[@bacharsaleh6984]

Python is incredibly powerful. It would be fantastic to see a project where Next.js and Python work together in an advanced architecture.

[@smotbutterman1127]

This framework already does that. Unless you want to have a nextjs frontend and a python backend.

[@CodingEntrepreneurs]

A tutorial on Django + Next.js is in the works.

[@ivoclaps3980]

More of this, please! I absolutely love your work! Keep it coming! 🙌

[@Dotcomrie]

GREAT CONTENT! Thanks to you I'm going to be able to create a sick web application for myself and my wife. FYI, for anyone confused starting around 2:51 the section on "Dynamic URL Routing for Detail Pages" is out of order. It should be after the "Form, State, and Page for New Blog Posts", not before. it should go ... "list view route for blog posts" -> "Form, State, and Page for New Blog Posts" -> "Dynamic URL Routing for Detail Pages"

[@judevector]

I am still in your Django video and I came in today to see this , I shouted 😮 WTF . Thank you so much for doing this

[@CodingEntrepreneurs]

Yeah!! Nice

[@CodingEntrepreneurs]

I’ve got a lot of good stuff in the pipeline

[@shubham3937]

​@@CodingEntrepreneursroll it down already xD. Btw you got a new subscriber 🔥

[@senlee325]

This will be my next project to try out. Thank you!

[@CodingEntrepreneurs]

Amazing!

[@jaymartinez311]

Talk about a full video 😂. Better than a 10 minute video voicing your opinion. Great job 💪🏾 and much appreciated. Very swiftui like 👍🏾 ok ok reflex is cooking as i’m looking through the docs. Using runtime types and everything. Ok ✅. From the docs: In Reflex only the frontend compiles to Javascript and runs on the user's browser, while all the state and logic stays in Python and is run on the server. I like that the backend stays in python.

[@CodingEntrepreneurs]

Reflex is cooking ✅

[@vakhtang_vakhtangishvili]

How does Reflex compare to frameworks like django? Not in a sense that you can make the frontend in python as well but more like how django is reliable and scalable and often a go to option for various sized platforms. What are the tradeoffs?

[@CodingEntrepreneurs]

These are good questions. I think Django is much further along in development (given its age and community support) so it’s not exactly an apples-to-apples comparison. Reflex does the UI unlike anything I’ve seen including a lot of JavaScript libraries. How Reflex handles state that affects the front end and backend is pretty great. Django’s built-in auth, admin, models, form validation, all the third party packages, hosting provider support, give it the edge from my view. The thing is, you can actually use both since Reflex can call any API.

[@CodingEntrepreneurs]

The Reflex team is actively learning from other frameworks and seeing how it can fit in with theirs. The other part that’s interesting is you can turn react components into Python with reflex. That’s pretty great if you ask me.

[@wrt3778]

Duuude! Love the energy and the content. Great job.

[@CodingEntrepreneurs]

Thank you!!

[@spotnuru83]

Just amazing, finished it now, I see that this helps a lot for those who doesnt want to worry much about front end dev in java script and yet get the react js based output. Hoping to see more examples on authorization , building good looking apps, how does reflex maintain along with the ReactJS Updates

[@chrihan]

Excellent stuff. Great job. It can lower the barrier not only for the beginners but for MVPs as well. How much muture the framework is right now is the question to find out....

[@CodingEntrepreneurs]

Definitely. There has been significant work on the framework and it continues to improve. Give it a try

[@chrihan]

@@CodingEntrepreneurs indeed

[@annonymoususer7672]

This is game changer for python full-stack!

[@CodingEntrepreneurs]

💯

[@wafiqhosain5713]

"No JavaScript is required" :- it hurts.

[@CodingEntrepreneurs]

Unless you don’t know JavaScript…

[@paolo-e-basta]

it's not required but you can wrap your react components if you want

[@coderfek]

Makes me way more happy. Cope

[@verytuffcat]

​@@coderfekthere isnt much to cope about. why are you being so rude? saying to someone to cope cuz of your incompetency in learning a new language? (i know im also watching this vid but im NOT saying to someone to cope)

[@edmundob.guevarra9565]

"No JS required" is absolutely therapeutic.

[@specialnwachukwu7031]

Wow, this is amazing. I have wanted a video like this for a while now, thou i haven't watched this but judging from the other videos i have watched on your channel, i know this will do just fine. I will also love a video on Flet. Thanks in advance.

[@p4u1ro13]

de lo mejor que he visto, no se puede explicar mejor, no hay mucha información de reflex, se aprecia y se valora mucho la enseñanza, muy agradecido maestro :)

[@jmcl24]

Thank you so much for this video. It was a big hit for you Justin Mitchell and for all of us who have seen this video.

[@sadiulhakim7814]

You are doing some good stuff for python community. Thanks

[@Stephan106]

This might just solve a lot of my JavaScript problems

[@CodingEntrepreneurs]

Reflex is very impressive. Let me know what you think

[@captainofthewhitetower]

Hey man, is it better practice to use JS and get data from it and send it to python? Also can I make a web app into a desktop app?

[@krittaprottangkittikun4190]

Hello, I am such a fan, thank you for doing this! Btw, any chance you will publish a video on how to deployed the application made with Reflex?

[@federicoferraro7761]

Excelent Tutorial ! Congrats !

[@ipelezikis]

So much work and so great content!! Huge respect!

[@darvat]

The section "Form, State, and Page for New Blog Posts" should be before "Dynamic URL Routing for Detail Pages". It's currently not in the right order.

[@adhiwibowo145]

this help me a lot to understand the video

[@thinkingcitizen]

saving this to my watch list !

[@CodingEntrepreneurs]

🎉

[@ramizzik]

Dude this is so good. Thanks!

[@degs182]

Before i watch and learn this, is this for beginners? Is ot explained enough where i can follow? Ive basic python but now want to get into web dev Thanks in advance

[@python-c2x]

is not

[@khalilgaming-d6c]

is django +fastapi a possibility? for the performance perspective api etc we use fastapi , and the rest of structure from django?

[@CodingEntrepreneurs]

Check out Django-ninja

[@annyd3406]

Ngl you kinda give Liver king vibe sometimes !!! But cheers to the content!!

[@Dotcomrie]

🤣

[@_vk03]

Just one really really i.portant question. What about benchmarks? Can I use it to replace react or next js? I mean in terms of speed is this similar to next js or react for frontend interactions?

[@franciscoletelier5598]

This video its a challenge bro. Tks for your time to create this content 😊

[@yayusuwardi8934]

Great tutorial, I have question, how to connect to multiple database in reflex?

[@CodingEntrepreneurs]

Like SQL databases? For what purpose?

[@yayusuwardi8934]

@@CodingEntrepreneurs yes SQL databases, for example Employee information [store: employee info such as department, addressess, handling project info, etc] stored on database 'A' and Production information [store: spare part item, supplier, retailer info etc] stored on database 'B'. while databases A and B are on different servers

[@TalhaKhan-ne1dk]

Amazing tutorial. That's what I was looking for. Thanks 😊 By the way, Is there any way to deploy the app using ngnix on an Ubuntu server?

[@maxpower6730]

Hello, this is the first video i watch from your channel and i just started an ibm course about software developer, but i have a lot of experience in python should i keep with this video or do both? Thank you

[@CodingEntrepreneurs]

If you have a lot of experience with Python, this should be right up your alley. If you’re new to Python, you should probably know how to do classes and functions and variables at minimum

[@maxpower6730]

@@CodingEntrepreneurs i have experience in data science but i want to also learn development, i will learn reflex, thank you so much :)

[@memor1481]

How can I cancel or stop the reflex process in the comand terminal???

[@CodingEntrepreneurs]

Control+C

[@tomwawer5714]

Yay so cool. There is a GPT look for reflex buddy

[@elrickhuang6864]

Is that possible to have rich text editor in reflex?

[@sterling3419]

First of all, your videos are really awesome and informative and thank you for giving so much. I recently learned django and I'm currently looking to create a website like udemy and I'm a bit confused on the best way to structure the video system. Like where to store it, how to serve it to html, how to control the bitrate so different resolutions can be chosen and how to implement to integrate it into the html. I've checked around but I'm still confused. Please can you spare some time to clarify this, thank you. Sorry if the answer to this is obvious, I'm not really a web developing expert yet😅

[@CodingEntrepreneurs]

I have a course coming up on how to create and host your own courses. I think that will answer your question. 👍 thanks!

[@anthonyoforiakotey8000]

@CodingEntrepreneurs Good work done 👍👍... But you speaking very fast.... We the beginner....😊😊😊 But you have done a great job...

[@CodingEntrepreneurs]

Thank you!

[@hazed69]

Great stuff man, love you ❤

[@armantgold]

So the browser can read and run straight python code? We dont need JavaScript anymore?

[@xsova113]

I’m guessing the library transpire / bundle up those python code into html/css/javascript.

[@RONALDOCR-fs2dv]

bro can you make a video on sockets and how to use it backend for building a live application or games

[@EricDeng-q2f]

I want to connect to MySQL, but I don't know how to write the db_url

[@CodingEntrepreneurs]

Look up MySQL connection string, I think that’s how

[@오도원공육사-m9o]

cannot does reflex input function use browser warning message? if I use rx.html(""""""), that show browser toast warning message. but rx.input did not. is it unsupported in reflex?

[@maheshpol20]

is Relfex comes with django like admin pannel?

[@CodingEntrepreneurs]

Not yet but there are a number of tools that help you manage databases similar to Django admin

[@alexdarahan]

During this course after introducing that asyncio method for countdown on page -> I faced with an issue that my project stops compiling at 16%... it just stuck. I've tried to figure out what's going on -> stackoverflow says that 3.12 python version is a reason , however I tried 3.9.2, 3.9.20, 3.12.2, 3.12 - it just not compiling at all. Any advice what can be done ? I also tried to fully start project from scratch -> init reflex run it -> it works -> then I add code written before into project and it stops compiling as before ... Any ideas what else I can do? Thanks in advance

[@alexdarahan]

reflex version 0.5.10 python version (current) - 3.12.2

[@alexdarahan]

tried on macbook pro MV902 (Intel based) tried on macbook M1Pro (Silicon based)

[@alexdarahan]

no one?

[@Gelozo]

Oh my God!!! Finally I got rid of javascript, thanks!

[@CodingEntrepreneurs]

😂

[@imranahmed5524]

Built with REFLEX . its still there . is there any way to remove this watermark ?

[@CodingEntrepreneurs]

At the bottom? Yes, rx.logo() just remove that

[@conan7647]

How are you so good in this!!!!

[@ytsinaunen]

Is that better than Django and PyScript? The data rendering looks so fast, is that for real, bro?

[@giftcp82]

will reflex replace Django. It seems it is covering most of the things that Django can do

[@paolo-e-basta]

except Reflex is a new product compared to Django which is battle-tested. The sad reality is that I had hoped Django would move towards frontend integration over all these years, without us having to move to a new framework like Reflex (which, by the way, looks very cool). But Django has always refused to make any progress on this side and has remained focused solely on the backend. I'm not happy at all with that.

[@shivamkumar-qp1jm]

Is it SEO friendly

[@txfalkon2882]

awesome man

[@sytekd00d]

What are your thoughts on Reflex vs HTMX/Alpine.js?

[@zeroinfinity3610]

please please please, we need more reflex project realted to AI, & LLMS. using open source llm s from hugging face & with deployemnt. How to integrate vector database also..

[@derrickk45]

How can u host

[@CodingEntrepreneurs]

That is something we need to cover for Reflex! Anyone else agree?

[@RealLexable]

​@@CodingEntrepreneurs Fully agree

[@gohjennyang]

Yes please!

[@danieldesenna7611]

@@CodingEntrepreneurs yes, please!!

[@alnuaimi5155]

Which is better reflex or flet ?!

[@CodingEntrepreneurs]

Reflex is my vote!

[@SolidBuildersInc]

Oh Yes, Thanks for sharing... Streamlit Mesop Anvil But this might be a Game Changer. How is it Deployed? 😊

[@CodingEntrepreneurs]

Good question! Reflex has a built-in option but perhaps I need to make another video covering deployment.

[@danieldesenna7611]

@@CodingEntrepreneurs yes, please!! 😁

[@matiasbg8747]

THIS IS PYTHON (SPARTA)!!!!!!

[@alisinasultani]

"Your project is truly inspiring! The creativity and effort you've put into it are commendable. Thank you for sharing such valuable content with us." Sir which Font are you using in your terminal and vscode?

[@CodingEntrepreneurs]

Thank you! I’m not sure what font actually. I’ll try to remember to look soon.

[@AshokSharma-hk1jc]

Can you please add a video to use this with django ❤

[@andrewlu8432]

Very nice!

[@djangoespanol2403]

Pueden alguien decir me por renderiZa tan lento? Eso es un serio problema para mi que uso react , blazor. Deberían resolver eso

[@kumargupta7149]

Thank you ❤❤❤❤❤❤❤❤

[@BinZhang-y2y]

Good tutorial of reflex. thanks. Just one suggest, could you create different branch for each chapter that developer easy understand how a project is completed?

[@CodingEntrepreneurs]

Thanks! Should be a different commit for each chapter

[@CodingEntrepreneurs]

git log git checkout

[@lightofor8206]

Thanks, I just want to focus on my python, css drives me nuts

[@johnmahugu]

Brilliant!!!

[@mawkuri5496]

can you make a flet tutorial please both mobile and web app.. way awesome than reflex

[@vagrant_ijn]

If only Reflex was for Desktop applications

[@kayodeadechinan5928]

You can wrap your reflex app into something like "electron" by giving it the "url", and then generate a desktop build.

[@Asmrprogrammingfull]

Thank 🎉🎉

[@CodingEntrepreneurs]

Welcome 🎉🎉

[@AntonioOliveiraFM]

thank you

[@nadetdevfullstack7041]

Excellent

[@harshayyy9]

Now next video on next hs full stack olease

[@CodingEntrepreneurs]

You want Next.js full stack?

[@harshayyy9]

@@CodingEntrepreneurs yes sir

[@giftcp82]

Now am confused, Reflex, Django, or Pynecone

[@CodingEntrepreneurs]

Pynecone is now Reflex. Reflex is a new framework with a heavy emphasis on ease of UI. Django is a mature framework that doesn’t have opinions about UI. In fact you could integrate Reflex with Django if Django was just the Rest API. I really like Reflex and where it’s headed but I still love Django.

[@giftcp82]

When you are able please share a video on reflex django integration

[@marcelo.victor]

Well, every programming language will die one day, but no Javascript! 😂

[@sandangmakmur4475]

Can you make python flet

[@itscooldawgdonteventrip]

nah stay with dart the tooling everything is already done and backed by Google. nah. don't waste your time on python flet my friend.

[@abdulrahmangbenga7347]

​@@itscooldawgdonteventripWhy

[@abhisheksanjaygawade1479]

1st Comment !

[@CodingEntrepreneurs]

Did you beat me?! Nice one

[@ericxls93]

nothing on deployment? Posters guides pls. Reflex hosting is not an option.

[@CodingEntrepreneurs]

Coming sooooooo soon

[@ericxls93]

Great stuff, thank you!! Do more on reflex, it’s great… nice to see more, editable tables, drag and drop, forgotten user password…

[@python-c2x]

love it but you were going fast

[@Eternam]

this is like flet porting flutter for python.

[@cbbcbb6803]

Linux?

[@-CSE-ArnabSannigrahi]

The loading time of reflex is too bad

[@setyoufree2726]

There are too many framework right now which is actually confusing.. is it created by genius just to kill their spare time? Normal people drink coffee and play gadget during spare time. The genius created framework only for fun. 😂

[@Simplifieddeeplearning]

hello sir you jump into the code without explaining the basic concept. no nice explanation for beginner it huge me. you known what redo the video and explain for beginners .

[@paolo-e-basta]

afaik, Justin already did other videos for basic concepts. Maybe have a look at those first? I wonder what kind of "nice explanation for beginners" you would need. It seems to me this video about Reflex is very beginner-friendly.

[@engineer0111]

Get a job as a Delivery driver.

[@Dotcomrie]

This is what i'm currently doing while i study, but next year i'll get a dev job...hopefully.

[@nikhilsathe5956]

It's good but it's alot slow...

[@koreanpubg1708]

lol.. python on webapps is just forceful.! i am fullstack web developer and have been using node, next/react, for 2 years and recently changed company where they use django for backend.. and it is just sooo not required.. express is so enough for any kind of webapps.. just apps where data is huge pandas and other libraries from python is useful, other than that server functionality wise node is enough for anything..

[@judyasem1293]

Hii ,I need someone to help me become a full stack developer ,I have being wandering for long

[@Dotcomrie]

Has anyone else gotten this error? It showed up after implementing the section on "Editing Pre-Filled Form Input Basics"? kzbin.info/www/bejne/f4Wyi56wn9mdi6M I have been getting this TypeError: Invalid var passed for prop NextLink.href, expected type , got value reflex___state____state__full_stack_python___blog___state____blog_post_state.blog_post_edit_url of type typing.Any. I know that it's because the one of the blogstate objects isn't passing as string as it should be. But I still haven't figured out how to fix it and move on.

[@Tololeiro]

thank you, thank you and thank you for this! I'm still in the process of watching the whole video, but you have enlightened me LOTS. Comment thou: on Listing Stored Database Entries (kzbin.info/www/bejne/f4Wyi56wn9mdi6M), I was receiving an error "No JSON serializer found for var". I fixed it by changing session.exec(select(ContactModel)).all() to session.exec(ContactModel.select()).all()