Set up your development environment by installing Node.js and npm with the recommended LTS version, and configure Visual Studio Code and the code command in path for terminal access.

Initialize a Next.js React project, run it locally with npm run dev, and learn the project structure, eslint setup, styling options, and dependencies.

Explore how JSX merges JavaScript and UI in a file, combining logic, events, and styles. Learn to enable interactivity with use client and handle events while noting Next.js rendering constraints.

Explore how React uses components to build pages, create a card component with props and state in a functional style with hooks, and manage exports and CSS modules in Next.js.

Learn how to pass different titles, subtitles, and links to components via props, use destructuring in JSX, and apply object default parameters to provide defaults for props, creating reusable components.

Learn to turn static data and props into dynamic behavior by using the useState hook in functional components, track click counts with on click, and trigger re-renders on state changes.

explains the use effect hook in React, showing how to run code on mount and when dependencies like state or props change, with logging examples.

Learn to use Git to save, track, and share code by creating a repository, initializing a local project, staging and committing changes, and pushing to a remote main branch.

Explore the Figma design file to scaffold your React landing page, define core components like header, button, input, tag, card, and footer, and plan the authentication flow to view listings.

Create a header component with logo, actions, and a call-to-action, loading the logo from public, and render actions via map using a flex layout.

Discover next.js file conventions with page.js and layout.js, and how global CSS and metadata drive SEO. Understand how not found.js, error.js, and suspense-based loading manage missing routes and loading states.

Introduce sass to centralize styling by using a variables file for primary, secondary, and accent colors, replacing hardcoded values and enabling one-place updates across components in a react project.

Create a button component in a Button folder, export it from index.js, style via a CSS module, use children as text with accent color, 10px radius, 250px width, 18px padding.

Export the illustration to the public folder and render it with next/image for dynamic width, then build a responsive flex banner with text and image.

Create a responsive layout that adapts from mobile to desktop. Set body max width and center with margin auto, and enforce a 200px minimum image width.

Create a responsive header with a collapsible menu and a burger menu for mobile, guided by a custom hook that checks if it's mobile based on window size.

Build a responsive header in React by adding a burger menu icon from Flaticon, toggling mobile menu with state, and positioning it within a relative header using 875px media query.

Create a highlights section in a React page by defining a highlights array with title, subtitle, and icon, then map it to render three highlighted items with icons and styling.

Add a world map section to a React app by exporting a high-quality image, bolding the word 'love' in the text, and applying responsive CSS with media queries and sizes.

Build a full-width footer for the landing page by duplicating the header into a footer component with a gray background and a centered content area containing a title and paragraph.

Build a responsive footer call-to-action using a button component and flexbox, refine shadows and typography, and manage an overlay effect across screen sizes with media queries.

Create a fullscreen authentication modal overlay on the landing page with a centered white content area for create account and sign-in forms, managed by React context to ensure one modal.

Harness React context to share and control a modal state across screens by wrapping the app with a providers component, using createContext, and toggling modalOpen via useContext.

Style modal to support two types, sign in and create account, by passing a type to render the appropriate form and title, and implement a 32x32 close icon with layout.

Build a reusable input component with a label and input field, using name and placeholder props, clickable label focus, and a flex column container with color, border, and typography styling.

Build a sign-in form with email and password inputs, a centered login button, and responsive spacing using a flexbox column layout and CSS module class names.

Add a centered sign-in footer via a paragraph tag with entities, styled using CSS modules. Clicking the footer switches to the create account modal and shows a pointer cursor.

Create the account form by reusing the signing form layout, add a name field, enable password masking, include a terms and privacy checkbox, and enable sign in for login.

Build a checkbox component for the signup form that toggles its checked state on click, shows a tick image when checked, and links terms and privacy.

Master capturing user input in React with controlled inputs and a unified form state. Compare controlled and uncontrolled inputs, implement a universal on-change handler, and prepare values for submission.

Explore how Next.js uses a file-system based page router to map routes from the app folder, creating pages like /faq and /dashboard. Implement dynamic routes and header links.

Explore building a responsive faq screen by managing header actions based on user authentication, creating a dedicated faq container in a landing page, and refining spacing with css.

Apply header navigation with the Link component from next/link, wrap the logo in a link to the landing page, and navigate to sections FAQ and about using href and id.

Add a footer with internal and external links using next/link and anchor tags, manage login modal through context, enable onClick interactions, and ensure external links open in a new tab.

Explore building auth-aware redirects in a Next.js app, using a hardcoded authenticated flag to route users to the home screen and adapt header content for authenticated sessions.

Implement a React tag component with selectable state, render a tags list, and manage a selected category (or all) with a light gray background and rounded style.

Build a reusable card component for cart, available and favorite listings, with title, subtitle, image props, and an on click action for interactions with heart and delete icons.

Learn to implement interactive cart icons by toggling between empty and filled hearts and a delete icon, with responsive positioning, sizing, and click event handling in a React component.

Learn to implement action events on cards with on action click and on click handlers, control event propagation using stop propagation, and differentiate card and action interactions for components.

Learn to filter listings by category in React using a filtered listings state and useEffect, and show no matches with price formatting using a US locale and dollar sign.

build the settings screen by creating a settings container and a reusable list item, style with fixed width, padding, and shadow, and implement internal and external links with next/link.

Highlight the current page in the header by using usePathname from next/navigation, compare the path to routes, and apply an active class with bold blue accent styling.

Explore how REST APIs connect the client and server to authenticate users and fetch data via HTTP. Use JSON or XML payloads to create new services or new users.

Explore five essential http methods for rest apis and their crud roles: post creates, get reads, put or patch update, and delete. Learn to align with backend specifics.

Explore the Listicle API by inspecting endpoints, methods, and body formats; test calls with Postman, manage authentication with tokens, and understand REST API concepts for front-end integration.

Learn to perform http requests in a React app using Axios, including setting a base url, creating auth and service modules, and implementing a register endpoint with async/await and try/catch.

Add login functionality and form validation for the authentication flow in a React app, including post requests, terms agreement checks, and preparing to use the backend token.

Implement a global error tooltip powered by an error context to show backend messages, display a red fixed tooltip, and auto hide after three seconds.

Store the login token in local storage, use it to authenticate requests via the authorization header, and manage login, logout, and redirects with a centralized user hook.

Create a useUser hook and a user context to share an authenticated state across components, using a token in local storage and login/logout using authenticate and logout functions.

Learn to implement protected routes in React using a higher order component wrapper, a custom hook to check the user, redirect unauthenticated users, and handle loading while determining access.

Fix authentication check by listening to authenticated state and redirecting landing page to home; move http setup to global providers and trigger on login, planning to integrate Services API next.

Create a dynamic service details page that uses id routing to fetch and display a specific listing with image and content side-by-side, includes a heart favorite action and responsive styling.

Initialize the route for a new listing screen. Create listing component using the faq structure and apply a 40-pixel top margin to the title.

Add an image upload input with input type file and an onchange handler to capture the selected image, create an object URL, and display it using a selected image state.

Create a custom image uploader in React by styling a wrapper and hidden input, building a clickable upload box with a plus and delete option for selected images.

Master building a new listing form in React by reusing authentication inputs, organizing with flexible containers, and applying responsive layout with flex, width constraints, and a submit button.

Create a reusable input component that toggles between input and textarea with a text area prop, manages onChange to update form values, and applies custom placeholder and font settings.

Install and integrate a React dropdown package, wire up a categories list with IDs and labels, import CSS, style with control and placeholder classes, and manage selection in form state.