React and Next.js with Typescript: A Rapid Guide - Advanced

Set up a react app with typescript, create an admin app named react-admin, initialize with the typescript template, and start the dev server on port 3000.

Build and run the app's api using Docker and Docker Compose, clone the repository, set up the backend, seed the database, and access the apis locally.

Learn to integrate a Bootstrap dashboard template into a React and Next.js project using TypeScript, and create header and navigation components to streamline the layout.

Map the app routes with react router by creating users, login, and register pages, then render them with BrowserRouter and path configurations.

Register users by converting to a class component, adding first name, last name, email, and password fields, and post data to localhost:40000/admin/register with axios to redirect to login.

Implement a login flow with React hooks to manage email and password, submit data with axios using withCredentials, and redirect to the users page after successful authentication.

Learn how to fetch the authenticated user using a JWT cookie within a shared layout, handle with credentials, and redirect unauthenticated users to login, ensuring protected routes across components.

Pass the authenticated user through layout and navigation using a TypeScript user interface, render user info in the menu, and implement a logout flow that redirects to login.

Fetch and display ambassadors (not admin users) by using useState and useEffect to retrieve data from the server, then render a name, email, and actions table.

Install material UI and the Raboteau font, then convert the table to a material UI table in TypeScript by importing head, body, and table cell, planning pagination.

Implement table pagination in a React app with Next.js by configuring count, current page, and per-page, then slice the users data for pages. Hide per-page options for a cleaner pagination.

Create a links page by defining a link model with id, code, and orders, display a navigable table of links from users, and sum revenue using reduce.

Create a products management page in a React and Next.js with TypeScript app: define product interface, fetch and paginate, render a table with image, title, price, and delete with confirmation.

Create a reusable product form with material ui inputs for title, description, image, and price, submit to the server, redirect to products page, and reuse it for create and edit.

Edit and update product data using a single reusable form for both create and edit flows, prefill fields from the server, and submit updates.

Create an orders page by adding order and order item models, render orders with an accordion, and display order items in a table showing title, price, and quantity.

Build a profile page with a profile component featuring forms to update user info and password, with prefilled fields and backend submit handling.

The lecture guides setting up Redux in a React TypeScript project, creating actions and reducers, typing a set user action, configuring a store, and wrapping the app with React-Redux provider.

Connect redux state to the layout and profile components using connect, map state to props, and map dispatch to props to manage user data and actions.

Set up a React and TypeScript ambassador project, configure port 4000, integrate a Bootstrap template, and route with React Router DOM to render the products page.

Copy common components, modify models to remove orders and order items, and configure redux with a store and provider for the ambassador setup; add login and register pages and routes.

In navigation, build a header that shows the authenticated user's name with profile and logout links. Connect Redux to manage auth state and conditionally render menu items.

Update the header component to dynamically switch between a welcome title and earned revenue for authenticated users, using use state, useEffect, redux props, and login and register links.

Implement a stats page and a rankings page, fetch stats from the server, display them in a table, and show rankings using key-value entries with navigation and checkout links.

Build a dynamic products section in React and Next.js with TypeScript by fixing links, activating classes, and rendering front-end and back-end product data with images, titles, and prices.

Implement product searching by wiring a filters state to a search input, pass filters to the backend query, and filter products on the frontend by title and description.

Implement product sorting in the frontend and backend by adding a price sort option (ascending and descending) with a dropdown, and synchronize filters and search across components.

Implement lazy loading with pagination by loading more items, updating the page, and concatenating results on the frontend; hide the button on the last page.

Master click-to-select for products by managing a selected ids array, toggling items on click, removing duplicates with a filter, and reflecting selection with a visual border and conditional classes.

Generate links from selected products in a React and Next.js with TypeScript app, using a generate button, notify alerts for success or login failure, and auto-hide messages after a timeout.

Set up a Next.js checkout project with TypeScript, convert the pages to tsx, configure TypeScript and dependencies, and run the app on port 5000 for Stripe integration during development.

Modify the template for a Next.js project by integrating Bootstrap, cleaning a checkout form, removing unused fields, and preparing a Stripe-ready, streamlined address and payment flow.

Map routes in Next.js by creating success and error pages and a shared layout, then enable dynamic routing with a code parameter accessed via the router.

Fetch ambassador and product data by reacting to code changes using useEffect, axios, and backend endpoints, then render user details and a product list with quantity controls.

Compute the order total by initializing per-product quantities to zero, updating a specific product's quantity with a change handler, and summing price times quantity with reduce.

Submit the form by setting first name, last name, email, country, city, and zip to lowercase with underscores, then post to /orders with product quantities and receive Stripe-related data.

Integrate Stripe payments by copying the publishable key, including the Stripe script, initializing Stripe, and redirecting to checkout with a session id to handle success or error pages.

Learn to confirm orders by sending a source payload to the backend's /orders/confirm endpoint, using an asynchronous function and awaiting access to complete checkout.