강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

Supabase: Giving Wings to Full-stack Development! Through 3 clone projects, you will quickly learn how to build practical-level full-stack applications using Next.js 14 and Supabase.

(4.8) 53 reviews

859 learners

  • lopun
실습 중심
클론코딩
Next.js
supabase
TailwindCSS
react-query
Firebase

Reviews from Early Learners

What you will gain after the course

  • How to Build Serverless Full-Stack Applications with Supabase (User 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 Project with Vercel and AWS

  • Infinite scroll, drag and drop feature implementation

  • Domain Purchase and Linking

In this lecture, you will:


NextJS 14 version

In combination with Supabase , a powerful backend service,


We are working on three clone projects

Grow quickly into a working-level full-stack developer!

Giving wings to full-stack development
A powerful competitor to Firebase ,

🚀 Super Base 🚀

Easily implement complex requirements based on PostgreSQL

Real-time chat development is no longer scary thanks to real-time database features

Social login function is also easily implemented (Kakao, Google, etc.)

Easily connect in a way that is convenient for you, such as SDK, GraphQL, or API.

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

Everyone taking this course

I distributed a total of 4 websites by myself .

All will be completed 🚀

🔗 Click on the links ( blue text ) in each project .

[Project 1] To-do List (Practice Project)

  • Implementing CRUD with Supabase Database

  • Implementing creating, deleting, searching, and completing tasks

  • My first NextJS full stack project

[Project 2] Dropbox Clone (File Upload)

  • Handling File Functions with Supabase Storage

  • Implement file upload and deletion, search

  • Implementing drag and drop functionality

[Project 3] Netflix Clone

  • Handling complex SQL with Supabase SDK

  • Movie list screen , search function, and detailed page implementation

  • Implementing infinite scroll (intersection-observer)

[Project 4] Instagram Clone (Sign up, Chat)

  • Easily build membership features with Supabase Auth

  • Handling real-time features with Supabase Realtime

  • Implementing two types of membership registration and login

  • Real-time chat, real-time connection implementation

  • + A tutorial on implementing Kakao login functionality has been added!

I highly recommend this to these people

Through Supabase
Full stack development without server setup
The developer I want to be

Through various clone projects
Strengthen your development skills
Developers who want to grow

Using the latest technology
Modern full-stack development
The developer I want to be

The powerful combination of Next.js 14 and Supabase 🚀

We will make you a full-stack developer as quickly as possible !

We'll help you improve your skills quickly through 3 clone projects 👩🏻‍🎓

Only those who have taken this course

4 benefits you can get !

first,

Learn all 4 core features of Supabase!

( Learn everything from DB query, member authentication, file upload, to real-time function implementation)

Supabase's powerful features

I tried applying it to various projects one by one.

You can learn the 4 core functions properly 😉

Second,

Let's create a total of 3 clone projects together!

( You can quickly develop your practical skills)

Through a total of three clone projects

Implement file upload, member authentication, real-time chat, search function, infinite scroll, etc.

Equipped with a “technology stack that can be applied directly to practice”

You will be transformed into a full-stack developer!

(+ Kakao OAuth login lecture added 😉 )

Third,

You can learn the latest technology stack widely used in practice!

( Theory and practical lectures are provided for each technology)

Rather than simply focusing on “latest technology,”

We selected technologies that can enable efficient full-stack development 🙂


No need to learn the latest technologies separately

Just as it is used in practice

You can learn it all in this course!

Fourth,

Learn two deployment methods and even link them to a domain !

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

How to deploy to AWS EC2 and Vercel

How to purchase and link your own domain

Everyone will learn


(+ You can complete a more professional portfolio!)

Wait! Are you still a student at school?

🔗 Student Discount (-50%) Google Form Link 🔗

Things to note before taking the class

Learning Materials

Player Knowledge and Notes

  • If you have experience using Next.js or React.js , you can easily follow the lecture!

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

Courses that are continuously updated even after purchase

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

  • The course will be updated as new features are added to Supabase .

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

Recommended for
these people

Who is this course right for?

  • Front-end developer aiming to complete full-stack.

  • Solo / small dev teams aiming to slash dev/ops complexity

  • Those seeking optimized backend for side projects

Need to know before starting?

  • Basic understanding of Next.js or React.js

  • Basic CSS knowledge

Hello
This is

3,674

Learners

213

Reviews

64

Answers

4.9

Rating

7

Courses

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

Curriculum

All

40 lectures ∙ (10hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

53 reviews

4.8

53 reviews

  • 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 :)

  • 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!

  • 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.

    • swerty142487님의 프로필 이미지
      swerty142487

      Reviews 1

      Average Rating 4.0

      4

      30% enrolled

      Adding theoretical parts about technology is recommended.

      • fined0006806님의 프로필 이미지
        fined0006806

        Reviews 33

        Average Rating 4.7

        5

        100% enrolled

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

        Limited time deal ends in 8 days

        $69,300.00

        30%

        $77.00

        lopun's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!