강의

멘토링

로드맵

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.9) 51 reviews

846 learners

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

Reviews from Early Learners

What you will learn!

  • 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,551

Learners

196

Reviews

64

Answers

4.9

Rating

6

Courses

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

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

  • (현) 네카라쿠배 재직

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

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

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

Curriculum

All

40 lectures ∙ (10hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

51 reviews

4.9

51 reviews

  • official님의 프로필 이미지
    official

    Reviews 1

    Average Rating 5.0

    5

    63% enrolled

    이 강의를 들을지 말지 고민하시는 분들을 위해 제가 강의를 들으면서 느낀 장점에 대해 설명드리려고 합니다. 또한 들으면 도움이 될 사람들을 정리해보았습니다 장점 1. 3개의 클론코딩으로 최신 기술 및 Supabase를 사용하는데 빠르게 익숙해질 수 있다 2. Server Actions와 같은 NextJS의 최신기술을 직접 경험하고 구현해볼 수 있다 3. 무한스크롤과 같이 실제 프로젝트를 진행할 때 필요한 핵심적인 기능들을 중심적으로 학습할 수 있다 4. Vercel과 AWS 두 가지의 버전의 배포 방법을 학습하여 개발 경험을 향상시킬 수 있다 장점은 이렇게 네 가지로 설명드릴 수 있을 것 같습니다 이 강의를 들으면 도움이 될 것 같은 분들을 정리해보았습니다 1. 전역 상태 관리와 서버API에 기초적인 배경지식이 있으며, 반복 학습을 통해 숙련시키고 싶으신 분 2. 백엔드와 프론트엔드를 통합하여 하나의 프로젝트를 완성시켜보고 싶으신 분 3. 프로젝트 생성부터 배포까지 모든 과정을 직접 경험해보고 싶으신 분 4. 반복적인 학습으로 코드 및 기능 구현에 익숙해지고 싶으신 분 초반에 React Query, Recoil, NextJS 등 해당 강의에서 다루는 기술 스택에 대해 전체적인 설명을 해주는 강의가 구성되어 있긴 하지만, 기초적인 지식이 없는 경우 이해하기 어려울 수 있습니다. 기술이나 라이브러리에 대한 기초 설명보다는 활용 위주로 강의를 진행하기 때문에 배경지식이 없다면 먼저 기본적인 내용을 학습하시고 이 강의를 듣는 것을 추천드립니다. 타 강의에 비해 진행속도가 빠르고 완성하는 프로젝트 갯수가 많은 만큼 단기간에 반복적으로 기능을 구현하여 실력 향상이 체감됨을 느끼실 수 있을 것 같습니다. 숙련을 위해 강의를 고민하시는 분이라면 추천드립니다.

    • 로펀
      Instructor

      헉 너무 상세하게 수강평 작성해주셔서 정말 감사합니다!! 프로젝트가 많은걸 수강생 분들께서 어떻게 받아들이실지 많이 걱정했는데 오히려 도움이 되었다고 해주셔서 너무 감동입니다 ㅎㅎ 그나저나 벌써 강의를 거의 끝내가시네요 🫢 남은 강의 화이팅이에요 초보님! 후반부 어려운 내용이 있으면 적극적으로 도움 드리겠습니다 :)

  • Jane님의 프로필 이미지
    Jane

    Reviews 1

    Average Rating 5.0

    5

    66% enrolled

    Supabase를 사용해보고 싶었는데 Next.js에 사용하려니 자료가 부족해서 어려움을 겪던 중 이 강의를 듣게 되었습니다. 투두리스트 같은 간단한 프로젝트로 Supabase의 기본을 익히고 나서 Storage나 Auth 같은 주요 기능들도 직접 구현해볼 수 있는 점이 마음에 들었습니다. 노션에 강의 내용 정리도 잘 되어 있어서 강의를 따라가기에 어려움이 없고 설명도 차근차근 해주셔서 회사를 다니면서도 강의를 벌써 꽤 많이 들을 수 있었네요☺️ 좋은 강의 만들어주셔서 감사합니다. 도움이 많이 되었어요

    • 로펀
      Instructor

      안녕하세요 Jane님! 회사를 다니시면서 강의 수강까지 이렇게 빨리 해내시다니 너무 멋있으십니다 🫢 수강생 분들께서 잘 이해하실 수 있도록 천천히 설명드리고 있어요 ㅎㅎ 좀 느린 것 같으면 배속 기능을 활용하셔도 좋을 것 같아요. 소중한 수강평 남겨주셔서 너무 감사합니다!

  • 조현석님의 프로필 이미지
    조현석

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    프론트엔드 개발을 하면서 저만의 웹앱을 만들어보고 싶어 수강을 시작했습니다. Next.js와 Supabase 연동을 혼자 시도했을 때는 많이 어려웠는데, 이번 강의를 통해 많은 것을 배워갈 수 있었습니다. 좋은 강의를 만들어주셔서 감사합니다! 덕분에 포트폴리오 3개 덤으로 가져가게됩니다 ㅎㅎ 추가로, 현재 Next.js는 15버전이고 강의에서는 14버전을 사용하고 있어 문법 차이가 생각보다 많았습니다. 강의에 버전 차이에 대한 보충 자료를 추가해주시거나, npx create-next-app@14 ... 커맨드를 사용하도록 안내해주시면 학습이 더 편리할 것 같습니다.

    • Seung-Hyun님의 프로필 이미지
      Seung-Hyun

      Reviews 1

      Average Rating 4.0

      4

      30% enrolled

      기술에 대한 이론적인 부분을 추가하면 더 좋을 것 같음

      • 망고님의 프로필 이미지
        망고

        Reviews 20

        Average Rating 4.8

        5

        100% enrolled

        최신 버전으로 예제를 잘 만들어주셔서 잘 배웠습니다

        $77.00

        lopun's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!