Build A TodoList with Python, FastAPI and Electron Vue

Create a FastAPI RESTful API using Python, start by installing Python and Poetry, scaffold a new project with Poetry, and install fastapi all plus tortoise-orm and asyncpg for Postgres.

Run a FastAPI project with poetry, create main.py, import Optional and FastAPI, initialize app = FastAPI, define a get endpoint returning hello, world, and select the environment to resolve imports.

Create a tortoise ORM Todo model in models.py with id, a 255-character title, and a completed boolean; generate a pedantic model for serialization.

Register Tortoise ORM with FastAPI to connect your to-do models to the database, configure modules, enable generate_schemas, and add exception handlers for automatic migrations.

Create todos via a FastAPI post route at /todos, define an async create_todo function, serialize input, save to the database, and return a response model.

Implement todo retrieval with FastAPI by returning all todos and a todo by id, using an async get, a list response model, await with Tortoise ORM, and pedantic error handling.

Update todos using FastAPI by sending a put request with a to do ID, updating fields, and returning the updated todo via the response model while excluding the ID.

Develop the delete todo API with FastAPI by implementing an async delete function, returning a status model, handling 4xx errors, and verifying the deletion before moving on to frontend work.

Learn to set up an electron vue project by installing electron and electron builder, scaffolding via cli, and exploring main and renderer processes to run and modify a todo app.

Explore ui frameworks and install Element Plus to enhance the todo list app, configure the main file to import the library, and add a primary button with axios for requests.

Create and read tasks by building a to-do list component with vue and typescript, loading todos on mount and posting new items via axios to a local api.

Add, update, and delete actions for a todo list built with Python, FastAPI, and Electron Vue, and begin building the UI to display and manage todos.

Show TodoListComponent by implementing update, delete, and load functions and displaying a canceling message. The next video covers building out the list.

Create a todo list table to display tasks, set a title column at 350 width, and bind a template with v-model for actions, while data is currently absent.

Enable a security policy to block unwanted traffic by adding a metadata tag in index.html for http and https, then verify in the browser.

Implement a delete to-do button with a confirmation dialog, using danger styling and yes or cancel actions to safely remove a to-do item in Python, FastAPI, and Electron Vue stack.

Create a todo form component with a template, script, and reactive ref; define props, implement a submit function that passes {title, completed}, and reset the form.

Assemble and test a to-do list component by wiring a submit function as a prop, enabling easy submission, deletion, and modification of todos.