React and NodeJS: A Practical Guide with Typescript

install Node.js from node.org, set up Visual Studio Code, initialize a project with npm to create package.json, add a start script, run npm start to see hello; next TypeScript.

Install typescript as a dev dependency and globally, set up tsconfig, and convert index.js to index.ts while nodemon watches for changes.

Install express and its types for TypeScript project, create an express app with json parsing and cors, add a get / route returning hello world, and listen on port 8000.

Create routes and a controller in TypeScript, export a register function for express, register a post /api/register route, and test with Postman by sending a JSON body.

Register validation with express validation guides validating the request body in the controller, returning 400 on errors and enforcing email validity with password confirmation.

Learn how to set up a MySchool database with TypeORM in a Node.js project using TypeScript, create a user table, configure entities and connections, and enable automatic schema synchronization.

Register users by defining a user entity as a table with id, first name, last name, email (unique), and password, then use a repository to create and hash the password.

Showcases a login flow by querying the user repository by email, verifying the hashed password, handling user not found and invalid credentials, while planning a jwt for authentication.

Generate a jwt by signing a payload including the user id with a secret, then store it in an http-only cookie for backend use and cross-origin requests.

Retrieve the authenticated user by reading a JWT from a cookie and verifying it with a secret, then fetch the user by payload id from repository and remove the password.

Implement a logout by posting to clear the JWT cookie, setting the same cookie with an empty value and max age zero, then return success or unauthenticated on error.

Learn how to store secrets using an emv file, load the emv config at startup, and access the secret key via process.EMV secret key across development and production.

Create a TypeScript middleware to verify JWT, attach the authenticated user to the request, and apply it to routes to protect logout and expose user data without password.

update a user’s own profile information and password through authenticated routes, returning the updated user data without the password and enforcing password confirmation.

Explore building a user CRUD API with a dedicated user controller, including fetching all users, creating, retrieving by id, updating, and deleting users, with password hashing.

Create a roles entity and link it to users with a one-to-many (many-to-one) relation via a foreign key, then fetch users with their roles.

Create a permission entity with id, number, and name, and implement a many-to-many relationship between roles and permissions using a join table named URL permissions, with appropriate join columns.

Seed the database by creating a urls seed file and a permissions table, then assign admin, editor, and viewer roles with view and edit permissions.

Create and manage roles and permissions using CRUD controllers in a TypeScript API. Retrieve all permissions via authenticated endpoints and update roles with many to many relations.

Create and manage a product entity with decorators and a repository, and expose get all, create, update, and delete endpoints via a product controller under /api/products.

Explore implementing pagination in a TypeScript backend by seeding products with faker and using take, skip, and find and count to return data with total and last page.

Create an image controller and configure multer with disk storage to upload images to a dot uploads folder via authenticated route, generating random image names and returning the file URL.

Expose uploaded images by configuring a static uploads directory with express.static in node and express, so files are served directly from the /uploads path.

Create and seed an order and order item entities, with a primary generated id, created date, and an order-to-items relation, then populate with random items via the repository.

Implement a TypeScript order controller with a paginated get orders function and add getters for name (first name plus last name) and total (using reduce to sum price times quantity).

Create a post endpoint /api/export to export orders and items as csv using json2csv. Generate rows with id, name, email, product title, price, quantity, and return the file.

Learn how to write raw sql to aggregate sales by date by joining orders and order items. Use sum and group by date, with date formatting for frontend charts.

Implement a permission middleware to enforce role-based access control in a React and NodeJS app, handling view and edit permissions for routes like products and users.

Create a reactor project with TypeScript by downloading and installing A.j.'s, run the terminal command to name it reactor admin with the Template TypeScript, and launch on port 3000.

Set up a React project template by integrating Bootstrap, importing its styles, and cleaning the dashboard template, adjusting class names, closing inputs, and swapping styles for a cleaner UI.

split a React app into components by building a navigation component and a menu in a components directory using TypeScript, exporting and importing both class-based and functional approaches.

Create and route two components, dashboard and users, using react-router-dom with typescript. Set up browser router, exact paths, and links to navigate the dashboard and users views.

Implement a wrapper component to render the register page with a distinct template, placing dashboard and register inside a shared layout using children.

Build and refine a register form in a React and NodeJS project with TypeScript by adapting a template, wiring inputs to state, preventing default submit, and preparing backend submission.

Install axios and import it, then post user data to localhost:8000/api/register to register users. Compare handling with then and with async/await, and log the response data to verify the registration.

Learn how to manage redirects in a React and NodeJS TypeScript app by using state and useState to move from registration to login and update the user interface.

Use useState in React to manage a count initialized at zero, and update it via a setter from an input with event.target.value so the display refreshes.

Capture email and password with React state and handle the login form submission. Send a login request with credentials to obtain the JWT cookie and redirect to the main page.

Convert a class component to a functional component and use useEffect to fetch the authenticated user with axios, storing the first name in state and displaying it in the navigation.

Configure axios defaults by setting a global base url and with credentials, streamline endpoint prefixes such as register, and reduce per-request configuration for authenticated calls.

Implement logout in this React and NodeJS app by posting to logout, awaiting the response, and removing the JWT token to redirect users to login and guard the dashboard.

Define a TypeScript user class with public id, first name, last name, and email; initialize via constructor with defaults, add a full name getter, and import and use the user.

Explore how to use NavLink to highlight active routes in a React and NodeJS app, compare it with Link, and resolve multiple highlights with exact path matching.

Explore building a reusable React users component with useEffect and axios to fetch, map, and display user data, including names, emails, and roles.

Learn to implement pagination in a React and NodeJS workflow by adding next and previous controls, managing page state with useEffect, and reloading users with a page parameter.

Learn to delete a user with a confirmation prompt, trigger a delete request, and update the user list by filtering out the removed id.

Create a user using a dedicated form and user create component to collect first name, last name, email, and role, then post to create and redirect to the users page.

Update users by reusing the create form, fetch the user by id from the url, populate first name, last name, email, and role, then submit to update.

Develop and integrate a rules page in a React and NodeJS app, fetch and display rules in a table, and implement create, delete, and menu integration.

Create roles by building a form with a name field and a permissions checklist, fetch permissions, manage selected permissions with state, submit, and redirect on success.

Update roles by editing rules, fetching role data with Axios, and submitting changes via a put request; configure permissions and selected states to reflect updates.

Create a React and Typescript products page with a product model, a data table showing image, title, description, and price, and add pagination and delete functionality via useState and useEffect.

Create a reusable paginator component in a React and TypeScript project by extracting markup, defining lastPage and pageChanged props, and wiring it to product and user lists to avoid copy-paste.

Create a product component with title, description, image, and price, manage inputs with useState, and submit to create products with a redirect.

Learn how to implement image uploads in a React and NodeJS app by wiring an image input, creating an upload function, utilizing form data, and previewing the uploaded image.

Learn how to edit a product form in React using useEffect to pre-fill data from an API, manage image updates with useRef, and perform a PUT update with Axios.

Create a new orders component in a React and TypeScript app, render a table of orders with name, email, and total, and include order items.

Create view-button triggered animations in a React app by toggling item visibility with a selected id. Use max-height, overflow-hidden, and a 1000ms transition to enable smooth collapse and expand effects.

Learn how to export a csv in a React and NodeJS app by implementing an export button, handling a blob response, and triggering a file download.

Learn to build a dynamic chart in a React and NodeJS Typescript app using C3, bind data to x axis and sales, fetch bequant data, and map it for display.

Create a profile page in React to update your data and password with two forms, fetching user data via useEffect and submitting updates with Axios, then optimize with Redux.

Install redux with React Redux and TypeScript, set up actions and reducers, configure the store, and integrate it with the app via the React Redux provider for a user state.

Learn to connect components with redux and react-redux and use mapStateToProps and mapDispatchToProps to access and dispatch the user state across the app.