Practical Next.js & React - Build a real WebApp with Next.js

Explore how JSX compiles into React elements, review Babel transforms, and examine the React 17 shift changing imports and element handling during compilation.

Show how to use TypeScript path aliases, add Google fonts, and apply global styles in Storybook with decorators and reusable style helpers for consistent transitions and shadows.

Explore writing test cases in Storybook using the interactions addon, with component story objects, the play function, and Storybook Jest expectations to verify button clicks across color variants.

Install and enable the storybook a11y addon, run accessibility checks, and review color contrast across dark and light modes. The demo shows passing rules for components and buttons.

Develop a components library with a bottom component, storybook setup, and test cases. Highlight pull requests, readme guidance, and common styles as the project infrastructure evolves.

Build a reusable tile component as a functional component with header and children props, styled with border radius and box shadow; create stories to test rendering and light/dark theme accessibility.

Build a customizable checkbox component in a practical Next.js and React app, styling the visible part, binding input to a generated unique id, and enabling hover, transitions, and testable behavior.

Build a logo component with a monotone font from Google Fonts, implementing neon glow via text-shadow, responsive to a size prop in dark and light modes, shown in storybook.

Build a reusable input component with label and placeholder, wiring onChange and focus styles; extend with feedback, valid/invalid states, light/dark themes, and optional icons in Storybook.

Create a flexible layout component using grid template areas for header, navigation, search, content, and footer, with responsive grid fractions and Next.js link usage.

Continue building the home component, add spacing around navigation, and create a local style link. Implement a logo link, responsive header, dark/light mode, and fix image optimization issues.

Connect and configure a git repository for vercel deployment, import the repository, and enable automatic builds and deployments while fixing pages by organizing stories and pushing a pull request.

Fix flickering in theme toggling by applying dark and light background and font color from local storage and user preference, using a custom hook to avoid server-client mismatch.

Build a user page showing username and email after login or signup, with profile header and logout button, using mocked data and storybook, and plan client–server integration with relax toolkit.

Test async actions in a Next.js and React app by adding pending and reject cases to the extra reducer. Validate state changes with mock login data and reducer tests.

Set up API mocks with mock service worker in a Next.js and React course, build login and user me flows, and verify integration tests using Jest and local storage.

Explore a practical login and registration flow in a React app, featuring a root reducer, unified handlers, local storage management, and tested async actions.

Explore testing with react-redux in jest and storybook by wiring a redux provider, configuring store, and using preloaded state to simulate login and user flows.

Build a complete login and registration flow for a blogging app with Next.js and React, including token handling, error cases, and redirects to the profile page.

Fix tests and storybook by updating the snapshot, adding mock data, and resolving type and image URL issues. Reconfigure storybook to load assets from public and prepare for deployment.

Fix deploy problem by configuring environment variables for local and AWS, pushing changes to trigger a rebuild and verify stage deployment, adjust image domains, and explore rendering deployment with Next.js.

Learn to implement a course search feature with a back-end API using query strings and filters, manage state with React hooks, refactor components, and enable server-side rendering for results.