Build a Production-Ready Kanban Board: MERN, SSO & Azure

Launch your first React single-page app with a quick setup, exploring JSX, template literals, logic in JSX, components, props, and state guided by the official React docs.

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.

Discover how JSX, the JavaScript syntax extension, lets you write HTML markup and JavaScript in one file, enabling declarative front-end code that renders UI components.

Create a first React component in a components folder (cart.jsx), render it in the root div via app.js, and use Es7 React Redux snippets to boilerplate a Material UI card.

Discover how React components form the building blocks of a single page application. Encapsulate logic and appearance, enable reuse, and consolidate HTML, CSS, and JavaScript in a single file.

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.

Explore conditional logic in JSX to toggle a display message and change styling with boolean state and CSS classes like display true class and display false class.

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.

Master state management in React functional components by using the useState hook, toggling each card's isDone value with an onClick button, and preparing for the MERN Kanban board next steps.

Create a new react project with vite for a mern kanban board, customize with material ui, remove boilerplate assets, install dependencies, and launch the dev server on localhost:5173.

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.

Create the landing page component for the kanban app using Material UI in landing.js. Define public and private routes in routes.jsx with lazy loading to improve performance.

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.

Create the routing layer by adding public and private routes components in react, with public as the parent for public pages and private for authenticated content.

Map the public routes list to render dynamic route components, importing private and public routes, and pass key, element, and restricted status for authenticated access.

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 a landing page using Material UI components, including an app bar and containers with grid and typography to organize your learning and solo projects.

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.

Build a cleaner landing page by adding a features section with MUI, a minimized app bar, containers, typography, and a grid of feature cards.

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.

Create a reusable MUI registration button and prepare the form for submission by building a custom button component, wiring props like label, variant, and icon, and applying theme-based styling.

Implement the onsubmit function and build a MUI based registration page with a full-width custom button, navigation to login, and links back to the landing page.

Build a login page alongside the registration form by creating a login component, managing login state with email and password, handling onChange and onSubmit, and adding a public login route.

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 a mongoose-based user model by creating a user schema with name, email, and encrypted password, enable timestamps, and export the model for backend use.

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.

Wire the backend for user registration in a MERN Kanban board, configuring the port, body parsing, and a new /auth/create route with a Postman test.

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.

Implement password encryption using hash and salt with bcrypt in the user service, ensuring passwords are unreadable in MongoDB and not returned in server responses.

Implement a Joi-based validation layer to verify the request body before the controller, enforcing required name, email, and password with min length and pattern, plus confirm password.

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.

Implement front-end validation in a MERN app by wiring a notifications layer, managing error state, validating all fields and password match with toast alerts.

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 project dashboard view with Material UI by building a theme (typography and color), wrapping with a theme provider, and adding box components and the css baseline.

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.

Build a production-ready kanban board project dashboard using MUI breadcrumbs by mapping breadcrumb items, using a chevron separator, typography for the last item, and a link for non-last items.

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.

Configure axios with credentials enabled on the frontend and update the backend cors in index.js to allow credentials and an origin of localhost:5173.

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.

Enhance the project board after login by adding a toolbar with a create project button and a projects table, while validating access via cookies and local storage.

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 a front-end project table for the production-ready kanban board by scaffolding components, wiring a table with material UI, styled headers, and preparations for CRUD operations.

Implement styled table rows and cells for the project table in kanban board, adding odd-row background and hover highlights, and dynamically render project name, core tech, and description from database.

Fill the project table gap by adding a right-aligned action cell with a material ui icon button (more vert) and verify the three projects list in frontend and backend.

Build and integrate a side navigation for the project dashboard that appears when authenticated, including a projects link and logout, using a bare-bones side nav component.

Wrap app roots in a box to shrink the side bar, then build a Material UI driven side bar with projects and logout items and onClick navigation.

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

Implement the service layer to retrieve the current user from the request, create a linked project, handle unauthorized errors, and return a concise response without the board.

Build a front-end project service in React, validate project name and description, and wire the onSubmit to post a new project to the back end using axios.

Submit the form to the back-end with loading and error states, using a try/catch and a backend service call, and handle token expiry by redirecting to login.

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.

Implement a fetch projects thunk in the project slice and configure extra reducers for pending, fulfilled, and rejected states to load and manage project data from the server.

Display the project list from state in a table by mapping projects, showing name, core technology, and description, using the useSelector hook, a loading skeleton, and unique keys.

Set up and test a delete endpoint in the MERN backend by implementing a delete project by id route, controller, and service, and verify it with Postman.

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.

Implement a delete confirmation dialog in a kanban board app by adding material UI actions for cancel and delete, wiring close and confirm deletion handlers.

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 an atomic update by id with updated data on the back end and add a project exists check to prevent updating non-existent projects.

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.

Implement frontend update flow by adding a projectService method to send id and payload to the backend, and extend projectSlice with reducers for set single project and clear single project.

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.

Load and edit the project form by pulling the project from state, storing its id, using useEffect to populate data, and toggling the title between edit project and create project.

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.

Implement a custom modal in the kanban task board by adding text fields, an onchange handler, a status select, and submit handling with Material UI components for creating tasks.

Finish the custom modal form by adding a form-control box with cancel and create task buttons, wiring onsubmit and onchange to capture data for the back end.