Build A TodoList with Python, FastAPI and Electron React

Kick off a Python based FastAPI project using poetry, install fastapi all, create a new project, and prepare a virtual environment with tortoise-orm and asyncpg for PostgreSQL.

Learn to run a FastAPI project with poetry, create a main.py, import FastAPI, define an async get endpoint that returns Hello, world, and fix environment errors.

Create a tortoise orm models file and define a to-do model with id, a title character field max length 55, and a completed boolean, using the pedantic model creator.

Register Tortoise ORM with FastAPI to connect your to-do models to a database, configure the db URL, host, credentials, modules, generate schemas, and enable exception handling.

Create todos via a FastAPI post endpoint, serialize the to do data, and return a response model, illustrating how to register a database and build a functional todo list API.

Create an async FastAPI endpoint that returns all todos as a list and enables get by id with a pedantic response model using Tortoise ORM.

update todos with fastapi by sending an update request using the to do id and fields, then return the updated todo via the pedantic response model, excluding the id.

Delete a todo item with FastAPI by creating an async delete function, returning a status model and handling 404 errors, then move to building the frontend.

Set up an Electron desktop app using Electron Builder and the Electron React Boilerplate, clone the repo, install dependencies with npm, and run the starter application.

Install ant design as UI framework for the electron react app and run npm start. Import the ant design CSS and add a button component, exploring its types and docs.

Create a todo service in a services folder to connect to a RESTful API, define a base url and a todo interface, and implement fetch-based REST methods.

Add create, update, and delete actions for todos by sending JSON requests to the base URL with the todo id, and handling responses.

Build a to-do list component in a new components folder, using React hooks (useState, useEffect, useCallback), Ant Design UI elements, and to-do CSS to manage tasks.

Add todo list state by loading todos from JSON and refreshing data with a use callback. The lecture compares regular functions and callbacks in React, noting memoization when inputs change.

Create modular todo components by separating tabs, a todo tab, and a todo item, wiring removal and toggle actions for a tab-driven list.

Develop a todo item component with remove and toggle actions, a tooltip and switch to mark completion, color-coded by status, then integrate it into a todo tab list.

Add todo tabs with create, complete, delete, and toggle status features, including form submission, due date handling, and viewing active and completed tasks in the app.

Build a todo form component in Electron and React, wiring form.tsx with validation, default value false, and a two-column layout (input and submit button) exported as default todo form.