Build A TodoList with Elixir, Phoenix and Electron React

Install elixir on Windows by first installing the latest 64-bit Erlang from erlang.org, then use the official elixir installer, avoiding Chocolatey, and verify with elixir -v.

Install Hex and set up a new Phoenix project with Elixir using mix, ensuring Erlang version 22 or higher, the correct Elixir version, and PostgreSQL as the default database.

Generate a Phoenix new project with mix, naming it Todo API and installing dependencies, then configure the ORM to connect to Postgres and create the database.

Generate Phoenix migrations to create a todos context with a title string and a completed boolean. Run migrations to build the schema with id, title, completed, and timestamps.

Start building the todo app by setting up the API web, creating the to do controller, to do view, change set view, and a fallback view for errors.

Create changeset view by traversing and translating changeset errors, define a render method that outputs errors as json, and wire together translate errors with the change set.

Define render methods for todos in json, using render_many for collections and render_one for single items; shape data with id, title, and completed.

Explore the fallback controller for the TODO API, defining unprocessable entity and not found responses, with error JSON shown via changeset and error views.

Define the router for the to-do api, create a todo controller, and wire index, create, show, update, and delete actions while resolving an undefined reference.

Implement get requests in Phoenix by building index and show actions that fetch all to dos or a single to do from the repository and render them as json.

Create a todo via a Phoenix post request by passing params, using the to_do model to create, set status created, add a location header, and render show.json before update.

See how Phoenix handles put requests to update a todo: fetch by id via path params, apply attribute changes, and render the updated todo as json.

Retrieve the todo by its id, call the model's delete method, and return a no content response.

Inspect and test the todo rest api using tools like Insomnia or Postman, performing create, read by id, update, and delete operations before building the front end.

Clone the Electron React boilerplate, install dependencies with npm install, and run npm start to launch a React-based Electron desktop app built with Electron Builder.

Install ant design to add a UI library to the electron react boilerplate, import the CSS, and render a button component in app.tsx, then run npm start.

Build a todo service to connect to a rest api, define a todo interface, and implement basic fetch-based rest methods to load, get, update, and delete todos.

Learn to implement create, update, and delete for todos using a base URL, post and delete methods, passing title and complete via JSON payloads with JSON.stringify, and handling JSON responses.

Create a todo list boilerplate by building a React component, managing state with useState and useEffect, and wiring in UI elements and styles for loading, creating, and updating todos.

Learn to add state to a React to-do list, load todos from JSON, categorize them as active or completed, and implement a refresh with useCallback and useEffect.

Create modular todo list components for tabs and items, enabling all and completed views. Structure uses separate to-do tab and to-do item tsx files for reusability.

Create a todo item component with remove and toggle props, featuring a switch, tooltip, and pop confirm, plus color-coded tags for completion; export to do item and to do tab.

Develop and manage to dos across tabs by adding methods to create, complete, toggle status, and delete items, plus a form submit handler to update the list in real time.

Add a to-do form component to the list using form.tsx, with input and a primary submit button, validating required fields in the electron react to-do app.