Practical Next.js & React – Build a Real WebApp

Learn how to build a real-world full-stack web application using React, Next.js and TypeScript through a practical project-based approach. This course takes you from setting up a modern Next.js project to building reusable components, creating authentication flows, managing global state with Redux Toolkit, connecting a Strapi backend and deploying the application. TOPICS COVERED: 01. INTRO Create a Next.js project with TypeScript, understand the project structure, configure Storybook, optimize images, use Prettier and start building reusable React components. 02. THE POWER OF STORYBOOK Learn Storybook, JSX, JSX compilation, component-driven development, Jest, React Testing Library, dark/light themes, TypeScript aliases, fonts and global styles. 03. STORYBOOK & COMPONENTS LIBRARY Build a reusable component library including Tile, Icon, Checkbox, Switch, Logo, Icon Button and Input components. Learn component refactoring, testing, accessibility and Storybook documentation. 04. BASIC LAYOUT & PAGES Create responsive layouts and pages using Next.js, CSS-in-JS and EmotionJS. Build navigation, headers, footers, course components, home pages, custom 404 pages and theme switching. 05. LOGIN & REGISTRATION Build complete login and registration interfaces with React Hook Form, validation, reusable components and a Strapi backend. Learn user roles, authentication, form validation and protected user flows. 06. AUTH FLOW & REDUX Implement application-wide state management with Redux Toolkit. Learn Redux slices, async actions, JWT authentication, React-Redux integration, login/logout flows, API mocking with MSW and integration testing. 07. CONTENT WITH NEXT & STRAPI Connect Next.js with Strapi and build a real content-driven application. Learn API integration, course endpoints, Static Site Generation, getStaticProps, getStaticPaths, dynamic routes, search, Server-Side Rendering and deployment. NEXT.JS CONCEPTS Learn routing, pre-rendering, Static Generation (SSG), Server-Side Rendering (SSR), data fetching, getStaticProps, getStaticPaths, dynamic routes and production deployment. TESTING Work with Jest, React Testing Library, snapshots, MSW and integration tests while following practical testing and development workflows. STYLING & COMPONENTS Use EmotionJS, styled-components, CSS-in-JS, reusable components, themes, responsive layouts and Storybook-driven component development. STATE & AUTHENTICATION Build authentication and global state management using Redux Toolkit, React-Redux, JWT, async actions and protected user flows. BACKEND & FULL-STACK Create a backend with Strapi, define content types, manage users and roles, expose REST APIs and connect the backend with a Next.js frontend. CI/CD & DEPLOYMENT Use GitHub Actions, Chromatic, Vercel and AWS/Docker deployment workflows to test, build and deploy your application. Course Modules 01 - Intro 02 - The Power of Storybook 03 - Storybook and Components Library 04 - Basic Layout and Pages 05 - Login and Registration 06 - Auth Flow and Redux 07 - Content with Next and Strapi