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

Install rust, learn actix web v4 with a chosen orm, skip diesel, create and run a cargo project, add dependencies in cargo.toml, and troubleshoot builds by restarting the IDE.

Install SeaORM by adding dependencies for Postgres, MySQL, or SQLite, configure the async runtime and serde for json, and enable tracing, futures, and a log subscriber; review SeaORM migrations.

Install the cargo cli, initialize SeaORM migrations, and configure dependencies and migration path. Explore the migrations folder and entity mappings from text fields to characters and numbers.

Create Actix directories by generating and refining a to-do table migration, removing redundant files, configuring schema manager, and setting up a .env with database URL and port for Postgres.

Generate entities from your database using the CLI after uncommenting migrations in cargo.toml, then verify id, title, and completed in the table schema and SQL migrations.

Create a repository and handler directories for a todo app, wiring database access and http route handling, and define a todo request with title and completed fields.

Learn to implement get requests in a todo app by building asynchronous database queries to fetch all todos or a single todo by id, and handle errors.

Implement post requests with an asynchronous create function that accepts a json to-do request, inserts it into the database, and returns the created todo.

Implement the put request to update a to-do item via an async json call, validate existence by id, modify title and completed fields, save changes, and add a delete request.

Set up the todo handlers module and file, wire the app state, and outline post, get, and delete methods with logging and json responses for the actix-web todo app.

Develop a get handler to fetch all todos and fetch a todo by id via app state and the to do repository, returning json results.

Configure and run the todo API by aligning modules, repositories, and app state, set up the Actix web server, connect to the database, and validate migrations and runtime compatibility.

Debug api behavior for a rust actix-web todo app by enabling model serialization, running the server, and testing responses, including empty results as a message or empty array.

Clone the electron react boilerplate and electron builder, install dependencies with npm install, then npm start to launch the React-based electron desktop app; prepare to add a css framework.

Install ant design, a popular css framework, into the electron react boilerplate, then import the css and a button component, and explore button types using the docs.

Create a services layer to connect to the restful API, defining a todo interface and a base URL, and implement load, get, update, and delete operations for todos.

Create and update to-dos by posting to the base url with application json and json stringify, then delete to-dos via a delete request by id.

Build a React to-do list component in an Electron app, wiring create, load, update, delete, and get operations from Todo service using useState, useEffect, and useCallback with ant design UI.

Define the load todos flow and a refresh method to fetch and set active and completed todos, then implement a memoized onRefresh callback using useEffect to update the UI.

Build a modular to-do list with React components, including tab panes for all and completed, a dedicated to-do item, and a to-do service to handle remove and toggle actions.

Create a reusable todo item component with remove and toggle props, featuring a switch, tooltip, and confirm removal; color indicates completion (cyan or red) and export it for todo tab.

Add and manage todos by enabling mark complete, delete, and view actions, and handle form submissions. Run the app to see active and completed tasks and the upcoming to-do form.

Create a to-do add form with name and title inputs, required validation messages, and a submit action, using a two-column layout and a 20-pixel gutter in an Electron React app.