Build a Python FASTAPI React Full Stack App with AI

Share

Summary

Learn how to build a full-stack application using FastAPI in Python, JavaScript, and React, including databases, AI integrations, backend and front-end communication, API design, deployment, and best practices.

Highlights

Using an LLM as part of back end
02:53:08

The configuration change to call the correct parameters. He tries, but runs into too many API calls.

How to make a platform on Coro
03:00:32

How to do a front end connection, the platform to be added to be used by AI. The basic platform and platform configurations.

How to load resources on Coro
03:07:45

How to import resource and how the data is called for data integration.

Getting credentials from outside of local env
03:12:13

How to make the call for resources from non manual resources using env api. That way there os no extra copy/paste for the backend system.

Connect and create endpoint for services created
03:17:43

Shows a new connection added that is using API for the end points. It shows how it's added then how it will connect. It goes through the error and shows the fix.

Test and deploy front end
03:20:40

Shows front end for api testing and and how it should run.

Deploy a database
03:22:42

How to deploy a database, such as mySql. It goes through the process of where the integration should all be configured.

Introduction
00:00:00

The video introduces a tutorial on building a full-stack application with Fast API, Python, JavaScript, and React. It covers databases, AI integration with LLMs, backend and front-end communication, API design, and deployment. Targeted at intermediates, it requires some Python and JavaScript knowledge.

Demo of the Application
00:01:00

A demo of the "choose your own adventure" game is presented. Users can input a theme, and the AI generates an interactive story with branching paths and choices. The generated story is shareable via a unique URL.

Technology Stack and Deployment Platform
00:02:54

The video transitions to discussing the backend complexity and front-end coding aspects . It mentions Coro as the free platform for deployment, referencing a previous Django and React tutorial.

Setting Up the Backend Project
00:03:34

The tutorial begins coding the backend using PyCharm, recommending it for Python projects. It involves creating a backend directory and utilizing UV, a package manager, to initialize the project and install dependencies like FastAPI, Langchain, python-dotenv, SQLAlchemy and psycopyg2-binary for Postgres connection.

Creating Backend File Structure
00:07:54

The video details creating the folder and file structure for the backend, including folders for core operations, database, models, routers, and schemas, along with an .env file for storing credentials.

Defining the FastAPI Application
00:14:21

The tutorial defines the FastAPI application in main.py, importing FastAPI and CORS middleware. It configures the app with a title, description, version and documentation URLs, and sets up CORS to enable cross-origin requests.

Configuring Environment Variables
00:21:35

Environment variables such as database URL, API prefix, debug status, allowed origins, and OpenAI API key are created in the .env file. Loading and parsing the configs from the .env file is implemented in core/config.py with pydantic.

Defining Database Models
00:28:23

The video shifts to defining database models using SQLAlchemy. It starts with defining the data structure for a 'Story' and a 'StoryNode', as well as a 'job' to track the creation status in models/story.py and models/job.py. The database connection is initialized in db/database.py.

Defining Schemas for API Data
00:46:49

The video explains schemas used for defining API request and response data types using Pydantic. Demonstrating this using the story and job schema creations.

Implementing API Routes (Stories)
00:55:57

The implementation of the API routes in routers/story.py, such as '/create' for story creation and '/{story_id}/complete' for retrieving a complete story, is covered. This involves using FastAPI's APIRouter, dependency injection for session ID and database access, and background tasks for handling long-running story generation. Code for generating story tasks is still subject to updates to incorporate models and OpenAI integration.

Implementing API Routes (Jobs)
01:17:02

In routers/job.py the API endpoint for retrieving the current status of a job by its id is implemented.

Testing API and Fixing Bugs + Model Generation
01:19:56

The endpoint for returning an error during debugging. It then is fixed and the AI model for generation is added.

Creating AI Model Prompts
01:27:09

AI system prompt for creating the stories, setting guidelines for creative story writing and engaging with the system.

Generating Stories
01:28:53

Writing a class that generates the stories that the user inputs. From adding an importing of core configs, langchain imports etc. Has to debug as part of video.

Codebase Models
01:30:30

Creates an addition pyantic model that is required for loading LLM data.

Updating API to generate stories
01:41:49

Shows where the current generated task should be replaced with the the previous models created. It is very hard to fix the code while filming.

Backend Done, moving to FE
01:53:03

Explains how to fix any existing bugs, but then that the front end is fairly simpler.

Frontend Initial Setup
02:03:43

Begins with the front end, how to clear app.jsx, what needs to be done to bring in the axios, etc.

Creating Components in React
02:05:05

Showing how the new component structure looks like from loadingStatus.jsx to loading more.

Loading Status Component
02:07:02

Shows a simple code block for the loading status.

Adding CSS and the themeInput
02:08:31

Adds CSS to the various componets, and how it can be found in the git repository. Then is added to the themeInput.

Setting the API base
02:14:40

Tells how the url setting is done, and how it needs to import it as well.

Story Loader Functionality
02:16:56

The use statement that does the actual loading process.

Story Game Development with Router.
02:23:45

Codes how to link it between that is being done with is winning or loss type states which affect rendering.

React Routing Initial
02:31:52

Adds from components related to where the project needs to be, and how those can be connected during setup.

Setup VITE Config for server and proxy
02:34:04

The VITE config is setup, that shows setting for a production or local proxy server is setup.

Core Initial setup
02:43:58

Codes for the intial backend configuration such as version, security type and then database integration model.

API bug test with VITE refresh
02:49:57

The VITE refresh shows a bug, shows how to fix the error within the js file.

Recently Summarized Articles

Loading...