Summary
Highlights
The configuration change to call the correct parameters. He tries, but runs into too many API calls.
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 import resource and how the data is called for data integration.
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.
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.
Shows front end for api testing and and how it should run.
How to deploy a database, such as mySql. It goes through the process of where the integration should all be configured.
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.
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.
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.
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.
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.
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.
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.
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.
The video explains schemas used for defining API request and response data types using Pydantic. Demonstrating this using the story and job schema creations.
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.
In routers/job.py the API endpoint for retrieving the current status of a job by its id is implemented.
The endpoint for returning an error during debugging. It then is fixed and the AI model for generation is added.
AI system prompt for creating the stories, setting guidelines for creative story writing and engaging with the system.
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.
Creates an addition pyantic model that is required for loading LLM data.
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.
Explains how to fix any existing bugs, but then that the front end is fairly simpler.
Begins with the front end, how to clear app.jsx, what needs to be done to bring in the axios, etc.
Showing how the new component structure looks like from loadingStatus.jsx to loading more.
Shows a simple code block for the loading status.
Adds CSS to the various componets, and how it can be found in the git repository. Then is added to the themeInput.
Tells how the url setting is done, and how it needs to import it as well.
The use statement that does the actual loading process.
Codes how to link it between that is being done with is winning or loss type states which affect rendering.
Adds from components related to where the project needs to be, and how those can be connected during setup.
The VITE config is setup, that shows setting for a production or local proxy server is setup.
Codes for the intial backend configuration such as version, security type and then database integration model.
The VITE refresh shows a bug, shows how to fix the error within the js file.