Build A TodoList with Fiber, Go and Electron Vue

Install go from golang.org, verify with go version, create a project folder, run go mod init, create main.go with touch, and open the project in Visual Studio Code.

Install fiber, the rest framework for go, similar to Express.js, by running go get, then create a hello world route with fiber.New and listen on localhost 8000.

Install gorm, an orm for go, by running go get with the Postgres driver, then set up a database package and a db variable for later configuration in handlers.

Define the to do model in a new models/todo.go file with id, title, and completed fields, and set up a get todos handler using fiber and the database connection.

Import the todo model, configure Gorm with Postgres, connect the database, and auto migrate the todo schema while setting up Fiber routes to expose a todos endpoint.

Create a todo using a fiber handler, parse the request body, handle json parsing errors with a 500 response, and persist the todo to the database via a post route.

Create an update todo function and update type, validate with body parser, set a 500 error on input, save to database, and return the updated todo in json via app.put.

Implement a delete method in the to-do API using fiber context, returning a 200 status after removing the item, then verify updates on the frontend app.

Enable CORS to connect the API to a front end web application by importing the course middleware and adding the configuration, then stop the server to verify it is configured.

Scaffold a Vue.js and Electron app with the electron V8 builder, using the CLI and npm or yarn. Set up main, preload, and render in TypeScript, then run the app.

Set up Element Plus in the Vue.js todo app, install dependencies, run dev with hot module reloading, and import and use a primary button from Element Plus.

Create update and delete actions for todos using an id, implement delete cancellation messaging, and load todos, then start building the user interface for the list in the next video.

Build todo list interface by creating row and column layout, importing the to do list component into the app file, and preparing to render the list and load todos.

Build a todo list table with a title and operations column, wire a template and scope for each row, and enable click to update the row's format.

Learn to delete a todo item using a confirm dialog, danger button styling, and post-deletion refresh to update the list.

Create a reactive to-do form component with template and script, define props, and a submit function that validates title length, submits title and completed, then resets the title.

Finish wiring the to-do list component by passing the submit to-dos as a prop, enabling submitting, deleting, making changes, and removing todos.