• Post category:StudyBullet-7
  • Reading time:8 mins read


Learn NextJS & React – build fullstack WebApp with Strapi backend with React-Hooks, Typescript and Storybook components

What you will learn

Learn core NextJS pre-rendering, SSR, data fetching, routing

Create real projects with unique components library, styled-components and Storybook

Learn how to build fullstack ReactJS apps with NextJS

The latest ecosystem of a NextJS from the ground

Create a backend with Strapi and learn fullstack development with NextJS

Description

Learn a straightforward way to build a real Fullstack web application with ReactJS & NextJS!

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is required.

Next.js is the production-ready, framework for ReactJS!

Data fetching in Next.js allows you to render content in different ways. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration. It can make your applications very fast!

During the course, we’ll cover the most important topics.


Get Instant Notification of New Courses on our Telegram channel.


There’re presented TDD or TLD approaches that I’ll try to practice with you during the coding sessions. Probably you don’t have enough experience with the tests, but it’s ok, there’s still an excellent way to learn it from the course. When you work with code and cover it with test cases, it provides you with guarantees that your code works as you expected. This is the purpose and benefit of the tests.
Tools for testing: Jest, React Testing Library

Storybook is the most popular way to build the components library. From our side, it’s the most basic part of the course. We’ll install and configure Storybook, which will provide us with a full components spec. This approach is called Components Driven Development.
CSS-IN-JS, EmotionJS, and Styled-Components are very powerful toolkits to build UI components. Even very complex component styles can be easily produced and supported by it.

We create Dark and Light modes for your application with EmotionJS and styled-components API and NextJS!

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. We create our deployment workflow!

Last but not least it’s Redux. Redux is a beautiful way to manage an application state. We’ll use the Redux-Toolkit library – it simplifies the work with Redux.
Check out the full curriculum and free preview videos. Join the course risk-free with a 30-day money-back guarantee!
See you on the course!

English
language

Content

Intro

Create-next-app with Typescript
Github repo review
NextJS and Storybook
Images Optimization and Storybook
Prettier
CSS-IN-JS. EmotionJS
The first component
Review

The power of Storybook

JSX at Glance
JSX compilation
Jest and React Testing Library
Dark / Light themes in Storybook
Aliases, Fonts and Global styles
Aliases and themes for Jest
Storybook addon interactions
Storybook addon a11y
Visual testing and Chromatic
Review

Storybook and Components Library

Tile component
Icon component
Refactoring
Checkbox component
Custom hook useId
Switch component
Logo component
Icon Button
Input component part 1
Input component part 2
Input component refactoring

Basic layout and pages

Create basic layout part 1
Create basic layout part 2
Theme toggler
Next Image and Course component
Course component refactoring
Home page part 1
Home page part 2
Custom 404 error page
Versel deploy
Github Actions and Chromatic
CI Test + Lint
Review

Login and Registration

Intro and refactoring
Strapi init
User, roles and auth flow
Login page part 1
Login page part 2
React hook form and login
React hook form, validation and tests
Fix styles, add login button
Theme toggle flicker fix
Registration page
User Page and review

Auth flow and Redux

Update deps
State management and Redux-Toolkit
User slice
Async actions
Async actions tests
Integration tests and msw
Login / Registration flow
React-redux and login flow
React-redux in Jest and Storybook
Full login flow and registration
Add page test cases

Content with Next and Strapi

Upgrade Strapi
Add courses endpoint with data
SSG, getStaticProps and index page
Fix tests and storybook
Review deploy with docker and AWS
Fix deploy problem
Course page, SSG and getStaticPath
Search input behavior
Search courses
SSR + getServerSideProps
Fix problems and review