강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Next YTMusic Clone Coding from the Basics (with next.js 14, UI Master)

Clone YoutubeMusic website with React, Next.JS 14, TailwindCss, RadixUI, Shadcn, and zustand. You can master the basics of web front-end with a focus on UI, starting from NextJS basics.!

(4.4) 36 reviews

448 learners

  • dodocoding
실습 중심
클론코딩
Next.js
React
TailwindCSS
zustand
Clone Coding

Reviews from Early Learners

What you will learn!

  • Next.js App Router

  • (Theory) React Suspense (Streaming, Progressive Hydration)

  • (Theory) Next.js rendering method and CSR, SSR, Hydration

  • Next.js RSC, RCC, use client

  • TailwindCSS, RadixUI, Shadcn

  • YT Music Player CloneCoding

  • Zustand status management

  • Typescript Typing Basics

  • How to develop a responsive UI

The NextJS technology stack is in demand among FE developers these days!
We've included only the parts you need for NextJS practice 🍭

After studying React, it is difficult to proceed with a project using NextJS by only looking at the official documentation.
So, through YoutubeMusic Clone coding, it is quick and easy,
In just one day! We've created a course to help you master NextJS.
This course can serve as the best foundation for your own NextJS project.

Features of this course

📌 Lecture Notes Guide: Chapter-by-chapter goals, review points, and more (official documents, concepts, etc.)

📌 Lecture checkpoints provided : Don't worry if you don't follow the code! There are chapter-specific branches.

📌 10% theory, 90% practice : We explain the most difficult concepts of rendering, server components, and hydration.

📌 Portfolio : You can get the results through clone coding.

I recommend this to these people

From React to Next
I want to expand!

I know how to use React, but
If you are stuck at Next,
This course is perfect!

Next.js project
I want to make it!

Based on Next.js
If you need to do a project right away,
It will be a good guide.

Easy with clone coding
Have fun learning!

Based on a suitable code base
Expand your project with your own!

After class

  • You can clone any site you see with Next.js. 😲

  • You can proceed with your project through Next.js AppRouter.

  • You can manage global status with Zustand.

  • You will learn about various rendering methods, including PageRouter, React CSR, SSR, and Hydration.

  • Vercel allows me to show off the projects I've created to others.

  • TailwindCSS + Radix UI + Shadcn combination allows you to develop UI faster than anyone else.


Learn this stuff 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

You'll learn how to structure your entire project with AppRoute. You'll also learn the theory behind when and why to use server components. Through the evolution of FE rendering, you'll learn about the history of Vanilla JS > React > NextJS PageRouter > AppRoute.

Responsive Design + Interactive Web

We're introducing a strategy that supports mobile and tablet screens. We've refined the UI with styling and details, including drawers that appear only on mobile screens. Perhaps you could wrap it in a webview and build an app from scratch?

Music Player with Zustand

Learn Player using the Zustand global state management tool. It includes detailed UI skills to enhance the user experience. You'll integrate events with Zustand to play music on any page.

UI Components & Typescript

Organize various UIs into components. And, where necessary, learn how to apply TypeScript to prevent errors in your projects.

Things to note before taking the course

Practice environment

  • I use Node.js, VS Code, and Github.


Learning Materials

  • Github and Chapter-by-Chapter Checkpoints: Link

  • Handwritten notes and workbook provided! : Link

  • LiveDemo:Link

Player Knowledge and Precautions

  • Basic knowledge of HTML, CSS, and React

  • Styling with TailwindCSS (+ a summary tutorial 😀 )

  • (*At first, I hated TailwindCSS. But after the initial learning curve (about an hour), it dramatically improved my development experience and sped up my development time! You won't regret it.)

Knowledge sharer
Interested in other lectures?

Recommended for
these people

Who is this course right for?

  • For those who want to start a project with Next.js

  • Anyone who wants to master publishing based on Next.js

  • For those who want to develop quickly using a component library

  • FE developers looking to expand their Next.js technology stack

Need to know before starting?

  • Basic HTML, CSS, React

Hello
This is

3,707

Learners

146

Reviews

85

Answers

4.8

Rating

5

Courses

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

Curriculum

All

80 lectures ∙ (7hr 6min)

Published: 
Last updated: 

Reviews

All

36 reviews

4.4

36 reviews

  • kotlinjava님의 프로필 이미지
    kotlinjava

    Reviews 20

    Average Rating 5.0

    5

    100% enrolled

    Trong Next.js có rất nhiều nội dung liên quan đến hiệu năng như xử lý cache hay tối ưu hóa,... nên cá nhân tôi thấy cần học thêm về UI, nhưng lại không hứng thú với các bài giảng HTML, CSS. Đúng lúc có khóa học này nên tôi đã tham gia và thấy trình độ của giảng viên quá đỉnh...ㄷㄷ Nhưng không ngờ là trong lúc gõ theo, tôi cảm thấy kỹ năng của mình đã được cải thiện, có lẽ là do nó đã ngấm vào người. Rất tốt để học Shadcn Tailwind. Mong chờ phần 2 sớm ra mắt.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      Reviews 2

      Average Rating 4.0

      3

      100% enrolled

      너무 좋았어요. Chỉ có điều... phần cuối kết thúc quá vội vàng nên hơi đáng tiếc.

      • dodocoding
        Instructor

        Cảm ơn bạn đã tham gia khóa học ~ Lẽ ra tôi nên giảng dạy nó một cách có hệ thống hơn và tôi sẽ cung cấp cho bạn một khóa học tốt hơn.

    • smc91191589님의 프로필 이미지
      smc91191589

      Reviews 13

      Average Rating 5.0

      5

      100% enrolled

      Tôi nghĩ đó là khóa học tiếp theo tốt nhất~ Tôi rất thích bài giảng hay ~

      • dodocoding
        Instructor

        100% cảm ơn bạn đã tham gia lớp học! Chúng ta sẽ gặp lại bạn sau với một bài giảng nâng cao hơn. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      Reviews 2

      Average Rating 5.0

      5

      11% enrolled

      • sthwin님의 프로필 이미지
        sthwin

        Reviews 12

        Average Rating 4.3

        3

        100% enrolled

        Tôi đã tham gia bài giảng để xem xét CSS React và Tailwind. Có một số chỗ tôi cảm thấy lời giải thích có phần thiếu sót nhưng cũng khó nói được điều gì. Cá nhân tôi, có những phần tôi nghĩ sẽ tốt hơn nếu chỉ thống nhất quy trình bằng TypeScript. Tuy nhiên, nó đã giúp tôi rất nhiều khi mã hóa bản sao.

        • dodocoding
          Instructor

          Cảm ơn bạn đã xem xét của bạn. ! Lần sau chúng tôi sẽ quay lại với bài giảng hay hơn. Cảm ơn các bạn đã nghe bài giảng ngắn. Nếu bạn có bất kỳ câu hỏi nào sau này, tôi sẽ cố gắng trả lời chúng cho đến cuối cùng.

      $36.30

      dodocoding's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!