React and Golang: A Practical Guide

Install Go, create a main.go file, define package main and a main function, import a printing package, print hello, world, and run it with go run.

Explore the fiber framework, an express-inspired Go framework, by installing version 1 with go get, running a server on port 8000, and visiting localhost:8000.

Explore pointers in Go by declaring variables, initializing pointers, and printing both values and addresses to understand references and dereferencing.

Learn how to connect a Go application to a MySQL database using Gorm, install MySQL Community Server and MySQL Workbench, and handle multiple return values and panics in the process.

Organize the project by creating a database package with a connect function, expose it for cross-package use, and structure controllers and routes for starting the server.

Register users by defining a user struct in models and implementing a post /register handler, then test with Postman.

Install and configure the realize package to automatically restart the fibre server whenever code changes, eliminating manual restarts and speeding Go development.

Add and run a migration with gorm to create the user table, including first name, last name, email, and password. Enforce email uniqueness and observe automatic server restart after migration.

Register a user by extracting first name, last name, email, and password data from the request into a string map, validating password confirm, and returning a 400 error when mismatched.

Add the Decrypt package, hash the password with cost 14, migrate the database, export the db pointer, and register the user through the controller by saving the hashed password.

Implement a login function that processes a post request, fetches the user by email, validates the password, returns 404 or 400 on errors, and prepares for a JWT token.

Generate a jwt using hs256 with user claims, issuer from the user id, and expiration in one day; sign with a secret key, handle errors, and return the token.

Create and set an http-only fiber cookie named jwt_old_limit with a token value, then enable cors and allow credentials to share it with a front end on a different port.

Decode a jwt from cookies to authenticate a user, extracting standard claims like issuer and user id, and handle unauthorized errors when the token is invalid.

Implement the logout function by removing the authentication cookie and expiring it in the past, then return a success message. Show that subsequent requests become unauthenticated.

Shows how to customize json output by using struct tags to rename fields to lowercase, include first_name, last_name, and email, and omit password from the user data.

Build a JWT-based authentication middleware in Go with Fiber, create util functions to generate and validate tokens, and protect routes by returning unauthenticated for invalid tokens.

Develop a user controller with create, read, update, and delete operations, including a get all users endpoint and a post create user flow that assigns a password and returns JSON.

Attach methods to the user struct to set the password, hash it, and compare passwords, enabling login and user creation while removing decrypt imports.

Explore adding the full user CRUD in a Go backend: fetch single and all users, update via put requests, and delete users using the database.

Define a role model as a struct with id and name, create a roles table, implement CRUD routes for roles, seed with admin, editor, viewer, and test via the browser.

Explore how to establish a foreign key between users and roles with gorm, linking user role_id to the role id and preloading roles for queries.

discover how to create a permission model and controller, define all permissions, and implement a many-to-many relationship between roles and permissions using gorm and a join table.

Explore implementing a many-to-many relation between roles and permissions in Go, including creating roles, attaching permission IDs, converting types, and updating by replacing old permissions in the database.

Implement pagination by limiting users to five per page, compute offset from the current page, and return total users plus last page to support frontend navigation.

Update your own profile information via api/users/info and update your password via api/users/password, with password confirmation and proper user ID handling.

Define a product model with id, title, description, image, price, and link it to product table. Create CRUD routes in Go for create, get, update, delete; test with a product.

Learn to design a reusable entity interface in Go for products and users, enabling count and take operations with pagination, while resolving import cycles and proper database handling.

Build an image upload flow with an image controller, handle multipart form data, save files to the uploads directory, and return the image URL via static serving.

Define order and order item models with Gorm, seed data, and build a controller to fetch orders with preloaded order items from the database.

Modify order data by concatenating first and last names into a non-persistent name field and compute a total from order items, using GORM configurations to avoid database changes.

Learn how to export orders to a csv file by creating a file path, writing order and order item data, and enabling a download via a post export endpoint.

Develop a raw sql query to aggregate daily sales from orders and order items, format the date, and expose the results via a Golang chart endpoint returning json.

implement a permission middleware in fiber that checks user roles and page permissions, loading the user and role with preloaded permissions, and enforcing view or edit access for routes.

Create a new react app using the typescript template named react admin by running the command in the terminal. Start the development server on port 3000 and begin making changes.

Set up a react dashboard template, integrate bootstrap styles, remove unused files, paste the copied dashboard body and fix className usage to cleanly render the dashboard layout.

Create and split e-mails into navigation and menu components using React with TypeScript, implementing both class-based and hook-based components, exporting and importing them for reuse.

Create dashboard and users components, install react-router-dom types, and configure BrowserRouter with routes and links to navigate between dashboard and users, using exact paths to avoid conflicts.

Create a wrapper component to provide a unique template for the register page by wrapping other components and rendering their children with props.children.

Adapt a Bussard template from get Bussard dot com examples, wire inputs for first name, last name, email, password, and implement submit with prevent default to prepare backend submission.

Learn to send post requests to a local server using Axios in TypeScript, first with then chaining and console logs, then with async/await and handling response data to register users.

Develop a login component and route to the log-in page after registration, using a state flag to trigger the redirect and render the email input.

Demonstrates using React hooks and useState to manage a count initialized at zero, display the value, and update it with an input’s onChange event.

Learn to implement a react login flow by managing email and password state, submitting via axios to a backend, handling cookies with credentials, and redirecting to the main page.

Use useEffect to fetch the authenticated user's data with axios and display the first name in the navigation beside the sign out button, managing user state and credentials.

Learn to build a user model in a models folder, with id, first name, last name, and email, initialize via constructor, and add a name getter.

Compare Link and NavLink, showing how NavLink attaches an active class for the current route and how to use exact to prevent highlighting on a path.

Create a users component, fetch users with axios in useEffect, set state, map over users with keys, and extend the model to include a role.

Implement pagination in the user list by introducing page state, next and prev controls, and a use effect that reloads users when the page changes, stopping at the last page.

Click the delete button, confirm with a yes in the confirmation window, then send a delete request to users/:id via axios and update frontend by filtering out the deleted user.

Build a user creation form with first name, last name, email, and role, fetch roles via axios, submit to create a user, and redirect to the users page on success.

Update users by editing an existing profile, reusing the create form to prefill data via id and update first name, last name, email, and role.

Discover how to create and manage roles within a React and Golang app by building a roles page, fetching all roles, rendering a roles table, and implementing delete with confirmation.

Create roles by building a form with a name field and a permissions checkbox list, fetch permissions, manage selected items with state, submit to the backend, and redirect on success.

Update roles by editing the role name and permissions, prefill data from the server, and submit a put request to save changes.

Build a products page in a React and Golang app, rendering a table with image, title, description, and price. Implement create, delete, and pagination by getting products and managing state.

Create a tsx product component with a form for title, description, image, and price, manage input state and on-change handlers, submit to create the product, then redirect to products page.

This lecture demonstrates building an image upload feature in a React and Golang app by adding an image component, handling file selection, using form data, and posting to the server.

Learn to implement a product edit form that prefills data with useEffect and axios, and update the image using useRef, including managing input refs and effect dependencies.

Create an orders component with a table, define order and order item models, fetch orders via axios, and implement paging to display orders and their items.

Learn to add button-triggered animations in a React app by toggling item visibility with height transitions, max-height, and overflow hidden, using useState to track the active item.

Explore exporting csv by triggering an export function from a button, fetching data as a blob via post, and downloading orders.csv with a blob url and a temporary anchor.

Create dynamic charts in a react app by installing c3, importing it, and using c3.generate to plot x-axis dates and sales sums from backend data via axios.

Create a profile page with two forms to update user info and password, prefilling data with useEffect, and submit via redux to fix automatic updates and reduce redundant user fetches.

Install Redux with npm, create actions and reducers, configure the store, and manage a user state with a set user action and reducer, wrapped by a provider.

Connects React components to Redux by using mapStateToProps and mapDispatchToProps to manage a user object. Dispatches set user actions from the rubber and profile components to keep state in sync.