FastAPI Tutorial #8: From Scratch! Build a React (Vite) & FastAPI E-commerce App (Full Tutorial)
Master the art of connecting React to FastAPI! In this comprehensive tutorial, we'll build a complete e-commerce application, integrating a Vite React frontend with a powerful, pre-existing FastAPI backend. You'll learn how to perform essential CRUD operations on Users, Categories, Products, and Reviews, and create both a dynamic Customer View and an interactive Admin Panel.
Backend Code for FastAPI:
https://github.com/GuptaKshitiz/FastA...
Frontend Code for React(Vite):
https://github.com/GuptaKshitiz/FastA...
Steps to initiate React(Vite) Project
npm create vite@latest ecom-app -- --template react
npm install axios for asynchronus operations
npm install react-router-dom for routing from inside the application
00:00 Introduction
02:48 FastAPI App Backend Setup
07:41 What Is CORS
11:41 Database Reminder
16:40 FastAPI Docs
17:59 React With Vite Setup
23:36 Allow Frontend URL To FastAPI
25:05 React Application Development
40:41 How To Use useState
44:08 React Admin Page Development (Part 1)
45:08 How To Use props
48:18 React Admin Page Development (Part 2)
53:13 How to Integrate API in React
01:03:19 How to Use useEffect
01:06:55 React Admin Page Development (Part 3)
01:18:41 Route Admin Page from App.jsx
01:36:33 React Customer Page Code Explained
01:40:09 Route Customer page from App.jsx
What you'll learn in this video:
Cloning the FastAPI Backend: Get started quickly with an existing FastAPI e-commerce project.
Understanding & Implementing CORS: A deep dive into Cross-Origin Resource Sharing (CORS) and how to configure it in your FastAPI application.
Running Your FastAPI Server: Essential steps to get your backend up and running.
React Project Initialization: How to kickstart your React app with Vite and npm commands.
Modular React Development: Best practices for structuring your React application for scalability and maintainability.
Asynchronous React with Axios: Efficiently handle API calls using the Axios library.
Seamless API Integration: The best strategies for connecting your React frontend to FastAPI endpoints.
React Fundamentals in Practice: Detailed explanations and examples of useState, props, and useEffect for building a responsive and user-friendly UI.
Project Features:
Customer View: Browse all available categories and products fetched directly from the FastAPI backend.
Admin View:
Dashboard displaying counts of total categories and products.
"Add Category" button: A popup form to create new categories via FastAPI API, updating counts dynamically.
"Add Product" button: A popup form to add new products with detailed information using FastAPI API.
All data added via the Admin view is immediately visible in the Customer view!
Get ready to level up your full-stack development skills!
🔗 Resources:
** Series Playlist **
▶️ Watch the full FastAPI Tutorial Series: • FastAPI Tutorial
◀️ Watch Part 7a: • FastAPI Tutorial #7a: FastAPI's SECRET to ...
◀️ Watch Part 7b: • FastAPI Tutorial #7b: Master Async Session...
◀️ Watch Issue Debugging: • FastAPI Backend Errors: Greenlet, SQLModel...
#react #fastapi #fullstack #webdevelopment #python #javascript #crud #api #apiintegration #ecom #vite #axios #cors #frontend #backend