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

Design and implement a polished sign-in component using Material UI, including a paper container, typography, text fields, and a sign-up link, with styled components for reusable layout.

Add a sign-up page by reusing the sign-in components, and implement a domain-level shared auth library with a centered background using a Material UI container.

Programmatically navigate between sign in and sign up pages using the useNavigate hook from react-router-dom, and implement a shared styled link with hover cursor pointer and optional object-based styling.

Explore the difference between controlled and uncontrolled components in React, focusing on how state is managed, validation, and real-time updates for sign in and sign up forms.

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.

Explore how redux toolkit simplifies state management in a react app by introducing actions, reducers, and slices, and learn to build a redux-based to-do list with selectors.

Convert a playground project into a redux enabled app by adding react-redux and redux toolkit, creating a store, and implementing a todos slice with add, remove, and toggle.

Hook up the add todo action to the Redux store by dispatching it from the main component, update reducers accordingly, and inspect state changes with Redux dev tools.

Learn to manage todos in a central Redux store by implementing remove todo and toggle completion with dispatch, updating state.todos with filter and map, and later query with selectors.

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.

Explore how Redux form centralizes form state, simplifies multi-page forms, and provides hook actions and validation feedback, enabling easier integration with Redux store and reliable form management.

Install the Redux form, React-Redux, and Redux Toolkit, configure the store, and provide it to the app; connect the Redux form reducer to manage sign-in and sign-up state.

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.

Build and refine a Redux form-driven sign-in by adding a password field, wiring submit handling, logging form data, and exploring core components for scalable UI with Redux Chrome DevTools.

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 the signup page using Redux form, wiring email and password fields with Redux text fields, labels, and on submit handling, then discuss production-grade refactoring for cleaner, consistent code.

Develop coding consistency by organizing components, defining prop types, and using reusable validations; implement consistent API calls, routing, state management, and consider component lifecycle for maintainability.

refactor the react app using the code consistency principle by introducing a reusable form constant, organizing sign in and sign up fields, and extracting validations into utility modules.

Create a landing page with a fixed header and scrollable property listings. Include a search bar and category bar, with a bottom-right plus button for adding properties.

Build a responsive app bar in React using Material UI, featuring a custom search bar with controlled input and right-aligned icons, plus a dedicated search bar component for scalability.

Add a category bar under the app bar using Material UI paper and chip, with a snow boarding icon, and adjust margins, gutters, padding, and max width for full-width layout.

Create a new property card component (property-card.tsx) that renders a dummy image, title, price, and star rating, styled with a border radius and blue gray 700, yellow 500.

Add a floating action button on the property listing page to open a contextual menu for adding or deleting properties, while implementing a language selector for the UI.

Explore the scalability principle by building a code infrastructure that standardizes component architecture, redux-based state management, lazy loading, caching, and patterns for modals, routing, API data handling, and normalization.

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.

Enhance the add property modal with a Redux form and material UI form, including name, description, neighborhood overview, price, and summary fields with save and cancel actions.

Implement a robust i18n translation infrastructure in a React app with i18next and react-i18next. Build a language switcher for English and French and apply translations with the t function.

Manage frontend language with a user-specific redux language state, a language selector in the app bar, and i18n updates via i18next when the user language changes.

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

learn how to handle unexpected errors in React by building a class-based error boundary using componentDidCatch, and render a graceful runtime error message at the top of the component hierarchy.

Install the react error boundary package and swap in a functional boundary. Create a simple error fallback, pass it as the fallback, and use reset error boundary to recover.

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.

Connect the back end to a MongoDB cluster, load the sample Airbnb data, rename config_sample.ts to config.ts, install dependencies, start the server, and verify sign in with Postman.

Explore the backend architecture from router to provider, see how the service layer handles sign up and sign in, and relate Mongoose with MongoDB to the database.

Encrypt the password during signup by hashing with bcrypt and a salt, storing the encrypted password in MongoDB and never returning plain passwords; standardize error responses for frontend handling.

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.

Standardize backend error handling by implementing a custom error class with message, code, and status, returning a unified api response; use an error map to organize common errors.

Connect the front end to the back end using redux async actions and middleware. Introduce RTK query for data caching, auto API calls, data normalization, and clear API state actions.

Configure rtk query for a react app by creating a user api with a base query and a sign in mutation that posts credentials to the backend at http://localhost:4000.

Resolve mongodb atlas cluster connection issues by configuring network access and whitelisting, using manual IP address entry and allow access from anywhere as a temporary measure.

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.

Learn to implement CORS on the back end to enable legitimate cross-domain requests, manage origin policies, and fine-tune access-control-allow-origin for browser clients.

Hook RTK query to the Redux store by wiring the createApi reducer and middleware, enabling sign-in mutations and automatic caching with API state.

Normalize backend data with a transform response function and pass only transformed data to components. Disable sign in during loading and navigate to listings page on success using RTK query.

enhance the sign in endpoint by validating the password against the stored hash, using a sign in route, and returning generic invalid sign in errors with proper status codes.

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.

Explore authentication and authorization using JWT-based flows, where front-end and back-end validate credentials, issue tokens, and enforce roles and permissions on secured endpoints.

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.

Explore how jwt tokens and refresh tokens secure web apps and enable seamless sign-ins. Understand the flow between frontend and backend, handling 401 and 403 errors, and token expiry strategies.

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.

Validate jwt tokens in a protected property route, verify issuer and expiry with jwt.verify, handle missing or invalid tokens with 401 authentication failed, and discuss bearer conventions.

Centralize jwt configuration and implement reusable express middlewares to authenticate routes, using a policy that verifies tokens and calls next for protected endpoints, ensuring secured, scalable web app routes.

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.

Handle expired access tokens by returning a 403 to trigger a refresh, implement a get refresh token endpoint, validate the refresh token, and issue new access and refresh tokens.

Learn how to prevent reuse of refresh tokens by maintaining a per-user token chain in a database, invalidating older tokens and validating with the identity provider.

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.

Save the access token, the refresh token, and the user id in the Redux user slice on sign-in, and update the user data to optimize front-end authentication and authorization.

Connect the ad property form to Redux form, submit via a create property mutation, and pass JWT tokens in headers using prepare headers from Redux state.

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

master reducer path and render properties via API by refactoring a property card to accept image, name, price, and rating, and mapping API data into a grid.

Rework the property listing UI using a Material UI grid container for cards with responsive breakpoints xs, md, lg, remove rating text, format the rating as 8.2, and apply padding.

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.

Explore how RTK caching uses a query cache key, subscribers, and a 60s expiration to serve data from the server or the cache for shared endpoints like /user/1 and /user/2.

Explore RTK caching in action on todo by implementing get todos queries and mutations (create, update, delete) with an in-memory backend, showcasing subscription tracking and automatic cache removal.

Learn how RTK query automatically fetches your to-dos with refetch on mount, argument change, focus, and reconnect. Configure setup listeners to refresh the list on mutations and network recovery.

Prefetch RTK queries on hover to fetch a single to-do and speed the user interface, using use prefetch and options like older than five seconds and force true.

Learn to implement optimistic updates with RTK cache in a React Redux app, update UI before server response, and rollback on error using query fulfilled.

Fix id mismatches during optimistic updates by replacing the front-end temporary id with the server-generated id after a successful response, using Redux Toolkit's updateQueryData to adjust the cache.

Learn to add cache tags to the property app, invalidate the property list on new property creation, and manage redux persist cache for fresh data.

Learn to use the redux persist blacklist to prevent persisting frequently changing data, such as api endpoints, in the redux store, ensuring api calls stay up to date.

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.

Learn how to handle refresh token failure by clearing user data and redirecting to the authentication screen, using a nav slice and the base API dispatch to manage routing.

Use Redux selectors to read the nav route and redirect on reauth failure, then clear route data after sign-in, illustrating token handling and refresh flow in a secured 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 a backend authorization infrastructure, test with postman, and connect it to the front end. Define roles admin, editor, publisher; map permissions; assign roles on sign up; add route checks.

Implement a route-level authorization policy with a permission map and a custom middleware that validates tokens, reads user roles, and enforces permissions like add user or create property.

Debug and validate authorization logic by setting debugger points, checking role from token data, and correcting route setup to ensure proper access control for editor users.

Implement front-end authorization by mapping user roles to permissions and using a higher order component to show or hide user interface elements like create or delete property.

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.

Explore real-time communication strategies for web apps, including short polling, long polling, server-sent events, websockets, webhooks, and the differences and use cases of socket.io.

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.

Master long polling by holding server requests for updates and reissuing them, improving efficiency over short polling in both back-end and front-end implementations.

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.

Learn how to implement server-sent events on the front end with an event source, handle onopen and onmessage, parse event data, and update the to-do list in real time.

Learn how the backend pushes new todos to connected clients via server-sent events, updating the response object and sse clients to stream data to the front end immediately.

Explore how WebSocket enables real-time bidirectional communication between client and server, with handshake and socket.io. Set up the server with express and test using postman.

Explore real-time messaging with Socket.io by sending and receiving stock and chat events between client and server, including custom event types and on message handlers.

Learn to establish a Socket.IO frontend connection in a React Redux app, create a socket utility, and handle connect, disconnect, and notification events, with CORS setup.

Publish a todo created socket event from the backend, complementing server sent events, and broadcast the new todo to connected clients for real-time frontend updates via socket connections.

Implement short polling with RTK Query to fetch and refresh the notification list on the frontend, wiring a notification API and updating the UI in real time.

Replace short polling with a socket.io real-time stream to push notifications from the back end to the frontend, updating the arctic query cache on each event.