React, NextJS and Golang: A Rapid Guide - Advanced

Create and configure the project by installing ghiorso, using the fibre framework, initializing a go module named ambassador in GoLand, and fetching the package with go get.

Configure a go backend with docker by creating a dockerfile and docker-compose.yml, set up the environment, copy files, install modules, and map port 8000 to 3000.

Connect to a MySQL database using the Gorm package, configure a dockerized ambassador database with volumes, credentials, and service port mapping to enable seamless backend connectivity.

this lecture demonstrates connecting to a container database with Go and gorm, defining a user model with an ambassador boolean, and using auto migrate to create the user table.

Install the air live reloader for go in the docker container to enable live reloading, then rebuild the docker container after updating the dockerfile and run with air.

Implement admin authentication endpoints, including register, login to obtain authenticated user, logout, and update own information. The lecture parallels the ambassador flow, with admin-specific adaptations to be explored later.

Explore setting up a user registration route with a fiber-based API, creating an admin register endpoint at /api/admin/register, a register controller, and testing via Postman.

Extract request data, validate password and confirmation, hash the password, create a user with first name, last name, and email, set is_ambassador to false, and auto migrate the database.

Create a login function that retrieves a user by email, compares the password to the stored hash, and returns invalid credentials on failure; the next tutorial covers a JWT token.

Learn to generate and sign a JWT with a user-id payload and one-day expiry, then return it as a cookie and enable CORS with credentials for cross-origin front ends.

Learn how to add user-specific methods to the user model for password handling, including setting and hashing passwords, comparing passwords, and authenticating during login and registration.

Fetch the login cookie, extract and validate the JWT token, and return the authenticated user by interpreting the subject claim; preserve cookies across requests.

Format the user output by omitting the password and returning names in lowercase with underscores. Use struct options to control response content and enforce unique emails.

Implement a logout function that clears the user session by overwriting the JWT cookie with an empty value and an expiration in the past, then require login for future requests.

Implement middleware to validate the authenticated user across routes, returning unauthorized on missing tokens and advancing to the next handler when valid, while extracting the user id from the token.

Update your own profile by constructing a put request to the users endpoint, altering first name, last name, and email, and validate and update the password with authentication.

Develop admin endpoints by adding models and points, including a credit for products, links based on the user ID, an orders endpoint, and a route to fetch all ambassadors.

Create the ambassadors endpoint by querying users where ambassador is true, and generate 30 ambassador records with a Go script run inside the docker container using the faker library.

Master the product CRUD workflow by defining a product model with id, title, description, image, and price, and building endpoints to create, read, update, and delete products.

Learn how to use embedded structs in Go by defining a base model with an idea field and embedding it into product and user models. Then populate sample data.

Define a link model with id, code, and user_id; map one-to-many to users and many-to-many to products via link_products; expose a controller to fetch user links at /users/:id/links; return json.

Define and seed a go-based orders system with order and order item models, including id, transaction ID, user and ambassador data, and 90/10 revenue split, then expose via fiber endpoints.

Preload order items with Gorm to return orders with items as an array and derive full name from first name and last name; compute total on frontend from order items.

Design ambassador authentication endpoints by applying the same functions as other endpoints with slight changes, swapping the name Armin with ambassador to illustrate endpoint behavior.

Implement ambassador authentication across public and private routes, using middleware and path checks to distinguish ambassador versus admin users, and update register, login, and profile actions with scope-based logic.

Implement scope-based login by attaching a scope to the user id to restrict access to admin and ambassador endpoints, using middleware and jwt claims.

Define admin and ambassador as aliases of user in a Go app and implement ambassador revenue calculation. Use pointers with omitempty to control output when preloading orders with Gorm.

Explore ambassador endpoint with five endpoints, showing two product retrieval methods: front-end filtering of all products and back-end filtering, followed by creating links and examining their impact on user rankings.

Learn how to install and configure Redis as an in-memory data structure for caching and messaging, and connect a Go app using a Redis client in Docker.

Cache products with Redis by implementing a get products function that checks the cache, falls back to the database, then stores the results in Redis for 30 minutes.

This lecture demonstrates implementing a backend search for products by title or description, using lowercase comparison, handling empty queries, and returning matched results to support frontend filtering.

Learn to sort the product list by price in ascending or descending order, using a sort function and slice to produce sorted results.

Implement product pagination by computing start and end indices from the page, nine items per page, and default page one. Return data, total, and last page using ceiling logic.

Update a product while keeping the front-end in sync by clearing and rebuilding the cache, then run cache invalidation in the background with goroutines.

Explore Go channels for inter-routine communication, creating a string channel, sending and receiving data with arrows, and using an event-driven pattern to asynchronously clear cache keys.

Learn how to create ambassador links by defining a create link request, authenticating the user, generating a random code, associating product ids, and returning the new link.

Build an authenticated stats endpoint that retrieves ambassador links, aggregates completed orders by link code, and calculates total revenue per link for dynamic reporting.

Rank ambassadors by revenue in descending order and return a name-to-revenue map, enforcing authentication, converting users to ambassadors, and calculating revenue; plan Redis-based sorting in the next tutorial.

Apply Redis sorted sets to rank ambassadors by revenue, adding members with revenue as the score and retrieving reverse-sorted rankings for clear ambassador leaders.

Explore the three checkout endpoints: retrieving the link with the ambassador and products to gather information, creating the order with all data, and confirming the order.

Implement the get link endpoint to retrieve a link by code, using a public checkout route, preload user and products, and return the link as json.

Implement a create order flow: validate a link, assemble order and order items from the request, compute ambassador and admin revenues, and persist to the database.

Use transactions to ensure atomicity when creating orders and order items; begin a transaction, perform inserts, roll back on error or panic, and commit when successful to prevent partial data.

Master stripe checkout integration by creating sessions with line items, using publishable and secret keys, and handling success and cancel urls in a React/NextJS and Golang workflow.

Learn how to complete orders via a post to /order/confirm, validate the source, save the order, and return success while updating ambassador rankings via Redis in the background.

Learn to send emails from a Go app using mailhog, configure binding addresses, and send ambassador and admin messages, including docker host mapping to access localhost.

Create a React admin app using a TypeScript template, then open the project in an IDE and start the app on port 3000.

Add a bootstrap template to the project, customize the dashboard layout, and create navigation and menu components in TypeScript to render the UI.

Set up router-based navigation by adding login, register, and users pages, create a signing form, and render routes with BrowserRouter and Routes, including path and component mappings.

Register users with a React class component using stateful inputs for first name, last name, email, password, and password confirm, submitting with Axios and redirecting to login.

Build a login form with React hooks, managing email and password state, handling onChange, submitting with axios, and redirecting to the users page after login while sending credentials for cookies.

Fetch the authenticated user via the JWT cookie inside a shared layout that wraps the user table and navigation for a consistent admin ui, handling credentials and redirects to login.

Define a type-safe user model, pass the user to the navigation, implement a logout flow via a post request, and redirect to login while showing user info and profile links.

Fetch and display ambassador users in a Next.js React app using useState and useEffect, mapping full names and emails and implementing a redirect to the users page.

learn to implement material ui tables in a react project by installing the package, adding the raboteau font, and converting a table to material ui components.

Explore implementing table pagination with four parameters: count, current page, per page, and on-page change; slice data by page and per-page to render ten items per page.

Develop a link model with id, code, and orders, render a links page with a table and layout, and compute revenue from orders using reduce.

Create a products page and component, fetch and display products in a paginated table with image, title, description, and price, and enable delete with confirmation and backend sync.

Create a reusable product form component to add and edit products, capturing title, description, image, and price, submitting to the server and redirecting to the products list.

Add an edit button with a toggle group, route to the same product form for create and update, and preload data via a get request to populate fields.

Create an orders page by defining order and order item models, wiring an accordion to reveal each order's items in a table with product title, price, and quantity.

Build a profile page with two forms to update user info and password, prefill fields, handle inputs, and submit to the backend.

Learn to implement redux in a React project by creating actions and reducers, configuring a store, and wiring the provider to manage a user state immutably.

learn how to wire a layout with redux by connecting components via mapStateToProps and mapDispatchToProps, manage user state, and dispatch actions to update user data across layout and profile components.

Set up a React ambassador project by configuring port 4000, integrating a Bootstrap album template, and creating a layout and products components with React Router.

Learn to set up shared files and redux integration for an ambassador-facing frontend, including installing redux, configuring the store and provider, and implementing login and register flows.

The lecture guides updating the header to show the authenticated user's name, connects the header to redux with a login/profile/logout flow, and uses conditional rendering based on user id.

Fix and enhance the header component by wiring dynamic title and description with useState, update login and register links, and adapt content for authenticated users using redux and useEffect.

Develop two pages for stats and rankings, fetch start data from the server, render it in a table with links to checkout, and integrate them into the navigation.

Build a reusable products component, fix navigation links and activated states, and fetch backend data to display product images, titles, and prices.

Implement a product search feature by wiring a search input to a filters state, propagating it to the front end and back end, and filtering products by title and description.

Add a price sort dropdown and a sort filter, and implement ascending and descending price sorting on front-end and back-end while preserving search.

Master lazy loading with pagination in a React, Next.js, and Golang stack, using per-page logic, search resets to page one, and hiding the load more button at end.

Learn to implement product selection by toggling IDs in a selected array, adding or removing items with a select function, and highlighting chosen products with a border.

Generate links from the selected products, display success or error notifications, and auto hide alerts after a timeout using a try catch finally flow.

Set up a Next.js checkout project, convert pages to TypeScript and React, install TypeScript and React, and run the app on port 5000 to work with Stripe.

Tailor a Next.js template with bootstrap, remove credit card and address inputs for Stripe, and simplify the checkout form to a single total with country and city inputs.

Create and map routes in Next.js by adding success and error pages, implement a shared layout, and use a dynamic [code] route with useRouter to access the code.

Learn to fetch the ambassador name and product list by handling an initially undefined code with useEffect, axios requests, and backend endpoints.

Set default quantities to zero for all products, map each product to a quantity object, update quantities on change, and compute the total using a reducer with price times quantity.

Implement on-change handlers for form fields, format values as lowercase with underscores, prevent default submission, and post to /orders with product quantities, validating Stripe data.

Integrate Stripe in a NextJS app by loading the Stripe JS with the publishable key and redirecting to checkout using a session ID, then validate the flow.

Confirm the order by sending the source to the backend's /orders/confirm endpoint and awaiting the asynchronous response. Checkout completes and the app workflow finalizes.