Learn to create a React app from the ground up with Vite, set up the Stay Sharp project folder, install dependencies, and run the dev server in VS Code.

Explore the React project structure, streamline node_modules and package.json, and clean up package-lock.json, then switch to a Vite template for a lean Kanban board application.

Display dynamic data in components by moving a hardcoded message into a variable and rendering it with curly braces in JSX for production applications.

Create a styling folder with styles.css, import it into app.js, and apply className to the card while using the style prop for inline CSS with camelCase properties like fontSize.

Introduce material ui as a react component library based on Google's material design, and walk through installing dependencies and renaming a sample card to prepare for its use.

Learn to implement material ui in a cart, importing components, using the card with variant outline, card content, typography, and box with container to style a dynamic message.

Learn to render and manage lists in React by mapping array data to reusable cards, using keys, and preparing for prop-based data flow in a production-ready MERN kanban board.

Build a simple React app that uses an isDone state to toggle a Material UI button between pending and done with dynamic color.

Install front-end dependencies for the kanban app, including Material UI, MUI icons, hello pangaea for drag-and-drop, and Redux Toolkit with React Redux, plus React Router DOM and React Hot Toast.

Finish the routing setup in routes/index.js by using lazy loading and suspense with a loading fallback, exporting appRoutes that nests five routes (private and public) inside a suspense wrapper.

Implement a production-ready routing layer by nesting a root component, configuring browser router, and mapping paths to lazily loaded elements with suspense, including a landing page for the home route.

Learn to build a landing page from scratch with Material UI, using a mockup and implementing box-wrapped app bar, toolbar, and typography, with props like position fixed, color, and elevation.

Develop a landing page with Material UI by adding an app bar, typography, and a box containing login and sign up buttons that navigate to routes using React Router's navigate.

Build the landing page with MUI by adding typography, grid, and a get started today button, and import the board sample image from assets/images; debug and refresh for clean render.

Builds a landing page by creating a feature card component in landing jsx, wiring Material UI cards, icons, and a features grid via map to match the mockup.

Create and style a registration page by adding a register route and building a register.jsx with material ui boxes, including content, imports, and a cart component.

Create a reusable Material UI header for the registration page by building a custom styled header component, passing a title and optional subtitle, and integrating it into the register JSX.

Implement a registration form using Material UI text fields, wiring a new user state and onChange handler to capture full name, email, password, and confirm password.

Develop a login page in jsx using material ui components (box, card, card content, text fields) with a custom header, email and password fields, and self-closing elements.

Develop a login page using MUI by adding a continue button inside the cart content, configuring useNavigate, and adding two link boxes to register and to the landing page.

Initialize the backend for the kanban board: create a backend folder, run npm init, install dependencies, set up index.js on port 8000, add a test route, and configure nodemon.

learn how prototypes reveal the need for environment variables by creating a .env file beside index.js and configuring env.config.js to export a config object that reads them.

Reflects on season two backend lessons to improve season three, introducing a constants file for readable http status codes and implementing them in routes to improve clarity and maintainability.

Implement a response handler to standardize API success responses with a default 200 code and data field. Apply it across routes to provide structured, customizable messages and improve backend responses.

Standardize server responses in a MERN app by implementing response handlers with static methods for send success and send error, using a default and custom messages, and testing with Postman.

Connect your backend to a MongoDB database by creating the database and users collection, obtaining the connection string, configuring environment variables, and implementing an async connect db function.

Model a production-ready kanban data structure in the MERN stack by embedding boards, columns, and tasks within project documents—three default columns (to do, in progress, done)—linking users via IDs.

Define the project model with mongoose, including project name, core technology, description, and a required user ObjectId reference to the user model. Embed a board, enable timestamps, and export.

Create and export a mongoose board schema with three default columns (to do, in progress, done), embed it into the project model, and update imports and timestamps.

Create the task model in the models folder by importing mongoose, exporting the schema, and including task summary, acceptance criteria, status, a user reference, and timestamps.

Explore building a production-ready back end by implementing the controller and service layers for user registration, including structured JSON responses and readable status codes.

Implement the repository layer to persist users in cloud MongoDB by creating and exporting a UserRepository, with an asynchronous createUser method that saves the new user and returns the result.

Enforce user uniqueness by validating emails in the service layer, query the repository for existing users, and return a 400 error with user email already exists.

Create a custom Axios instance to handle API calls to the backend. Configure the base URL localhost:8000/api/v1 and json headers, then export the instance from services/axios-config.js.

Import the axios config from the services folder and create an auth service that exports a register method. The method posts the payload to the backend using the configured endpoint.

Build a React front-end validation layer by adding a utils toast notifications module using React Hot Toast, exporting a notify object with success and error methods to show styled toasts.

Submit a valid user to the backend by calling the auth service's register method in a try-catch, show loading, notify on success, and navigate to the login page.

Set up backend error notifications in the register flow by capturing axios error responses, showing duplicate email messages, and updating error and loading states for the user.

Set up the login route and post request, validate the email and password, and wire the flow through the controller to the service. Test with Postman for end-to-end login validation.

Implement backend login business rules by extracting email and password from the request, validating user existence with the repository, and verifying the password with bcrypt compareSync.

Develop a jwt helper to generate a token for valid credentials, exporting a class with a static generateToken method that signs options (issuer, subject, algorithm, audience, expiry) using config values.

Develop a JWT token by implementing the sign method with data and a server secret from the env file, including error handling and token generation testing via Postman.

Generate an access token cookie in the login flow, configure http only, secure, and same site none with a 7000-day expiration, and return the user without the password.

Enable a private get all projects route after login and wire up route, controller, and service to enforce authentication and test via Postman.

Develop a middleware that verifies a JWT access token from cookies via a cookie parser before hitting the project controller in a MERN app, returning 401 when unauthorized.

Configure the front end to render the project dashboard by wiring root, public and private routes, and implement the project dashboard component with suspense and loading fallback.

Create a custom breadcrumbs component in a React app to visualize location, enable back navigation to projects and tasks, and dynamically render path segments by parsing and formatting the URL.

Build breadcrumb items from path segments using a reduce function, calculating total and index, constructing paths with template literals, and pushing formatted segments into an initial empty array.

Configure front-end authentication by creating a Redux store with an auth slice that tracks the user and isAuthenticated, persists to localStorage, and provides login and logout reducers for private routes.

Implement the login api call in the auth service, validate inputs, manage loading and error states, and navigate to the projects view on success.

Explore configuring private and public routes in a MERN app by leveraging authentication state to guard dashboards, redirect unauthorized users, and conditionally render outlets.

Implement a create project modal in a React/MERN front end, wiring useState, open/close props, material ui styling, and project dashboard integration.

Implement a project form by adding Material UI text fields for name, core technology, and description, wiring state, onChange, and onSubmit to emit a JSON object to the backend.

Implement the repository layer to create a new project with an embedded board, and initialize three board columns, including a to do column.

Configure axios interceptors to block expired tokens, show a Suite Alert notification, clear local storage, and redirect users to the login page on 401 errors.

Implement repository and service layers to fetch all projects for the current user, returning project objects (minus boards) in newest-first order via API v1 projects, with error handling.

Create a Redux Toolkit project slice to fetch all user projects via API, configure initial state with an empty list and project object, and integrate the reducer into the store.

Enable a per-project actions menu and delete workflow in the front end by managing selected project, anchor element, and delete confirmation dialog with Material UI components.

Implement a delete confirmation dialog for the delete project option in a MERN kanban board using Material UI, wiring open/close, confirm delete with try-catch, and warn deletion cannot be undone.

Enable the delete operation by adding a delete project method to the project service and dispatch a fetch projects call to refresh the project dashboard after deletion.

Implement the update project operation in the project service layer, console log the error and return an error response, validate existence, then update via atomic update and return success.

Finish the service layer and implement the update project endpoint, reusing validation to ensure data requirements are met. Test with postman by updating a project and preparing the front-end integration.

Update the project state flow by importing set single project, adding an update action, and wiring a modal edit flow that preserves the selected project during menu close and delete.

Learn to implement a production-ready project form in a MERN stack app, using state to toggle between create and update, call appropriate service methods, and manage modal state.

Build a front-end kanban task board in React with create, delete, view, update, and drag-and-drop across columns, plus per-project and per-column tallies and navigation to boards.

Implement the task board view using Material UI boxes, breadcrumbs, and typography to display the project name and description and enable navigation between tasks and projects.

Continue building the task board component by adding three boxes with counters for to do, in progress, and done, plus a final total tasks box with placeholders for dynamic calculations.

Implement the task board action bar by adding a create task button and a back button, wiring imports, navigation, and a modal toggle to enable task creation.

Build a custom modal component in React with props and Material UI styling, showing an optional title and child form content, controlled by useState for opening and closing.