강의

멘토링

로드맵

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) 37 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,775

Learners

152

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

37 reviews

4.4

37 reviews

  • kotlinjava님의 프로필 이미지
    kotlinjava

    Reviews 21

    Average Rating 5.0

    5

    100% enrolled

    There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      Reviews 2

      Average Rating 4.0

      3

      100% enrolled

      It was so good, but the ending was a bit abrupt, so it was a little disappointing.

      • dodocoding
        Instructor

        Thank you for taking the class. ~ I should have delivered it in a more systematic way, but I will see you again with a better class.

    • smc91191589님의 프로필 이미지
      smc91191589

      Reviews 13

      Average Rating 5.0

      5

      100% enrolled

      I think this is the best of the nextjs lectures~ I listened to the good lectures~

      • dodocoding
        Instructor

        Thank you 100% for taking the class! I will come back with a more upgraded lecture later. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      Reviews 2

      Average Rating 5.0

      5

      11% enrolled

      • sthwin님의 프로필 이미지
        sthwin

        Reviews 12

        Average Rating 4.3

        3

        100% enrolled

        I took the lecture to review React and Tailwind CSS. There were some parts where I felt like the explanation was a bit lacking, but I can't really say anything. There were also parts where I thought it would be better to just unify it with TypeScript. Still, it was very helpful while cloning.

        • dodocoding
          Instructor

          Thank you for your review! I will come back with a better lecture next time. Thank you for listening to the lecture, which was lacking. If you have any questions in the future, I will answer them to the end.

      Limited time deal

      $27.50

      24%

      $36.30

      dodocoding's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!