React and NestJS: A Practical Guide with Docker

Install NestJS and run nest new to create a project named nest admin. Start the server and open localhost:4000 to see HelloWallet running.

Set up a docker-based development environment for a React and NestJS app by creating a docker file and docker compose, installing dependencies, and configuring a MySQL database with volumes.

Explore Nest modules and controllers by creating a user model and a TypeScript get decorator endpoint, and see how the service backs data for the /users response.

Connect a NestJS app to a MySQL database in Docker and manage migrations. Define a user entity with TypeORM and create the users table with a unique email.

Create and inject a user service using a repository to connect to the database, retrieve all users with find, and expose them through the user controller.

Register users via a NestJS authentication module, exposing a post /api/register endpoint under a global API prefix. Create a user model and controller, and test data submission with Postman.

Register users by invoking the user service create method with request body, fix circular dependencies via the os model, and verify a generated id in the api users list.

Hash passwords before storing them by using the decrypt package for security, import it in TypeScript, and switch to decrypt js for cross‑platform consistency between mac and docker environments.

Implement robust validations for the register form by defining a register DTO with not empty fields, email format, and password confirm, using class-validator and a global validation pipe.

Implement a login endpoint with a post request, validate email and password, fetch the user by email, compare passwords, and throw not found or invalid credentials when needed.

Generate a jwt, sign it, include the user id in the payload, and send it via an HttpOnly cookie for authentication.

Fetches the authenticated user from the JWT cookie by verifying the token and returning user data, using cookie parser and enabling credentials for cross-origin requests.

Explore using NestJS interceptors to sanitize responses by removing the password with the serializer interceptor, and apply a global interceptor at the controller level to affect every user request.

Implement a logout function that clears the cookie and JWT via a post request, returning a success message, and fix internal server error with an old guard.

Build authorization guards in NestJS by validating JWT tokens from cookies, protecting routes with authentication, returning true or false, and handling forbidden resources through guarded endpoints.

Implement a NestJS user model with a create method and DTO validation, hash the password, and expose authenticated endpoints to get a user by ID.

Share the JWT service across controllers by creating a common model, importing and exporting it through a common module, and verify access by logging in to retrieve user data.

Demonstrates implementing a put-based update for users, handling id and body data, updating names, and integrating delete alongside the five REST API methods for users.

Implement pagination for the user list by adding take and page parameters, computing skip and total, and returning users with passwords removed alongside the last page information for navigation.

Add a roles module with a Role entity (id and name) and a repository, service, and controller to implement CRUD operations, including creating and listing the admin role.

Learn to implement a many-to-one relationship between users and roles using foreign keys, a join column, and role IDs, including creating roles and assigning them to users.

Create the permission model, entity, controller, and service, then expose a get all permissions method and prepare a many-to-many link between permissions and roles.

Learn to implement a many-to-many relationship by creating a join table for URL permissions, linking permissions and URLs, and managing role permissions through create, update, and relation loading.

Develop an abstract service to centralize common crud operations using a generic repository, extend it across services such as user to remove passwords, apply pagination, and support optional relations.

Update the authenticated user's first name, last name, and password via put requests, resolving a circular dependency between user and OAuth models with forwardRef in NestJS.

Create a product module in NestJS: define a product entity with id, title, image, description, and price; implement repository-backed service and controller with CRUD and paging.

Master image uploading in NestJS by building a file-upload controller with a file interceptor using disk storage, generating random filenames, storing in an applauds folder, and serving images via URL.

Create and export order and order item entities, establish a one-to-many relation between orders and order items, and implement a secured get orders endpoint in the controller and service.

Expose computed fields in the order entity to show a concatenated name and a computed total by reducing over order items' price and quantity.

Add a post /export endpoint to export orders as a csv file. Assemble orders and order items into a csv, set content-type and attachment headers, and return the downloadable file.

Build a raw sql endpoint to generate a sales chart by date by joining orders and order items, summing price times quantity, and grouping by date.

Learn to implement a custom permissions decorator and a permission guard in NestJS to control access across controllers using metadata and reflection.

Learn how NestJS access guards enforce permissions by loading the authenticated user and role, checking permissions via JWT authentication to secure routes such as viewing users.

Install and initialize a new React app named react admin using the TypeScript template, then start the dev server on port 3000.

Integrate a bootstrap dashboard template into a react project by importing bootstrap css, cleaning extraneous files, and adjusting markup (className and input closures) to render a clean dashboard.

Split the app into components by creating a navigation component and a menu component in a TypeScript project, illustrating both class method and hook's method approaches with imports and exports.

Build routing with react-router-dom by creating dashboard and users components, wrapping with BrowserRouter, defining exact routes for '/' and '/users', and adding links for navigation.

Create a dedicated wrapper component to supply a unique template for the register page, wrap other pages, and render children via props.children to control layout.

Craft a registration form in a React and NestJS project, wiring first name, last name, email, and password inputs, handling changes and submit with preventDefault to the backend.

Learn how to send http requests with axios in a React and NestJS project, including post requests to /api/register, handling responses with then and async/await, and inspecting response data.

Create a login component and redirect the user from register to login after submission, using a state flag to trigger navigation to the log-in path.

Use React hooks with useState to manage a zero-initialized count, update it via setCount from a number input, and render changes to illustrate immutable state and glass components.

Clean up the login form by removing unused fields, implement React state for email and password, submit via axios to the login API, enable cookies, and redirect on success.

Display the authenticated user’s name in the navigation by converting to a function component, fetch the user with axios inside useEffect, and handle credentials after login.

Configure global axios defaults with baseURL and a register prefix to standardize endpoints, and enable withCredentials globally to streamline authentication across the app.

Learn to implement logout in a React and NestJS app, including posting to logout, removing the JWT token, and redirecting unauthenticated users back to the login page.

Create a user class in a models folder, define id, first name, last name, email, and role as public properties, initialize them in the constructor, and add full name getter.

Learn to use NavLink to highlight the current route by attaching an active class, compare it with Link, and apply exact matching to ensure accurate highlights.

Create a React users component that fetches all users with axios in useEffect, stores them with useState, and renders user data and a role object per user in mapped list.

Implement client-side pagination in a React app by adding page state and next and prev handlers. Use useEffect to reload users when the page changes and guard against out-of-range pages.

Delete a user by wiring a delete button that prompts for confirmation, sends an Axios delete request to users/:id, and updates the UI by filtering out the removed user.

Create a user form in a React and NestJS app, fetch roles with axios and useEffect, then submit to create the user and redirect on success.

Update users by building a user edit component that mirrors the create form, fetches data by id, pre-fills first name, last name, email, and role, then submits changes to users/:id.

Create and integrate a roles page in the React app, fetch all roles via API, render a roles table with delete functionality and confirmation.

Create roles by rendering a form with a name field and a permissions checklist, fetch and display permissions, handle checkbox selection, and submit to create the role with a redirect.

Update roles by editing the role name and permissions, prefill data from get roles using props, and submit changes with a put request to apply updates.

Create and display a products page in a React app, get product data and map it to a table with image, title, description and price, and implement delete and pagination.

Create a reusable paginator component to manage product and user pagination, passing lastPage and page change handlers as props to reduce code duplication.

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

Implement image upload in a React and NestJS app by adding an image input, handling change events, creating form data, posting to the upload endpoint, and displaying the uploaded image.

Learn how to use useRef and useEffect to prefill a product edit form, manage image inputs, and perform updates with axios in a React and NestJS app.

Build a React orders component that fetches data with axios, renders a paginated table of orders and their items, defines order and order item models, and enables view interactions.

Learn to implement click-driven animations in a React app by toggling item visibility with a view button, using height transitions, max height, and overflow hidden, managed by a select state.

Implement an export button that posts to the backend, retrieves a csv blob, and downloads orders.csv by creating a blob URL and link.

Build a chart in a React dashboard by installing c3 and fetching data with axios to map dates to x axis and sums to y axis.

Build a React profile page with two forms for account information and password, prefill fields from user data, and submit updates, while using redux to prevent redundant fetches.

Install redux with npm and react-redux, create actions and reducers, configure the store, implement the set user action and reducer with immutable state, and wrap the app with a provider.

Learn how to wire a React component to a Redux store using react-redux connect, mapStateToProps, and mapDispatchToProps, dispatching setUser actions and sharing the user state across components.