BEST

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

Name: [Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)
Price: 99000 KRW
Rating: 4.8 (57 reviews)

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.8) 57 reviews

876 learners

Level Basic

Course period Unlimited

lopun

Next.js

supabase

TailwindCSS

react-query

Firebase

Next.js

supabase

TailwindCSS

react-query

Firebase

Reviews from Early Learners

4.8

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

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,791

Learners

230

Reviews

Answers

4.9

Rating

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)

Curriculum

All

40 lectures ∙ (10hr 55min)

Course Materials:

Lecture resources

Section 1. Orientation

3 lectures ∙ (25min)

1. Course Introduction
06:59
2. Supabase, a powerful rival to Firebase
11:08
3. Initial Setup - VSCode, Git, nvm, Typescript
07:10

Section 2. Description of the technologies to be used in the lecture

5 lectures ∙ (1hr 27min)

4. Next.js Part 1 - Building the Fundamentals
18:09
5. Next.js Part 2 - Server Action, Metadata
13:21
6. Introduction to Tailwind CSS and Basic Syntax Lecture
19:39
7. Introduction to Recoil and Basic Syntax Lecture
14:19
8. Introduction to React Query and Basic Syntax Lecture
22:12

Section 3. Practice Project - Creating a TODO LIST

6 lectures ∙ (1hr 38min)

9. Course Introduction
05:11
10. Proceed with Git repository creation and initial setup
12:46
11. (Optional Course) UI Construction
19:32
12. Creating your first Supabase project
18:21
13. Setting up essential libraries - React Query, Supabase
15:17
14. Implementing Todo CRUD functionality (feat. Server Action)
27:15

Section 4. Dropbox Clone Coding - Building a File Storage Service

5 lectures ∙ (1hr 14min)

Section 5. Netflix Clone Coding - Building a Movie Search Service

5 lectures ∙ (1hr 33min)

Section 6. Instagram Clone Coding - Implementing Supabase Authentication (Part 1)

7 lectures ∙ (1hr 55min)

Section 7. Instagram Clone Coding - Implementing Instagram DM Chat Feature (Part 2)

6 lectures ∙ (1hr 58min)

Section 8. Deploying a Website - Domain Registration, Vercel, and AWS Deployment

3 lectures ∙ (42min)

Published: 07/11/2024

Last updated: 02/02/2026

Reviews

All

57 reviews

4.8

57 reviews

official
Reviews 1
∙
Average Rating 5.0
07/19/2024
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
  07/20/2024
  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 :)
hamjw01224657
Reviews 1
∙
Average Rating 5.0
08/11/2024
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
  08/12/2024
  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!
wjdgus23337358
Reviews 2
∙
Average Rating 5.0
10/28/2024
5
70% enrolled
Unlike other lectures, it is not a uselessly long lecture that lasts for tens of hours, and I like that it is concise and consists of only the key points.
- lopun
  Instructor
  12/09/2024
  Thank you for the precious review! I also find it hard to follow a class that is too long, so I tried to compress as much content as possible into 10 hours. Thank you so much for your kind words.
joy40176271
Reviews 2
∙
Average Rating 5.0
08/06/2025
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.
fined0006806
Reviews 48
∙
Average Rating 4.7
04/25/2025
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!

Inflearn Clone Coding Part 2: From Enrollment to Deployment, Building the Real Inflearn

lopun

🔥 This is a practical full-stack course where you implement the entire journey a student experiences, from browsing lectures to payment and deployment. You will build everything yourself—including lecture search, detail pages, enrollment, video playback, reviews and Q&A, shopping carts, actual payments, "continue watching" features, and Docker + AWS deployment—to master user flows and architectural design close to real-world services and complete a high-level full-stack experience.

Intermediate

AWS, Docker, Next.js

Inflearn Clone Coding Part 2: From Enrollment to Deployment, Building the Real Inflearn

lopun

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Supabase to give wings to full-stack development! Complete full-stack development in 2 hours with Supabase, a superset of Firebase.

Basic

PostgreSQL, Next.js, TailwindCSS

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Inflearn Clone Coding Part 1: Real-world Project Starting with Next.js and NestJS

lopun

🔥 This is a practical full-stack course where you will implement the knowledge-sharer features from scratch, from course registration to video uploading. Using Next.js 15 and NestJS, you will follow the actual Inflearn workflow—creating courses, organizing curriculums, uploading thumbnails and videos, and writing detailed descriptions—while gaining hands-on experience in Prisma modeling, JWT authentication, S3 + CloudFront uploading, and Swagger API design.

Intermediate

AWS, Docker, Next.js

Inflearn Clone Coding Part 1: Real-world Project Starting with Next.js and NestJS

lopun

Backend 101 for Frontend Developers (NestJS, TypeORM)

lopun

NestJS, the fastest way to help you get started with backend development! Through various hands-on projects, you will quickly learn the backend framework NestJS, TypeORM, and the essential theoretical knowledge that every server developer must know.

Basic

NestJS, TypeORM, PostgreSQL

Backend 101 for Frontend Developers (NestJS, TypeORM)

lopun

Similar courses

Explore other courses in the same field!

Node and React series that you can learn by following - Creating a Reddit site (NextJS) (Pages Router)

John Ahn

In this course, you will be able to create a Reddit website from scratch, step by step.

Basic

Clone Coding, Node.js, React

Node and React series that you can learn by following - Creating a Reddit site (NextJS) (Pages Router)

John Ahn

Complete Real-world YouTube Clone Development with Next.js 15

antonio

In this 24-hour tutorial, you will learn how to build your own YouTube clone. We will cover advanced topics such as Next 15 and React 19 (including tRPC), prefetching in Server Components, utilizing Suspense in Client Components, video processing, background jobs, and AI features.

Basic

Next.js, React, PostgreSQL

Complete Real-world YouTube Clone Development with Next.js 15

antonio

Create an AdSense-monetized website with AI in just 2 hours

moderncrusoe

I have summarized how to create a profitable AdSense website. I have organized it so that even those without development experience can follow along, leaving only successful methods so that they can be replicated exactly.

Beginner

Web Application, cloudflare, adsense

Create an AdSense-monetized website with AI in just 2 hours

moderncrusoe

Masterclass in developing portfolio sites using various frameworks

webstoryboy

Learn how to build a beautiful portfolio site using Vite, React, Vue, and Next.js. Perfect for developers looking to improve their practical front-end development skills using multiple frameworks.

Basic

Portfolio, React, Vue.js

Masterclass in developing portfolio sites using various frameworks

webstoryboy

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Supabase to give wings to full-stack development! Complete full-stack development in 2 hours with Supabase, a superset of Firebase.

Basic

PostgreSQL, Next.js, TailwindCSS

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

From JavaScript to React: The Road to Unyielding React [PART 4/4]

youngcodikimssam

Have you ever felt frustrated while studying React? We'll help you build a solid foundation in the basics of JavaScript, which is the foundation of React, and then learn step-by-step, so you can open the way to React without giving up.

Beginner

JavaScript, ES6, TypeScript

From JavaScript to React: The Road to Unyielding React [PART 4/4]

youngcodikimssam

Getting Started with Next.js (feat. Map Service Development)

vroomfan

A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.

Basic

Next.js, SEO, vercel

Getting Started with Next.js (feat. Map Service Development)

vroomfan

Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper

ludgi

This is a practical project course on running Whisper locally and quickly developing an AI speech recognition app using FastAPI and Next.js. You'll implement real-time speech recognition and complete a project that can be used as a simple portfolio piece in a short amount of time.

Basic

Next.js, FastAPI, whisper

Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper

ludgi

Building a Fire Detection System with Next.js and YOLOv11

ludgi

Learn how to build a real-time fire detection system using Next.js, YOLOv11, and FastAPI.

Basic

Next.js, yolo, Python

Building a Fire Detection System with Next.js and YOLOv11

ludgi

Creating a messenger app with Flutter

DEV MOO

Build a messenger app using Flutter's Riverpod state management and Firebase.

Basic

Flutter, Firebase, riverpod

Creating a messenger app with Flutter

DEV MOO

[Renewal] Building a Restaurant Map App (React Native & NestJS)

Kyo

You will learn the process of developing and launching your own restaurant diary app using React Native. We've prepared the entire process from design to front-end and back-end development, and deployment.

Intermediate

React Native, TypeScript, NestJS

[Renewal] Building a Restaurant Map App (React Native & NestJS)

Kyo

The 10x AI-Native Developer: How to Achieve Overwhelming Performance with AI at Work

dingcodingco

AI is no longer a choice, but a matter of survival. Shorten development tasks that used to take 3 days down to 30 minutes; leave repetitive tasks to AI and focus on solving more important problems. Through AI-native development methods that are practical rather than theoretical, we will show you the definitive way to be recognized as an "AI-savvy developer" at your company.

Basic

Spring Boot, Next.js, AI

The 10x AI-Native Developer: How to Achieve Overwhelming Performance with AI at Work

dingcodingco

Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

dodocoding

You can gain the ability to implement a chat program in just one hour using Next.js + Cursor IDE.

Beginner

nextjs, ChatGPT, React

Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

dodocoding

[2021] Who builds paid web services these days? Everything about Firebase - Javascript

David

The new 2021 course, "Who builds paid web services these days? Everything about Firebase - JavaScript"! It will be a bible for beginner developers who dream of starting their own business.

Basic

Firebase

[2021] Who builds paid web services these days? Everything about Firebase - Javascript

David

Kangsam's Beginner Android One Day Class - Part 7 Connecting with Firebase

admin0013

This course will teach you how to use authentication, database, storage, and FCM provided by Google Firebase. In particular, FCM is a core service of Firebase used by most apps for server push.

Basic

Android, Kotlin, Firebase

Kangsam's Beginner Android One Day Class - Part 7 Connecting with Firebase

admin0013

Creating Web Services with Vibe Coding With Claude Code

ref63184917

A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

Beginner

HTML/CSS, JavaScript, Next.js

Creating Web Services with Vibe Coding With Claude Code

ref63184917

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi

A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

Intermediate

Next.js, React, GraphQL

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi

From MVP to Deployment and Monetization! Next.js × LLM API Practical Series

dxers

While LLMs are currently transforming the development environment, what truly matters is not just "writing code on your behalf" but integrating them as features into a service. This course provides a step-by-step guide to implementing a lightweight yet polished Tarot reading service using Next.js and the OpenAI API. In the first stage, we will build an MVP that works without a backend, connecting the user input flow (questions/threads/card selection) to result generation. In subsequent stages, we will expand the functionality by building a backend, implementing general login and OAuth, adding community features, and creating a reading dashboard. Finally, we will conclude by deploying to AWS and integrating Google AdSense to complete a service ready for actual operation. Additionally, we will cover understanding pricing structures and cost optimization strategies to ensure that LLM API usage costs do not become a burden.

Basic

AWS, Google Ads, Next.js

From MVP to Deployment and Monetization! Next.js × LLM API Practical Series

dxers

[Unity] Implementing Essential Features for Multiplayer Games - From Server & Data Management!

Pinous

In this lecture, we will implement various server systems such as chat, party, trade, guild, ranking, and auction house step-by-step using Photon and Firestore.

Intermediate

Unity, Firebase, firestore

[Unity] Implementing Essential Features for Multiplayer Games - From Server & Data Management!

Pinous

AI Era: Vibe Coding from Website Development to Deployment in Half a Day with MCP & Gemini CLI

codebridge

The hottest vibe coding these days! You can learn how to develop and deploy a website (Next.js) with just a click using AI tools. We'll even show you how to develop for free using Google Gemini Pro.

Beginner

Git, Next.js, AI

AI Era: Vibe Coding from Website Development to Deployment in Half a Day with MCP & Gemini CLI

codebridge

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

4.8

What you will gain after the course

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 🚀

Everyone who takes this course

4 websites in total, deployed by yourself all the way

complete everything 🚀

I highly recommend it to these types of people.

Only for those who have taken this course

4 benefits you can get!

First,

Learn all 4 core features of Supabase!

Second,

We will build a total of 3 clone projects together!

Third,

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

Fourth,

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

Things to note before taking the course

Learning Materials

Prerequisites and Important Notes

A course that is continuously updated even after purchase

Recommended for
these people

Hello
This is lopun

Curriculum

Reviews

lopun's other courses

Similar courses

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

4.8

What you will gain after the course

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 🚀

Everyone who takes this course

4 websites in total, deployed by yourself all the way

complete everything 🚀

I highly recommend it to these types of people.

Only for those who have taken this course

4 benefits you can get!

First,

Learn all 4 core features of Supabase!

Second,

We will build a total of 3 clone projects together!

Third,

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

Fourth,

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

Things to note before taking the course

Learning Materials

Prerequisites and Important Notes

A course that is continuously updated even after purchase

Recommended for these people

HelloThis is lopun

Curriculum

Reviews

lopun's other courses

Similar courses

Recommended for
these people

Hello
This is lopun