Build A TodoList with Actix-Web, Rust and Electron Vue

Install actix-web in your rust project and update cargo dependencies. Build and run to see the server in action, and note VS Code rust analyzer hiccups.

Install SeaORM and configure dependencies in your IDE, selecting the database driver and an async runtime. Build the project to download crates and review migrations documentation before connecting to database.

Initialize SeaORM migrations, create a migrations folder, configure dependencies and features, and generate entities that map text fields to database columns for your todo app.

Create a migration to build a to-do table with id, title, and completed; remove the initial migration and configure the database URL in a dot env file for later steps.

Generate entities from your database after updating the migration cargo file and port, then use the CLI with the O flag to scaffold module, prelude, and model.

Create a repository and handler structure for a todo app, define a Todo entity with title and completed, and wire up the database connection and CRUD methods.

Implement asynchronous get requests to fetch todos from a database in a todo list app built with Actix-Web, Rust, and Electron Vue.

Implement an asynchronous post endpoint to create a new todo from a JSON payload, insert it into the database, and return the created item.

Implement put requests to update todo items via json payloads, validate by id, and save changes to the database; also add delete requests and wire the repository in the prelude.

Create and wire the todo handlers by setting up the module, file, and app state, add logging, and outline get, post, put, and delete methods using actix-web with json results.

Define and wire CRUD handlers for todos using Actix-web and Rust, exposing get all, get by id, create, update, and delete operations via a shared app state and todo repository.

Configure and run the todo api by wiring the main file, repository, and handlers, connect the database, apply migrations, and start the actix-web http server.

Debug a todo list API by ensuring models implement serialize, building and running with cargo, and testing responses when records exist or are missing, returning a message or empty array.

Install electron vue to build an electron app with vue.js and the electron builder. Scaffold or add electron as a dependency, use the cli, and run the app.

Explore various UI frameworks and install Element Plus for a Vue-based app. Integrate axios for HTTP requests and add a primary button component to start building UI components.

Build a to-do list component in Vue using TypeScript, load todos on mount with axios from a backend, and implement create and read actions for tasks.

Create add, update, and delete actions for todos, load todos, and show a cancel message; then build the ui and prepare to render the list in the next video.

Set up a row and column with span and offset, import to do list component into app file, and prepare to render the list with the interface and load method.

Create a todo list table in the app, define a title column with a specific width, and outline actions, templates, and data status, noting why data is currently missing.

Set a security policy to block unwanted traffic by adding http and https rules in the index.html metadata tag, then debug API requests in the browser.

Implement a delete todo with a confirm dialog, including danger styling, proper button labels, and testing that the todo is removed after confirmation.

Create a reactive todo form component using a template and script, define props and v-model for binding, implement a submit method to pass title and completed, then reset the form.

Identify and fix a non-functional submit handler by converting a prop into a working submit function, enabling submitting, deleting, and editing todos in the to-do list.