Build a Twitter clone with the Next.js App Router and Supabase

This repo accompanies this free egghead course.

🔍 About

In this course, we build a Twitter clone from scratch, using the Next.js App Router and Supabase. We dive deep on the Next.js App Router, learning about:

• Client Components
• Server Components
• Route Handlers
• Server Actions
• Middleware
• Implementing Optimistic UI

On the Supabase side we look at:

• Configuring Supabase Auth to use cookies
• Using Row Level Security (RLS) policies to implement Authorization
• Querying data across multiple tables
• Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI
• Subscribing to realtime database changes

This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

🎓 Instructor

Jon Meyers is a Software Engineer, Educator and Hip Hop Producer from Melbourne, Australia. He's passionate about web development and enabling others to build amazing things! He is currently working as a Developer Advocate at Supabase, showing just how awesome (and not that scary 👻) databases can be!

Jon's courses at egghead.

Follow Jon Meyers on Twitter and subscribe to his YouTube channel.

🗺 Table of Contents

1. Start a new Supabase project
2. Create a Next.js app with the create-next-app CLI
3. Query Supabase data from Next.js Server Components
4. Create an OAuth app with GitHub
5. Authenticate users with GitHub OAuth using Supabase and Next.js Client Components
6. Refresh session cookie for Next.js Server Components with Middleware
7. Restrict access to authenticated users with RLS policies
8. Dynamically render UI based on user session with SSR in Next.js Client Components
9. Implement Protected Routes for authenticated users with Supabase Auth
10. Generate TypeScript definitions from PostgreSQL schema with Supabase CLI
11. Setup a Foreign Key relationship between PostgreSQL tables
12. Automatically generate a profile for every user with PostgreSQL Function Triggers
13. Run authenticated Server-side mutations with Next.js Server Actions
14. Create a PostgreSQL join table in Supabase Studio
15. Implement dynamic buttons with Next.js Client Components
16. Declare global union types with Typescript
17. Implement Optimistic UI with the Next.js useTransition hook
18. Dynamically update UI with Database changes using Supabase Realtime
19. Style a Twitter clone with Tailwind CSS
20. Deploy Next.js App Router project to production with Vercel