React & Redux Hero: Build secured , scalable Web App !!

Assess whether you need a state management library by considering app size, shared state, API handling, and persistence on reloads with local storage, then choose a compatible library.

Learn how to use Redux selectors to read todos from the Redux store, connect components with the use selector hook, and implement add, edit, remove, and toggle actions.

Learn to manage the sign-in form with redux form by wiring the component, handling submit, and using redux form fields to track username and password.

Improve a sign-in form with front-end validation using Material UI text fields, Redux Form meta, and the validator library to show errors, helper text, and disable submit until valid.

Implement a reusable modal infrastructure with redux, dispatching modals from listings, header, and details pages. Use a base model component to manage submodels like success and logout dialogs.

Implement a redux-based modal infrastructure using Material UI dialog, with a dedicated modal slice, selectors, and a reusable modal component bound to app state, enabling open and close controls.

Build a modal infrastructure with a modal types enum (success, add properties), wired to redux to open, render, switch content, and close modals, including a header with a close button.

Learn to pass dynamic values into translated strings with i18n placeholders, using name and rating as examples, and render localized messages in multiple languages.

Set up a backend with MongoDB Atlas by creating a free M0 cluster on AWS, adding a database user with readWrite, and whitelisting your IP to enable backend access.

Learn to standardize backend responses with a reusable API response class in TypeScript, providing structured success and error messages for sign in and sign up routes.

Ensure the backend is running and MongoDB is connected, then test issuing a request to the backend. Tackle missing Arctic Query API middleware and network error in separate videos.

debug the sign-in flow by validating backend with postman, aligning front-end payloads (email/username) and password, and presenting errors via material ui alert.

Implement JWT sign in on the server by generating an access token with JSON Web Token, including a payload via a shared auth utility, and setting issuer and expires in.

Add a refresh token to sign in by generating a JWT refresh token alongside the access token, with short-lived access tokens and a user id in the response.

Learn to extract the user id from a JWT token via middleware, attach it to the request, and populate the created by field when creating properties.

Integrate front-end notifications using Material UI's Snackbar and Alert, wiring a notification slice in Redux to dispatch and display success or error messages with auto dismiss.

Fetch and display properties on the frontend by querying the backend property list endpoint with RTK query and render property cards.

Persist the Redux state across page refreshes using Redux Persist, so the app retains access and refresh tokens and user data in local storage after sign in.

Apply user interface fixes and Redux persist adjustments to align stylings, fix the blacklist key casing, and add an image field, then re-authenticate and verify the property list updates.

Learn to implement refresh token flow in RTK by integrating a base query with re-auth, refreshing tokens from Redux state, and replaying failed requests to secure a scalable React app.

Implement async mutex to prevent multiple base queries and duplicate token refresh calls by acquiring a lock around API calls, then releasing after completion.

Implement authorization architecture with organization-based roles and policies, tested on the backend and reflected in the React and Redux frontend. Admin, editor, and publisher roles determine permissions and UI behavior.

Implement an auth higher order component in a React and Redux app to render user interface elements based on user roles and permissions, mapping backend permissions to frontend state.

Learn to protect endpoints with role-based permissions using a reusable useIsAuthorized hook and protected routes, routing users to sign in when unauthorized and enabling add user access.

Learn how to implement short polling to refresh the front end from back end updates using Axios, useEffect, and setInterval, with front and back end changes and memory cleanup.

Register clients for server-sent events and push todo data from the backend via a persistent event stream, handling headers, data formatting, and disconnects for a scalable web app.