Code a frontend and backend in under 1 hour

  Рет қаралды 841

Shawn Pitts

Shawn Pitts

Күн бұрын

🔥 Building a Full-Stack App in React.js and Flask (Python) in Under 1 Hour!
In this tutorial, we'll cover:
Setting up a new React.js project using Create React App.
Creating components and organizing our frontend application.
Making API calls from React.js to our Flask backend.
Implementing a Flask server to handle API requests.
Connecting our React frontend to the Flask backend.
By the end of this video, you'll have a functional full-stack application where the frontend communicates with the backend to fetch and display data.
⏱️ Timeline:
0:00 - Introduction
1:25 - Project Overview
2:50 - Language Install
4:49 - Project Setup
5:34 - Backend
14:31 - Frontend
28:19 - Axios / Async
30:43 - Handling State
32:54 - Handling CORS
37:03 - Building Roster Table
👨‍💻 Tools Used:
React.js
Flask (Python)
Axios (for API calls)
VS Code (code editor)
🚀 Prerequisites: None :)
📂 Project Structure:
frontend/ - React.js frontend
src/ - React components
public/ - Static assets
backend/ - Flask backend
app.py - Flask server and API endpoints
🔗 Resources:
React.js Documentation: reactjs.org/docs/getting-star...
Flask Documentation: flask.palletsprojects.com/en/...
Axios Documentation: axios-http.com/docs/intro
Let's dive in and build this awesome full-stack application together in less than one hour! Make sure to like the video if you find it helpful and subscribe to the channel for more web development tutorials. Happy Learning! 🌟

Пікірлер: 8
@xlittlep
@xlittlep Ай бұрын
Lots of great stuff here. Step by step for absolute beginners, but as a backend Python developer who's looking to build a front-end for a personal project, I learned everything I need to get started. Thank you!
@EngineeringWithShawn
@EngineeringWithShawn Ай бұрын
Im glad it helped!!!! If you have any ideas on what youd like to see more of im all ears
@primal1585
@primal1585 Ай бұрын
this is actually so good, ive never felt so good for hitting subscribe, great work! keep at ti
@EngineeringWithShawn
@EngineeringWithShawn Ай бұрын
This made my day! Thank you
@JaceFreeman3
@JaceFreeman3 Ай бұрын
Thank you for this❤
@EngineeringWithShawn
@EngineeringWithShawn Ай бұрын
You're very welcome 😊! I hope it helped
@danielkamau8436
@danielkamau8436 27 күн бұрын
Good work there, But I wish your provided the link to github or where you stored the code, For some reason I have done all the code like should be but only the Table Name populating and table rows not populating for some reason. I have spent sometime trying to debug the issue in vain
@EngineeringWithShawn
@EngineeringWithShawn 26 күн бұрын
Dan! You know what? thats good feedback. I honestly wrote a lot of code in realtime as I recorded the video 😂. Ill upload to github later on
Learn Web Development And ACTUALLY Get A Job | Ultimate Guide
1:33:52
James Cross
Рет қаралды 1,2 МЛН
APIs for Beginners 2023 - How to use an API (Full Course / Tutorial)
3:07:07
freeCodeCamp.org
Рет қаралды 1,8 МЛН
Watermelon Cat?! 🙀 #cat #cute #kitten
00:56
Stocat
Рет қаралды 33 МЛН
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 39 МЛН
$10,000 Every Day You Survive In The Wilderness
26:44
MrBeast
Рет қаралды 138 МЛН
5 Good Python Habits
17:35
Indently
Рет қаралды 374 М.
The Practical Guide to Kubernetes
23:57
Shawn Pitts
Рет қаралды 80
Python + JavaScript - Full Stack App Tutorial
1:29:25
Tech With Tim
Рет қаралды 163 М.
FASTEST Way To Learn Coding and ACTUALLY Get A Job
10:44
Brian Cache
Рет қаралды 935 М.
Web Scraping the MLB
21:54
Shawn Pitts
Рет қаралды 373
Web Developer Roadmap (2024) - Everything is Changing
25:02
ByteGrad
Рет қаралды 278 М.
How to Build An App in 30 minutes
34:20
Shawn Pitts
Рет қаралды 217
Mi primera placa con dios
0:12
Eyal mewing
Рет қаралды 719 М.
wireless switch without wires part 6
0:49
DailyTech
Рет қаралды 4,4 МЛН
5 НЕЛЕГАЛЬНЫХ гаджетов, за которые вас посадят
0:59
Кибер Андерсон
Рет қаралды 1,6 МЛН