🔴 Let’s build a Community Discussion App with NEXT.JS! (React, SQL, Supabase, GraphQL, TS, Tailwind)

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com 🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github ❗️StepZen has hooked us up with a Customized FREE plan… Check it out! 👉 https://stepzen.com/signup?utm_source=papareact&utm_medium=videotutorial --- The much anticipated build is FINALLY HERE! Join me as I build the it with REACT & NEXT.js, you'll learn how to do the following in this build: 👉 You’ll learn how to create a GraphQL backend directly connected to your PostgreSQL Supabase database effortlessly with Stepzen! 👉 You’ll be able to build a Login authentication flow with the Reddit API using NextAuth 👉 You’ll learn how to implement your first SQL relational database (Including how to use Primary & Foreign Keys)! 👉 You’ll learn how to write robust code with Typescript! 👉 You’ll learn how to leverage Next.js Server Side Rendering to get a FASTER page load time! 👉 You’ll learn to create your own API backend endpoints to communicate safely with your frontend! 👉 You’ll learn about Tailwind CSS and how to build this awesome Responsive website! 👉 You’ll be able to Deploy to Vercel and have the site online by the end of this tutorial! + SO MUCH MORE! 🎙️ PODCAST https://links.papareact.com/podcast 🌍 SOCIALS: Instagram: https://links.papareact.com/instagram Facebook: https://links.papareact.com/facebook LinkedIn: https://links.papareact.com/linkedin Twitter: https://links.papareact.com/twitter Discord: https://links.papareact.com/discord Newsletter: https://links.papareact.com/newsletter ❤️ SUPPORT PAPA Merch: https://links.papareact.com/merch Donate: https://links.papareact.com/donate 🕐 TIMESTAMPS: 00:00 Introduction 01:13 Build Showcase (1/2) 04:51 StepZen Sponsorship 08:26 Build Showcase (2/2) 11:46 Setting up Next.js & Tailwind CSS 14:00 Initialising the Build 19:09 Building the Header Component (1/3) 24:29 Implementing Heroicons 26:13 Building the Header Component (2/3) 30:30 Building the Search Box in Header Component 33:43 Building the Header Component (3/3) 39:43 Building the Sign In & Sign Out Button in Header Component 43:20 Implementing NextAuth 47:15 Implementing Reddit Login using NextAuth 59:30 Setting Up & Implementing Supabase 1:01:35 Explaining Relational Database 1:05:28 Creating Tables in Supabase 1:12:56 Setting Up & Implementing StepZen 1:25:15 Setting Up & Implementing the Apollo Client 1:36:05 Building the PostBox Component (1/2) 1:39:56 Building the Avatar Component 1:45:48 Building the PostBox Component (2/2) 1:51:30 Building the Body Section of the Post Box 1:56:19 Building the Errors Section of the Post Box 2:03:45 Implementing Subreddits 2:29:42 Implementing react-hot-toast library 2:31:50 Testing Subreddit Functionality 2:36:13 Building the Feed Component and Functionality 2:54:43 Creating the Post Component 2:57:18 Building the Votes Section of Post Component 3:00:53 Building the Header Section of Post Component 3:05:12 Building the Body Section of Post Component 3:06:33 Building the Image Section of Post Component 3:07:56 Building the Footer Section of Post Component 3:11:00 Implementing Refetching Post Data Functionality 3:15:32 Building the Subreddit Page 3:43:30 Implementing UI Ball Loader Library 3:46:27 Implementing the Comment Functionality 4:07:39 Implementing the Upvote & Downvote Functionality (1/2) 4:19:49 Live Debugging Session! 4:36:30 Implementing the Upvote & Downvote Functionality (2/2) 4:41:17 Implementing the Top Communities Section 4:52:36 Deploying to Vercel 5:08:18 Final Deployed Build Demo 5:05:43 Outro DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Reddit and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #reactjs #nextjs #typescript #tailwindcss #postgreSQL #SQL #databases #stepzen #graphQL #supabase