Ultimate React Template Course

Build the home page by creating header, footer, and home components, organizing folders for pages and 404, importing CSS, and preparing routes with a not found page.

Install react-router-dom, wrap the app with BrowserRouter, and define header, footer, and routes including the home route and the not found route to enable routing.

Build a responsive header component in a React template with a logo, nav links with active states, and a mobile slide-up menu with an overlay and toggle behavior.

Import the footer module styles and define a date variable using new date. Get the year with date.getFullYear and render a footer div displaying the year and All rights reserved.

Build the home page by wiring a Redux Toolkit data slice name, importing components, and styling with home.css and index.css, then plan a 404 page for unknown routes.

Create a centered 404 not found page by styling a div with the dash dash center all class and min-height 80vh, render an h2 heading and back-to-home link.

Set up Redux Toolkit by creating a data slice and store, wiring a provider, and selecting the name from Redux to display John Doe Redux on the home page.

Create a reusable card component in a React project using a CSS module, accepting a cardClass prop and wrapping children to surround login page content.

Create an auth section with login, register, and reset pages under an auth folder, share a common auth module css, and configure routes for these pages.

Build a login page by importing assets and styles, then create a card form with email and password, a login button, reset password, and Google login and register link.

Build the register page by duplicating the login JSX, renaming text, and placing the register image on the right. Add a confirm password field and update the react router link.

Build and customize the reset password page in a React template by reusing login JSX, importing assets, using a single email input, updating labels, and adding login or register links.

Create a new admin dashboard structure by adding an admin folder with admin.js and CSS, then build sidebar, home, and profile components, and configure the admin route in app.js.

Set up the admin page layout with a sidebar navigation and a main content area, using nested routes and React Router Dom to create admin/home and admin/profiles pages.

Build a collapsible sidebar in React using a data-driven menu array, a sidebar item component, and hover to expand with a mobile overlay and navigation to the admin home page.

Build a sidebar item component that handles standalone and expandable menus with children. Manage state for expand and hide the sidebar on click, plus active link styling and icons.

Learn to render sidebar items with children by toggling an expand menu, displaying an animated icon, and mapping through child items to a submenu with active sub links and paths.

Build the admin dashboard home page by slotting the dashboard view into the home page, previewing the finished project, then plan the profile page with a name field card.

Create a dashboard profile page by importing CSS file, rendering a profile header, and using a card with a form containing name and email fields and an update profile button.

build a loader component in a React app, featuring a disc spinner and a full-screen loader using ReactDOM createPortal to render into a loader div.

Implement a full screen loader and spinner in a React dashboard by using useState and useEffect to toggle loading for two seconds, then render content.

Learn to implement toast notifications for successful actions like updating a profile using the react to justify library. Install, import the toast container, and use toast.success to display messages.

Create a subscription component and route by building a subscription list as a table. Import the plants array (starter, pro, enterprise) and wire admin.js routes and the sidebar to admin/accounts.

Create a subscription component that renders a table from a plants array, showing serial number, name, price, and a delete action; handle empty state and plan to host on Vercel.

Push your project to GitHub, initialize the repository, and commit changes in Visual Studio Code. Connect the repo to Vercel, deploy, and customize the generated Vercel app domain.

Conclude the React Starter template course and introduce the ultimate MERN-based full stack template course, offering a ready-to-launch app with a UI and user management dashboard, and a SaaS course.