인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
Programming

/

Full-stack

[Full Stack Mastery] Cloning 3 Websites with Supabase (Next.js 14)

Supabase: Give Your Full-Stack Development Wings! Learn how to do practical, real-world full-stack development with Next.js 14 and Supabase through 3 clone projects in this crash course.

(5.0) 30 reviews

725 students

Next.js
supabase
TailwindCSS
react-query
Firebase
Thumbnail

This course is prepared for Basic Learners.

What you will learn!

  • How to build a full-stack application without a server using Supabase (user authentication, file upload, real-time chat)

  • Next.js version 14 (feat. App Router, Server Actions)

  • Implementing Kakao OAuth Login

  • Tailwind CSS, React Query, Recoil library

  • Project Deployment Methods Using Vercel and AWS

  • Implementing infinite scroll and drag-and-drop functionality.

  • Domain purchase and connection

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?

  • A front-end developer who wants to complete a full-stack development project.

  • One-person / small development teams who want to significantly reduce 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

2,753

Students

99

Reviews

40

Answers

4.9

Rating

4

Courses

안녕하세요 🙂 풀스택 개발자, 그리고 1인 개발자로서의 삶을 살아가고 있는 로펀입니다.

이론보다는 프로젝트 위주의 실무 강의로 주니어 개발자 분들께 도움이 되는 강의를 만들어 나가고 있습니다 🚀

  • (현) 스타트업 소프트웨어 엔지니어

  • (전) 카카오스타일, 뤼이드 소프트웨어 엔지니어

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

  • (강의) 스파르타 코딩클럽 튜터, 스타트업 개발 멘토링 다수

  • (창업) SaaS(Blogfy, Sheetah), 공동구매 플랫폼 운영, 입대허니 브랜드 운영

Curriculum

All

40 lectures ∙ (10hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!