Build A TodoList with Python, FastAPI and React

Learn to create a FastAPI project by installing Python and Poetry, set up a virtual environment, and add FastAPI with dependencies, including tortoise orm and asyncpg for PostgreSQL.

Run a FastAPI project using poetry: create main.py with a FastAPI app, add a get route returning hello, world, and resolve import errors by pointing to the correct virtual environment.

Create Tortoise ORM models for the app, defining an id field and a to-do model with a character field of max length 255, and import fields and models for serialization.

Register the Tortoise ORM with FastAPI by configuring the database URL, importing models, and enabling generate schemas with exception handlers to migrate your data.

The lecture shows creating a todo through a FastAPI post endpoint, with an async create function that takes a todo object, serializes it, and returns a response model.

Create an async get endpoint in FastAPI to fetch all todos or a todo by id, using a pedantic response model with exclude read only and unset.

Learn to implement a put request that updates todos in FastAPI, define update parameters, exclude the id from the update, and return the updated todo via the response model.

implement an asynchronous delete endpoint in fastapi that removes a to-do by id, uses a status model, and raises a 4xx error if not found.

Create a new react app, install dependencies, and integrate a UI framework with buttons, pagination, date pickers, and forms for the todo front end; test the initial build.

Set up the React project structure by creating a source folder with services and components, and add files for todo form, todo item, and todo list.

Configure the todo service base URL on localhost:8000 using an environment variable for the API URL, and implement two fetch methods to retrieve all todos and a todo by id.

Build a todo service with create, update, and delete operations using fetch, post, put, and delete methods, sending JSON bodies with title, completed, and id fields.

Create a reusable React todo form component with a use form hook, handling the title field, default values, and form submission, setting up for future layout.

Finish configuring the todo form with the on finish handler, a horizontal layout, gutter, and a two-column grid (xs to xl) plus a primary add button with a plus icon.

Create a todo form item with a title field, a required validation, a help message, and a placeholder input, then render the button and finalize the form.

Build a to-do item component with props for data and actions to remove or toggle completion, render a list item with icons, tooltips, and a future confirmation popup.

Build todo component part two by implementing actions with a two-value array, a switch for completed, a tooltip, a delete confirmation, and a remove button updating the list by key.

Build the todo tab in React by importing React and useEffect, rendering todos from a data source, and enabling removal, toggling, and bottom pagination with page sizes.

Define and manage the todo list state in a React component by wiring useEffect, useState, and useCallback, implementing add, remove, and toggle complete operations, with refresh and messaging.

Create React hooks to refresh the app screens by implementing two callbacks, useCallback for onRefresh, and load todos with fetch, then filter completed items and update refreshing state.

Builds a functional todo list by implementing a form, tabbed views, and state management, including adding, removing, and rendering items via the API.

Watch a bonus video on code brains IO, claim a 30% discount forever for code brain students, and enjoy monthly updates, weekly contact, early access, and forum access.