Build A TodoList with Go (Golang), Fiber and Angular

Install fiber, a rest framework for Go, with go get or by adding it to your project, create a main package with a hello world route, and run on localhost:8000.

Install Gorm by running go get and the Gorm Postgres driver, then set up a database package and a DB variable to wire up data access.

Define a todo gorm model with id, title, and completed fields in models package, annotated for gorm and json. Create a fiber function to use the model with the database.

Set up gorm migrations and fiber routes in a Go-based todo list app by configuring database connection, performing auto migrate, and validating routes with an initial JSON response.

Set up a post route to create todos using the fiber framework in Go, parse JSON with a body parser, handle parsing and database errors, and verify updates via insomnia.

Learn to implement a get todo by id endpoint in Go Fiber, extracting id from Fiber context params, querying the database, and handling not found errors while restarting the server.

Define an update todo type, parse the request body, update title and completed status, save to the database, and expose the update via a put endpoint.

Create a delete method for todos in a Go Fiber API, using the id and database variable, handle errors, return a 200 status, and connect with the frontend.

Enable CORS in your Go API by configuring middleware and server settings to allow frontend access, verify the configuration, and confirm the server runs with CORS enabled.

Install ant design angular in your angular project with ng add, then explore components like switch, cards, list, tabs, and messages, and run on localhost:4200 to verify the button works.

Add Ant Design modules by generating two components—a to-do form and a to-do list—importing reactive forms, forms, and http client modules, then prepare a service for HTTP requests.

Generate the Angular todolist service and wire it into the to-do list module by adding the service to the providers, then begin implementing the service.

Learn to build an Angular post service to create todos, define a Todo model, convert between JSON, and post to a REST API on port 8000 with CORS enabled.

Create an Angular get and delete service for todos, returning observables, using HTTP get by id and HTTP delete, and wire it into components.

Build an Angular HTML form by defining a form group with two fields and a submit button, preparing for a later create todo service with a refresh mechanism.

Build the todo list component by wiring a to-do list service and a message service, loading tasks on initial load, updating status, deleting items, and subscribing to observables.

Finish the to-do list HTML by building items for the TodoList, configuring the layout, and rendering each item's title and color tag in a looping list.

Enhance the todo list interface by adding a delete button and a toggle for completed status, plus CSS tweaks for padding and background to improve task layout and user experience.

Finish the todo form and wire submission to the to-do list service, creating items with title and completed status, while subscribing, refreshing, and triggering the message service.