React Monorepo: Fluent UI, MobX, CyPress, Vitest & More

Set up the Udemy environment for this course and optimize playback by setting the speed to 1.25 or 1.5, and configure 1000 and ATP for better results.

Install Node.js and npm on Windows using nvm, download the exe, and verify version 20.12.2, then install npm globally and check with npm list.

Install the nx cli globally and explore the nx workspace features that organize apps, libraries, and shared code in a monorepo, enabling easy project addition and refactoring.

Create a new nx workspace for the task manager project, set up the project folder, and configure Cypress for end-to-end testing with GitHub actions and Nextcloud.

Explore the React app file structure, including the apps folder, task manager, main.tsx and project.json, and bit config; learn to run with NX and create multiple apps with separate URLs.

Understand the configuration files in a react monorepo workspace, including a shared package.json, per-app configs, and end-to-end testing setup for cyprus.

Plan a scalable react monorepo by organizing libraries under a leaves folder, including task-manager features, core, models, modules, and a shared UI, with vitest for testing.

Create a mock API server with json server by initializing npm, installing json server, and configuring a db.json with dummy data for posts, comments, and profile.

Install the axios library, a simple promise-based http client for the browser and Node.js, in the react monorepo by running npm install axios, then verify version 1.618 in package.json.

Create an http agent for the React Monitor app using axios, with a base URL and get, post, and delete methods connected to a JSON server at localhost:3000.

Create an http agent with CRUD methods for tax data, including list and paginated fetch, detail by id, and create, update, delete operations, using axios and template URLs.

Create and organize models in the tax manager module library, including ajax response, task, and task form values, then import and map them across React monorepo for ajax data handling.

Install MobX and mobx-react in your React monorepo to adopt a scalable state management library that avoids prop drilling and streamlines shared data across components.

Set up a MobX task store with an observable task array and loading flag, plus a loadTask method to fetch tasks for the details component via makeAutoObservable.

Define private get and set task methods in the task store, use an observable task array, and implement create, update, and delete with JSON server synchronization.

Create MobX actions and observables to manage tasks with a load method for paginated lists, plus a pagination store, dialog store, and shared store context for the React monorepo.

Create essential React components for the task manager app, including task list, task form, and task details, with proper exports and a test-friendly Vite bundler in a monorepo setup.

Install Fluent UI React components in the monorepo and implement a Fluent UI table in the task list, wrapping it in a card and adding action icons.

Integrate Fluent UI into the task form by adding text input, textarea, checkbox, and buttons, wiring title and description with basic validation.

Implement Fluent UI into a task details component by adding title, subtitle, and description tags, applying styles, and testing with routing.

Connect the mobx store to the task list component in a react monorepo, implement paginated tags loading, and wrap the component with observer for task updates via a json-server backend.

Connects the task list component to the MobX store, enabling create, edit, and delete via a dialog with the task form, plus loading and pagination.

Create and export independent react components—spinner, dialogue, pagination, and breadcrumbs—from a shared UI library using fluent UI. Adapt props, tests, and imports within a react monorepo workflow.

Create and export a root module in the modules library, wire up routing and shared components, and integrate the Movex state management to support dynamic tasks, pagination, and UI elements.

Connect the task form component to the Movax store by converting the tax form to a React functional component, wrapping with observer, and implementing form state, validation, and CRUD operations.

Connect the task details component to the MobX store, fetch the task by id from URL parameters, and render dynamic title, description, and completion status.

Learn how to set up and run unit tests in a React monorepo using Vitest, including test configuration, running specs, and integrating with Cypress for end-to-end testing.

Write unit tests for the task manager app using vitest, mocking components and rendering with memory router to verify task list, task details, and task form behavior.

Set up and run end-to-end tests with Cypress in the React monorepo workspace, covering task manager and activity manager, with a configurable base URL.

learn to build the tax manager app for production by running nx run many:build to compile all apps and libraries in the react monorepo and generate a dist folder.

Configure deployment options by updating project.json targets for Netlify and hosting, and enable GitHub pages deployment from the root package.json. Install gh-pages and set predeploy and deploy scripts for dist/apps/tasks-manager.

Deploy the task manager app to a hosting platform using nx deploy, resolve a circular dependency between shared UI and task manager core, and validate GitHub pages deployment.

Review the project setup and architecture, including Task Manager and Activity Manager apps, shared libraries, core modules, fluent UI, Axios APIs, mocks, and Cypress and Vitest end-to-end testing.