[Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)

Supabase, the wings for your full-stack development! Through three clone projects, you will quickly learn how to perform professional-level full-stack development using Next.js 14 and Supabase.

(4.9) 56 reviews

875 learners

Level Basic

Course period Unlimited

Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase
Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

official

63% enrolled

For those of you who are wondering whether or not to take this course, I would like to explain the advantages I felt while taking the course. I have also compiled a list of people who will benefit from listening. Advantages 1. You can quickly get used to using the latest technologies and Supabase with 3 clone codings. 2. You can directly experience and implement the latest technologies of NextJS, such as Server Actions. 3. You can focus on learning the core functions required for actual projects, such as infinite scroll. 4. You can improve your development experience by learning the deployment methods of both Vercel and AWS. I think I can explain the advantages in four ways. I have compiled a list of people who will benefit from listening to this lecture. 1. Those who have basic background knowledge of global state management and server API and want to become proficient through repeated learning. 2. Those who want to integrate the backend and frontend to complete a single project. 3. Those who want to experience the entire process from project creation to deployment. 4. Those who want to become familiar with code and function implementation through repeated learning. Although the lecture initially provides a comprehensive explanation of the technology stack covered in the lecture, such as React Query, Recoil, and NextJS, If you don't have basic knowledge, it may be difficult to understand. Since the lecture focuses on utilization rather than basic explanations of technology or libraries, if you don't have background knowledge, I recommend that you learn the basics first and then take this lecture. Compared to other lectures, the progress is fast and the number of projects to be completed is large, so you will be able to feel your skills improving by repeatedly implementing functions in a short period of time. I recommend this lecture to anyone who is considering taking it for proficiency.

5.0

Jane

66% enrolled

I wanted to try Supabase, but I was having trouble because there was not enough material to use it in Next.js, and then I came across this course. I liked that I could learn the basics of Supabase with a simple project like a to-do list and then implement major functions like Storage and Auth myself. The lecture content is well organized in Notion, so it was easy to follow the lecture, and the explanations were step-by-step, so I was able to listen to the lecture quite a bit while working at the company☺️ Thank you for making such a great course. It was very helpful.

5.0

조현석

100% enrolled

I started taking this course because I wanted to create my own web app while doing frontend development. When I tried integrating Next.js and Supabase on my own, it was quite difficult, but through this course, I was able to learn a lot. Thank you for creating such a great course! Thanks to it, I'm getting 3 portfolios as a bonus 😊😊 Additionally, Next.js is currently at version 15 while the course uses version 14, so there were more syntax differences than I expected. It would be more convenient for learning if you could add supplementary materials about version differences to the course, or guide students to use the npx create-next-app@14 ... command.

What you will gain after the course

  • How to do serverless full-stack development with Supabase (Authentication, File Upload, Real-time Chat)

  • Next.js Version 14 (feat. App Router, Server Action)

  • Implementing Kakao OAuth Login

  • Tailwind CSS, React Query, Recoil libraries

  • How to deploy projects using Vercel and AWS

  • Implementation of infinite scroll and drag-and-drop features

  • Domain Purchase and Integration

Through this course, you will


NextJS 14 version and

the powerful backend service Supabase combination,


while working on 3 clone projects,

You will quickly grow into a professional-level full-stack developer!

A powerful rival to Firebase that will give wings to your full-stack development,

🚀 Supabase 🚀

Easily implement complex requirements based on PostgreSQL

With the real-time database feature, developing real-time chats is no longer intimidating

Easily implement social login features as well (Kakao, Google, etc.)

Easily integrate using your preferred method, such as SDK, GraphQL, or API

The admin page and the AI feature that automatically generates SQL are all free

Everyone who takes this course

4 websites in total, deployed by yourself all the way

complete everything 🚀

🔗 Try clicking the links (blue text) in each project.

[Project 1] Todo List (Practice Project)

  • Implement CRUD with Supabase Database

  • Implement creating tasks, deleting, searching, and completing.

  • First NextJS Full-stack Project

[Project 2] Dropbox Clone (File Upload)

  • Handling file functions with Supabase Storage

  • File upload, deletion, and search implementation

  • Drag and drop feature implementation

[Project 3] Netflix Clone

  • Handling complex SQL with the Supabase SDK

  • Movie list screen, search functionality, and detail page implementation

  • Infinite scroll implementation (intersection-observer)

[Project 4] Instagram Clone (Sign-up, Chatting)

  • Easily build user features with Supabase Auth

  • Handling real-time features with Supabase Realtime

  • Implementing sign-up and login in two different ways

  • Real-time chat, real-time online status implementation

  • + Kakao Login feature implementation lecture has been added!

I highly recommend it to these types of people.

Developers who want to do Supabase-based
full-stack development without building a server

Various clone projects to
solidify your development skills
Developers who want to build a strong foundation

Latest technology to build
modern full-stack development
for developers who want to do it

The powerful combination of Next.js 14 and Supabase 🚀

We will turn you into a full-stack developer in the fastest way possible!

Three clone projects will help you quickly improve your skills 👩🏻‍🎓

Only for those who have taken this course

4 benefits you can get!

First,

Learn all 4 core features of Supabase!

(✅ Learn everything from DB queries and user authentication to file uploads and real-time feature implementation)

Supabase's powerful features

By applying them one by one to various projects,

You can properly learn the 4 core features 😉

Second,

We will build a total of 3 clone projects together!

(✅ You can quickly develop your practical skills)

Through a total of 3 clone projects,

implement file uploads, user authentication, real-time chat, search functionality, infinite scroll, and more,

"tech stacks that can be immediately applied to real-world tasks" with

you will be reborn as a full-stack developer!

(+ Kakao OAuth Login lecture has been added 😉)

Third,

You can learn the latest tech stack widely used in the field!

(✅ Theory and practical lectures are provided for each technology)

Instead of simply focusing only on "latest technologies,"

Efficient full-stack development technologies were selected 🙂


Without having to learn the latest technologies separately,

Exactly the same way it's done in practice

You can learn all of this in this course!

Fourth,

Learn two different deployment methods and even connect your own domain!

(✅ You can create a great portfolio with your own domain)

From the method of deploying with AWS EC2 and Vercel

how to purchase and link your own domain

You will learn it all ☺


(+ You can complete an even more professional portfolio!)

Things to note before taking the course

Learning Materials

Prerequisites and Important Notes

  • If you have experience using Next.js or React.js, you will be able to follow the course easily! ☺

  • Basic CSS knowledge is required. (e.g., what flex is)

A course that is continuously updated even after purchase

  • If there are parts that are difficult to understand, supplementary explanation lectures will be added in addition to the Q&A.

  • If new features are added to Supabase, the course will be updated.

#Next.js, #supabase, #tailwind-css, #react-query, #recoiljs, #firebase, #Supabase RLS, #Row level Security

Recommended for
these people

Who is this course right for?

  • A frontend developer who wants to see full-stack development through to the end

  • Solo developers or small development teams who want to significantly lower the difficulty of development and operations.

  • Those looking for a backend service optimized for side projects

Need to know before starting?

  • Basic understanding of Next.js or React.js

  • Basic CSS knowledge

Hello
This is lopun

3,771

Learners

229

Reviews

64

Answers

4.9

Rating

8

Courses

🚀 “I will show you the entire process of building a real-world service using the trendiest tech stacks.”

I provide project-oriented practical lectures rather than theory, offering content that can be immediately helpful in the field.

  • (Current) Working at Naver/Kakao/Line/Coupang/Baemin

  • (Current) 7th-year Full-stack Developer

  • (Lecturing) Instructor at Sparta Coding Club

  • (Education) B.S. in Computer Science, Korea Advanced Institute of Science and Technology (KAIST)

More

Curriculum

All

40 lectures ∙ (10hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

56 reviews

4.9

56 reviews

  • joy40176271님의 프로필 이미지
    joy40176271

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    I started taking this course because I wanted to create my own web app while doing frontend development. When I tried integrating Next.js and Supabase on my own, it was quite difficult, but through this course, I was able to learn a lot. Thank you for creating such a great course! Thanks to it, I'm getting 3 portfolios as a bonus 😊😊 Additionally, Next.js is currently at version 15 while the course uses version 14, so there were more syntax differences than I expected. It would be more convenient for learning if you could add supplementary materials about version differences to the course, or guide students to use the npx create-next-app@14 ... command.

    • hamjw01224657님의 프로필 이미지
      hamjw01224657

      Reviews 1

      Average Rating 5.0

      5

      66% enrolled

      I wanted to try Supabase, but I was having trouble because there was not enough material to use it in Next.js, and then I came across this course. I liked that I could learn the basics of Supabase with a simple project like a to-do list and then implement major functions like Storage and Auth myself. The lecture content is well organized in Notion, so it was easy to follow the lecture, and the explanations were step-by-step, so I was able to listen to the lecture quite a bit while working at the company☺️ Thank you for making such a great course. It was very helpful.

      • lopun
        Instructor

        Hello Jane! It's so cool that you're able to take the course so quickly while working. 🫢 I'm explaining it slowly so that students can understand it well. If it seems a little slow, you can use the speed function. Thank you so much for leaving a valuable review!

    • swerty142487님의 프로필 이미지
      swerty142487

      Reviews 1

      Average Rating 4.0

      4

      30% enrolled

      Adding theoretical parts about technology is recommended.

      • official님의 프로필 이미지
        official

        Reviews 1

        Average Rating 5.0

        5

        63% enrolled

        For those of you who are wondering whether or not to take this course, I would like to explain the advantages I felt while taking the course. I have also compiled a list of people who will benefit from listening. Advantages 1. You can quickly get used to using the latest technologies and Supabase with 3 clone codings. 2. You can directly experience and implement the latest technologies of NextJS, such as Server Actions. 3. You can focus on learning the core functions required for actual projects, such as infinite scroll. 4. You can improve your development experience by learning the deployment methods of both Vercel and AWS. I think I can explain the advantages in four ways. I have compiled a list of people who will benefit from listening to this lecture. 1. Those who have basic background knowledge of global state management and server API and want to become proficient through repeated learning. 2. Those who want to integrate the backend and frontend to complete a single project. 3. Those who want to experience the entire process from project creation to deployment. 4. Those who want to become familiar with code and function implementation through repeated learning. Although the lecture initially provides a comprehensive explanation of the technology stack covered in the lecture, such as React Query, Recoil, and NextJS, If you don't have basic knowledge, it may be difficult to understand. Since the lecture focuses on utilization rather than basic explanations of technology or libraries, if you don't have background knowledge, I recommend that you learn the basics first and then take this lecture. Compared to other lectures, the progress is fast and the number of projects to be completed is large, so you will be able to feel your skills improving by repeatedly implementing functions in a short period of time. I recommend this lecture to anyone who is considering taking it for proficiency.

        • lopun
          Instructor

          Wow, thank you so much for writing such a detailed course review!! I was worried about how the students would perceive the many projects, but I'm so touched that they said it actually helped them. ㅎㅎ By the way, you're almost done with the course already 🫢 Good luck with the remaining courses, beginners! If there's any difficult content in the latter half, I'll actively help you out :)

      • fined0006806님의 프로필 이미지
        fined0006806

        Reviews 46

        Average Rating 4.7

        5

        100% enrolled

        Thank you for creating such great examples with the latest version, I learned a lot.

        lopun's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!

        $77.00