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

Install go from the official download page, verify with go version, create a project folder, and run go mod init. Then open the project in Visual Studio Code.

Install fiber, a rest framework similar to express, via go get or add to your project, then create a main package with an app and hello world route on localhost:8000.

Install GORM and its Postgres driver with go get, create a database package, and initialize a global db variable to connect your Go app to a Postgres database.

Create a to-do gorm model by adding a models/todo.go file with id, title, and completed fields, plus a fiber context function to connect to the database and prepare for migrations.

Set up Gorm migrations and Fiber routes by importing the model, configuring database connection, running auto migrate, and initializing routes for a functional todo app.

Create a todo creation request handler in Go with Fiber, parse JSON body via body parser, handle parsing errors with 500 status, and update the database through a post route.

Define a get by id handler in fiber, extract the id from the context params, query the database, handle not found errors, and test the endpoint.

Implement an update todo endpoint using put, define an update todo type, parse the request body, update id, title, and completed, save to the database, and return JSON.

Implement the delete method for todos in the Go Fiber API, handling the ID and database context, returning a 200 status, and verify deletion in the front end application.

Enable CORS on your Go API using Fiber middleware to connect a frontend app, configure cross-origin settings, and verify the server runs with the updated setup.

Create a new React app for your todo frontend, install dependencies, and integrate a ui framework with components like buttons, pagination, date pickers, and forms to build the interface.

Organize your React project by establishing a source folder with services and components, then create todo service, todo form gsx, todo item gsx, todo list gsx, and todo tab gsx.

Define a base url as localhost:8000, using an environment variable or emv file to centralize the api endpoint; create fetch methods to retrieve all tattoos and to fetch by id.

Build a todo service that creates, updates, and deletes todos using fetch, posting and putting JSON bodies with title, completed status, and id, to integrate with React components.

Begin the first part of the todo form by importing React and design components, creating a title field, and using a form hook to log and reset values on submit.

Finish configuring the todo form by setting its properties and on finish, apply a horizontal layout with gutter and two columns, then add a primary submit button labeled add todo.

Create a todo form item by configuring the title field as required with a validation message, add a task input placeholder, and include the submit button to finish the form.

Create a reusable to-do item component with data props, including remove and toggle complete, plus tooltip, tag list, button, and switch for interactivity.

learn to create todo item actions, including a switch to mark completed, a tooltip, a pop confirm for deletion, and wiring up onChange and onConfirm handlers to update the list.

Build the todo tab in React, importing React and useEffect, and wire to-do item data source. Render items, enable removal and toggling, and add pagination controls to manage the list.

Learn to manage a to do list state in a React component by importing hooks such as useEffect, useState, and useCallback, and implementing add, remove, toggle, and refresh message handlers.

Create two refresh methods using useCallback: onRefresh and refresh, to load todos asynchronously, filter completed false, and toggle the refreshing state accordingly.

Finish todolist by implementing a functional add form, tabbed views (all, active, complete), item removal, and robust rendering with Go, Fiber, and React API integration.

Watch the bonus video to access code brains content with a forever 30% discount, monthly updates, weekly notices about upcoming courses, early access, early reviews, and a special forum.