React, Next.js and NodeJS: A Rapid Guide - Advanced

Set up a Node.js project with TypeScript, install Express and types, choose an IDE (Visual Studio Code or PhpStorm), initialize npm, and configure nodemon for watching and a start script.

Import Express in TypeScript, configure tsconfig, enable CORS, create an Express app, and listen on port 8000 to return Hello world on the root route.

Install and configure Docker for node projects, create a Dockerfile and Docker Compose setup, map ports, use volumes for live updates, and connect containers for future services.

Configure a Docker-based database service using a MySchool image, set credentials and data volumes, run with docker compose, connect locally, and handle platform differences for Intel vs M1 Macs.

connect to the database with TypeORM by installing the packages, configuring ormconfig.json, and creating a connection with createConnection; use docker-compose depends_on to ensure the db starts first.

Create a user entity mapped to a database table by using decorators for id, first name, last name, email, password, and is ambassador, with email as a unique index.

Create simple admin authentication endpoints for register, login, get the authenticated user, logout, and update own information, with plans to reuse these endpoints later for ambassador authentication.

Create an admin register endpoint by wiring routes, a controller, and a user repository. Validate passwords, hash them, and return the user data without the password after testing with Postman.

Post email and password to the login API, verify the user by email, return a generic invalid credentials message on failure, and outline generating a jwt token next.

Generate a JWT for the user by signing a payload with the user id using jsonwebtoken. Store the token in an http-only cookie with a one-day expiry to secure authentication.

Create an authenticated user endpoint that reads a JWT from cookies, verifies it with a secret, decodes the payload to get user id, and fetches that user without the password.

Log out by expiring the JWT cookie with a post request. Return unauthenticated when the token is missing and omit the password from user responses.

Implement and use middleware to authenticate users, verify JWT payload, and pass the authenticated user through the request to subsequent routes using next, enabling secure login and logout flows.

Update your profile by a put request to admin/users/info to change first name, last name, or email, then return the user after encrypting the new password with bcrypt 10 rounds.

Add admin-specific endpoints for products, including create, update, and delete operations, plus entities for links and orders, and an endpoint to fetch ambassador users.

Create an admin user controller to fetch ambassadors via an API endpoint, and seed 30 ambassador users using a seeder with faker data and hashed passwords in a dockerized environment.

Build and manage a product entity with title, description, image, and price, and expose crud routes under api/admin/products to create, read, update, delete, and seed products.

Explore building a link system for products, defining a link entity with a unique code, and configuring user relations and product links via join tables.

Define two entities, orders and order items, with transaction id, ambassador details, address, created at fields, and link order items to orders via a many-to-one relation.

Explain how to build an order controller, fetch orders with items, calculate totals and admin revenue, and seed 30 orders with 1–5 items each for ambassadors, using repositories.

Learn to model relations without foreign keys by enabling create foreign key constraint false and using join columns to link orders, order items, and links via code-based references.

Add ambassador authentication endpoints by mirroring admin endpoints, changing the prefix from admin to ambassador, and incorporating scopes for access control.

Learn how to reuse routes to support ambassador authentication and admin vs ambassador access, distinguishing paths like api/ambassador, and apply role-based login restrictions and token scopes.

Implement scopes in the authentication flow by embedding admin or ambassador in the token payload and enforcing access with oath middleware, validating path and scope to authorize or deny routes.

Implement revenue calculation for ambassador users by aggregating completed orders and their order items, using reducers to sum ambassador revenue; test by logging in as ambassador and verifying updated revenue.

Explore ambassador endpoints: compare front-end and back-end product filtering, create links, fetch link stats, and rank ambassadors by revenue, with Redis caching.

Install Redis as an in-memory database, configure Docker Compose with the Redis image and port 6379, then create, connect, and export a Node Redis client for backend controllers.

Cache ambassador frontend products with Redis by creating a get endpoint, setting a products frontend key with a 30-minute expiration, and serving from cache or querying the database when missing.

Implement backend product search across two endpoints, filter by title and description, enforce case-insensitive matching by lowercasing inputs and fields, test and sort results.

Learn backend sorting of products by price in ascending and descending order. Implement a compare function returning -1, 0, or 1 to drive sorting, with search and pagination.

Learn to implement backend pagination for a products endpoint by limiting nine products per page, handling page defaults, computing the last page, and slicing data with search and sort.

Create authenticated ambassador links via a post to /api/ambassadors/links, generating a random code, attaching the authenticated user and mapped product ideas, and returning the new link.

Create an endpoint to fetch revenue per link for the authenticated ambassador. Calculate revenue by summing completed orders linked to each ambassador’s links via associated order items.

Learn to implement rankings of ambassadors by revenue, assembling each ambassador’s name and revenue from orders and order items, and optimize with Redis sorted sets to avoid slow queries.

Rank ambassadors by revenue with Redis sorted sets. Add ambassadors with zadd, using revenue as the score and ambassador name as the member, then read with rev range by score.

Use a reducer to build an object of ambassador names and revenues. Initialize the accumulator as an empty object, then assign revenues with dynamic keys in descending order.

Explore the three checkout endpoints, including retrieving the checkout link. Create an order that remains incomplete until Stripe confirms, then update the order from incomplete to complete.

Implement a get link endpoint that fetches a link by code, includes user and product relations, and uses this data to prepare an order for checkout.

Create an order through a post request, validate the link, compose the order from link user data and body fields, and build order items with ambassador and admin revenue splits.

Learn how database transactions atomically create orders and order items, handling errors by committing on success or rolling back to maintain data integrity.

Configure Stripe in test mode, obtain publishable and secret keys, install Stripe via npm, and create a checkout session with line items, API version 2020, and success and cancel URLs.

Complete an order flow by validating the Stripe transaction, marking the order complete, updating ambassador rankings and revenue in Redis, and sending completion emails via Mail Hook.

Launch a React admin panel using a TypeScript template, initialize the project, and start the dev server on port 3000.

Build a bootstrap-based template for a react dashboard by bootstrapping the app, cleaning up test files and styles, and creating two tsx components for header and navigation.

Explore setting up router-based navigation by creating login, register, and users pages, configuring routes with browser router and route components, and applying sign-in form templates with shared styles.

Build a react register form with first name, last name, email, password, and password confirm using state, posting to the admin register endpoint and redirecting to login on success.

Learn to implement a login flow in React using hooks and useState, manage email and password, submit with axios post, and redirect to the users page after authentication.

Fetch the authenticated user using a JWT cookie within a shared layout. Enable credentials for API requests, and redirect unauthenticated users to login.

Pass and display the authenticated user across layout and navigation, type user with TypeScript, implement logout flow and redirects to login and profile pages.

Learn to fetch ambassadors, exclude admins, and display them in a Material UI table with names and emails, while configuring navigation and a redirect to /users.

Install and apply Material UI to style a table, add the Roboto font, import components, convert the table to a Material UI table with head and body, and plan pagination.

implement table pagination in a React app by defining the user count, tracking the current page, and slicing the users array from start to end with ten items per page.

Create a link model and interface, wire a links page and navigation, and render links with counts and revenue calculated via reduce.

Create a products page in a directory with a TypeScript product interface, fetch products with useEffect and axios, render a paginated table with image, description, and price, and enable delete.

Create a product form component with fields for title, description, image, and price. Submit the form data to the server and redirect to the product list.

Add an edit button with a toggle group, reuse the product form for create and edit routes, fetch and pre-fill data with useEffect, then submit updates.

Create an orders page with order and order item models, including an accordion for each order. Display an items table showing product title, price, quantity, and the order total.

Create a profile page with a profile component that lets you update your information and password through two forms, pre-filling fields from user data and submitting to /users/info and /users/password.

Set up redux with actions and reducers, implement a set user action, create an immutable state reducer, configure the store, and wrap the app with the React Redux provider.

Connect the layout to redux, map state to props and dispatch to props, and manage the user data across components like profile and navigation.

Set up a React ambassador app with a TypeScript template, change the port to 4000, integrate a Bootstrap template, and build header, layout, and products components.

Copy common components and files, remove orders and order items from models, configure redux store with a provider, and implement ambassador login and register pages.

Display the authenticated user's name with a profile link in the navigation header, using Redux and React-Redux connect to read user state and manage login and logout flows.

Fix the header component by using state for title and description, updating them with redux user data, and toggling login/register links and buttons based on authentication and location.

This lesson builds two pages for stats and rankings, fetches data from the server, and renders dynamic tables with keys, values, and checkout links.

Build a reusable products module by converting links, rendering product cards with images and prices, and using useState for paginated data, showing nine items per page.

Implement a product search by wiring an input to filters state, pass the term to the backend via a query parameter, and filter frontend results by title and description.

Sort products with a dropdown to toggle price ascending or descending, updating filters and search in the product list. Implement front-end sorting logic with useEffect to reflect ordered results.

Implement lazy loading and pagination with a load more button, manage page state and per-page items, concatenate new products on load, and reset to page one on search.

Demonstrates how to implement product selection in a React app by maintaining a selected array, toggling items on click, and applying a visual border to selected products.

select products and generate links using a beacon call, manage notify states for success or error, and auto-hide messages after three seconds.

Set up a Next.js checkout with TypeScript, remove the API and home styles, convert pages to TypeScript, install TypeScript and TypeScript React, and run on port 5000 for Stripe.

Tailor a Next.js template by applying bootstrap examples, cleaning a checkout form, removing unnecessary inputs, and preparing a Stripe-based payment flow.

Create Next.js routes with a success and error page and a shared layout. Use a dynamic [code] route with useRouter to capture url and fetch data to finish the purchase.

Connect the code to fetch ambassador data and product details with useEffect in a React, Next.js app, manage state for user and products, and implement quantity controls with safeguards.

Set initial product quantities to zero, manage them as a stateful array of product id and quantity, handle changes, and compute the total using reduce.

Build a React form that updates first name, last name, email, country, city, and zip with onChange, then submit asynchronously to the backend with product quantities and stripe data.

Learn to integrate Stripe by copying the publishable key, including the Stripe script, and redirecting to checkout with a session ID, handling errors and confirming payment.

Confirm orders by using the stripe source on the success page and sending a backend request to /orders/confirm to finalize checkout.