Build A TodoList with Phoenix, Elixir and Angular

Install Elixir on Windows with a caveat: install Erlang first and use the 64-bit installer to avoid version conflicts; avoid Chocolatey and verify with elixir -v for Phoenix readiness.

Install Hex and verify compatible Erlang and Elixir versions to work with Phoenix. Run mix to install the Phoenix project generator and rely on PostgreSQL as the default database.

Generate a Phoenix project, install dependencies, and configure the database for the to-do API; then create the database with ecto and verify the project structure in the new API folder.

Generate a Phoenix context for todos with title (string) and completed (boolean), create the migration, run it, and verify the todos table with title and timestamps.

Create the initial project files for a todo list app using Phoenix, Elixir, and Angular, adding API Web, controllers, and views, including a change set view and a fallback view.

Modify the changeset view to traverse and translate changeset errors, reuse the layout view pattern, define translators, and implement a render method to output json errors.

Explore rendering todo data as JSON in a Phoenix view by defining render many and render one, shaping the data map passed from the controller into the todo view.

Learn to implement a Phoenix fallback controller that handles two API cases: invalid input errors returning JSON, and not-found responses with corresponding views.

Define the router and expose a todo resource, create the todo controller for the api, alias necessary modules, and start outlining index, show, update, and delete methods.

Study Phoenix get requests by implementing the index and show methods to fetch todos through the repository, render the todo list, or a single todo by id.

Implement a Phoenix post request to create a todo by passing params, setting status to created, returning a show json response, and including a location header.

Explore how the Phoenix update method handles put requests by passing todo params and locating the todo via path params. It shows applying attribute changes, but not persisting yet.

Learn how to delete a to-do item in Phoenix by removing it from the model and sending a response.

Set up correct namespaces and aliases for your Phoenix API, test create, update, and delete operations with Insomnia or Postman, and prepare to build the frontend.

Install the Angular CLI, verify your version, and create a new Angular project with ng new, optionally adding routing, then wait for the installation to complete.

Install and configure Ant Design Angular in an Angular project using the CLI, enabling icons and a theme, and explore components like switch, list, tabs, and alerts on localhost:4200.

Add Ant Design modules and generate two components, a to-do form and a to-do list, then import reactive forms, forms, and http client modules and configure routing for the app.

Create an angular todolist service and wire it into the to-do list module by adding it to providers, then begin implementing the service logic.

Learn to build an Angular post service to create todos by configuring http client, defining a todo model with id, title, and completed, and posting JSON to a rest API.

Create an Angular get and delete service to fetch a todo by id and delete it, returning observables from the HTTP client and wiring to the resource endpoint.

Build form methods for the todo app by creating a form group with title and completed fields using the form builder, applying validators, handling submission, and resetting the form.

Build an html form in Angular with two items—the to-do input and second form control—and a submit button, while delaying create todo service until a later refresh mechanism is added.

Build a to-do list component in angular by wiring the to-do form to a list, loading tasks via a to-do list service, and updating status and deletions with observables.

Finish the HTML structure for the TodoList, render a list by looping over to-do items, and display each item's title and color within a responsive layout.

Learn to enhance a phoenix, elixir and angular to-do list by adding a delete button and a completion switch, styling with css, and wiring list item actions with confirmation prompts.

Create todos using the to-do list service, submit through a form, and subscribe to updates with a message service to refresh the list and reset the form.

Unlock a bonus video granting access to all Code Brains courses with a 30% lifetime discount, monthly updates, weekly notices about upcoming courses, early access, early reviews, and forum access.