Build A TodoList with Swift, Vapor and Electron React

Identify prerequisites for building the todo app, including docker installed, a Postgres-capable IDE, and Vapor setup; bootstrap a project from Postgres template on GitHub and open it in VS Code.

Understand the project structure and docker setup, including compose build and services, migrations, and routes, with a todo model and controller for getting and creating todos, and environment configurations.

Extend the Swift todo model by adding a completed boolean and run migrations with Docker Compose to set up a Postgres database, exposing tables with id, title, and completed.

Run and troubleshoot the Vapor API with Docker, using compose down and -v to wipe data, access routes like /todos and hello world, and restart from UI or command line.

Learn to fetch a to do by its ID in a Vapor Swift app, using the show method to query the database and handle not found.

Implement the update todo request by getting the id from request parameters, decoding the update payload, updating the title and completed fields, and saving the changes during build and run.

Delete a to-do by its id, remove it from the list, and verify the to-dos array is empty after deletion.

Learn to create an electron desktop app using electron builder and the react electron boilerplate, clone the repo, run npm install, and start the app with npm start.

Install and integrate Ant Design, import its CSS, and add a Button component to the Electron React app. Explore button variants and consult component docs to understand available types.

Create a todo service to connect to a restful api by defining a base url and a todo interface, then implement fetch methods to load, get, update, and delete todos.

Implement create, update, and delete operations for todos via the service using a base url. Send JSON payloads with application/json and JSON.stringify, updating by id and deleting by id.

Create a to do list component in a new components folder using useEffect, useState, and useCallback, with Ant Design UI and a dedicated CSS file.

Manage the to-do list state by loading todos from JSON, setting active and completed items, and implementing a refresh with a memoized on-refresh callback and use effect.

Create a modular to-do list interface by building separate components for tabs, a to-do tab, and a to-do item using React and tsx, with props for remove and toggle actions.

Create a to do item component with remove and toggle props, wrapped in list item with a tooltip, switch, and pop confirm to remove, and export item and tab components.

Add todo tabs and create methods to modify and view to-dos, including toggling completion, deleting items, and handling form submissions to add new active and completed todos.

Add a to-do form component to a React and Electron app, wiring input and submit with validation and layout, and export the form to integrate with the to-do list.