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

Focused View

Nick Ovchinnikov

10:49:44

6 View

1. Intro

1.1 Pull request.html

1. Create-next-app with Typescript.mp4

04:09

2. Github repo review.mp4

01:22

3. NextJS and Storybook.mp4

10:15

4.1 Pull request.html

4. Images Optimization and Storybook.mp4

10:52

5.1 Pull request.html

5. Prettier.mp4

02:04

6.1 Neumorphic Elements.html

6. CSS-IN-JS. EmotionJS.mp4

10:59

7.1 Pull request.html

7. The first component.mp4

09:09

8. Review.mp4

01:31

2. The power of Storybook

1. JSX at Glance.mp4

11:39

2. JSX compilation.mp4

07:02

3. Jest and React Testing Library.mp4

12:00

4. Dark Light themes in Storybook.mp4

12:52

5.1 Pull request.html

5. Aliases, Fonts and Global styles.mp4

08:30

6.1 Pull request.html

6. Aliases and themes for Jest.mp4

05:55

7.1 Pull request.html

7. Storybook addon interactions.mp4

08:38

8. Storybook addon a11y.mp4

04:04

9.1 Pull request.html

9. Visual testing and Chromatic.mp4

07:40

10. Review.mp4

02:59

3. Storybook and Components Library

1.1 Pull request.html

1. Tile component.mp4

11:17

2.1 Pull request.html

2. Icon component.mp4

10:30

3. Refactoring.mp4

05:06

4.1 Pull request.html

4. Checkbox component.mp4

12:25

5.1 Pull request.html

5. Custom hook useId.mp4

07:55

6.1 Pull request.html

6. Switch component.mp4

06:44

7.1 pull request.html

7. Logo component.mp4

07:00

8.1 Pull request.html

8. Icon Button.mp4

08:50

9. Input component part 1.mp4

11:34

10. Input component part 2.mp4

11:19

11. Input component refactoring.mp4

08:34

4. Basic layout and pages

1. Create basic layout part 1.mp4

11:51

2.1 Pull request.html

2. Create basic layout part 2.mp4

07:24

3. Theme toggler.mp4

10:53

4.1 Next Image API.html

4.2 NextJS Image Optimization.html

4.3 Pull request.html

4. Next Image and Course component.mp4

12:19

5.1 Pull request.html

5. Course component refactoring.mp4

06:15

6. Home page part 1.mp4

13:10

7.1 Pull request.html

7. Home page part 2.mp4

04:27

8.1 Pull request.html

8. Custom 404 error page.mp4

11:07

9.1 Pull request.html

9. Versel deploy.mp4

04:48

10.1 Pull request.html

10. Github Actions and Chromatic.mp4

08:39

11.1 Pull request.html

11. CI Test + Lint.mp4

07:43

12. Review.mp4

01:54

5. Login and Registration

1.1 Pull request.html

1. Intro and refactoring.mp4

07:29

2.1 Pull request.html

2. Strapi init.mp4

08:39

3. User, roles and auth flow.mp4

06:08

4. Login page part 1.mp4

10:29

5.1 Pull request.html

5. Login page part 2.mp4

09:43

6. React hook form and login.mp4

11:42

7.1 Pull request.html

7. React hook form, validation and tests.mp4

12:05

8. Fix styles, add login button.mp4

07:52

9.1 Pull request.html

9. Theme toggle flicker fix.mp4

12:05

10.1 Pull request.html

10. Registration page.mp4

13:08

11.1 Pull request.html

11. User Page and review.mp4

02:46

6. Auth flow and Redux

1.1 Pull request.html

1. Update deps.mp4

12:17

2.1 Pull request.html

2. State management and Redux-Toolkit.mp4

08:27

3.1 Pull request.html

3. User slice.mp4

09:18

4. Async actions.mp4

10:56

5.1 Pull request.html

5. Async actions tests.mp4

10:02

6. Integration tests and msw.mp4

12:42

7.1 Pull request.html

7. Login Registration flow.mp4

11:07

8. React-redux and login flow.mp4

11:37

9.1 Pull request.html

9. React-redux in Jest and Storybook.mp4

12:01

10.1 Pull request.html

10. Full login flow and registration.mp4

10:06

11.1 Pull request.html

11. Add page test cases.mp4

12:08

7. Content with Next and Strapi

1.1 Pull request.html

1. Upgrade Strapi.mp4

00:45

2. Add courses endpoint with data.mp4

11:47

3.1 Pull request.html

3. SSG, getStaticProps and index page.mp4

12:56

4. Fix tests and storybook.mp4

08:52

5.1 Deploy And Run Docker Images on AWS ECS.html

5. Review deploy with docker and AWS.mp4

12:12

6.1 Deploy And Run Docker Images on AWS ECS.html

6.2 Pull request.html

6. Fix deploy problem.mp4

02:51

7.1 Pull request.html

7. Course page, SSG and getStaticPath.mp4

10:51

8. Search input behavior.mp4

09:47

9. Search courses.mp4

11:05

10.1 Pull request.html

10. SSR + getServerSideProps.mp4

04:45

11.1 Pull request.html

11. Fix problems and review.mp4

07:42

Description

Build Fullstack WebApp with Next.js, React, and Strapi backend. Storybook components library. Practical Next.js & React

What You'll 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

Who is this for?

React developers who want to build production React apps

Developers who want to build fullstack React apps

Web developers in general, who want to learn one of the most popular tech stacks

What You Need to Know?

Javascript skills will be necessary

ReactJS is strongly recommended

Basic Typescript knowledge

More details

Description
Learn a straightforward way to build a real Fullstack web application with ReactÂ & Next.js + Typescript!
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 React JS!
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.
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!
Who this course is for:
React developers who want to build production React apps
Developers who want to build fullstack React apps
Web developers in general, who want to learn one of the most popular tech stacks

User Reviews

Rating

average 0

Total votes0

Focused display

Passionate Software lead engineer. Frontend web application development is my primary skill.Nowadays I work with Math and DS, but Frontend is still interesting to me* Strong soft skills and leadership* Architecture and high-level vision* Agile methodology and lifecycle of an app* Strong knowledge of architecture on Web-based applications* Primary languages JS, Typescript* React, Redux, Redux-Saga* DBMS - Mongo, MySQL

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.