Build A TodoList with AdonisJS and Electron React

Install the AdonisJS API setup by running npm init adonis ts app latest on the AdonisJS website, note the dot env file, and run node ace serve --watch.

Learn to install and configure an orm, create your first model with node ace, use make model with the dash m flag for migrations, and set up a Postgres database.

Configure environment variables, create a todo model and migration, add title and completed fields with default false, and run the migration to build the todos table.

Create a resourceful rest controller in AdonisJS, wiring routes and models to fetch, create, and update todo data using index, store, show, update, and destroy methods.

Explore how to fetch all todo rows, serialize results, and perform CRUD operations with the AdonisJS ORM, including create, find, update, and destroy, using model methods.

Explore the AdonisJS orm with methods like all, find, first, and firstOrFail, plus the query builder for where, update, and delete. Learn serialization, factories, and query scopes.

Run the rest api with node serve, create and manage todos via the api client, and explore building a basic JS rest api with optional authentication views and validation.

Learn to build a desktop app with Electron Builder and the Electron React Boilerplate, clone a branch, install dependencies with npm install, and run the app with npm start.

Install the Ant Design CSS framework in the electron react boilerplate, import its CSS, and use a design button from Ant Design while updating App.tsx and the app CSS.

Create a services folder and a to-do service to connect to a restful api, define a base url and a to-do interface with id, title, and completed.

Learn to add, update, and delete to-dos using a service with a base URL, post requests, and JSON payloads, including id, title, and completed fields.

Create a to-do list component in a components folder, wiring React state with useState, useEffect, and useCallback, and import ant design UI elements. Export component for use in the app.

Build and manage todo list state by loading todos from json, updating active and completed todos, handling errors, and using useCallback and useEffect to refresh data.

Create reusable to-do UI components, including a to-do tab and a to-do item, to display all and completed tasks with remove and toggle actions in AdonisJS and Electron React app.

Build a todo item component with remove and toggle props, a completion switch, color-coded status, and a confirm delete, enabling a todo tab with list rendering.

Add and manage to dos across tabs by implementing completion, deletion, and status toggling, handle form submission for new to dos, and preview active and completed items during app run.

Add a functional to-do form to a list using electron and react, wiring form submission, default values, and responsive layout with two columns for input and add button.