Summary
Keywords
Full Transcript
🚨 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 I asked Sanity to hook up some free stuff for this video... They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny --- 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 be able to build a Login authentication flow with Google or Twitter API using NextAuth 👉 You’ll implement the Ability to BAN a tweet via the Sanity Platform 👉 You’ll learn how to create structured content, for example how a single tweet can have many comments referenced to it! 👉 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 how to add data to a Sanity CMS Backend from the frontend using Mutations! 👉 You’ll learn how to Query data using the popular GROQ query language 👉 You’ll learn about Tailwind CSS and how to build this awesome Responsive website! 👉 You’ll learn how to implement Tweet Functionality & the ability to write a thread of comments! 👉 You’ll even learn how to create silky smooth React Toast Notifications! 👉 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 00:44 Build Showcase 04:40 Sanity Sponsorship 06:00 Build Explanation 07:20 Setting up Next.js & Tailwind CSS 10:51 Initialising the Build 15:14 Building the Sidebar Component 18:51 Building the SidebarRow Component 28:47 Building the Feed Component (1/2) 32:26 Building the Widgets Component 39:00 Implementing Responsive Design 47:53 Building the TweetBox Component 59:27 Setting up Sanity 01:11:12 Setting up Sanity Schemas 01:23:59 Explaining and Implementing Server Side Rendering 1:28:50 Creating a Type Definition File using TypeScript 1:32:21 Pulling Tweets from Sanity to the Feed 1:48:08 Building the Feed Component (2/2) 1:50:06 Building the Tweet Component 02:01:34 Implementing Comment Functionality 02:23:37 Implementing react-hot-toast 02:25:49 Implementing the Login Functionality using NextAuth 02:44:47 Implementing the Image URL Functionality 02:52:12 Adding Tweet Functionality using Mutations 03:06:08 CHECK PINNED COMMENT! (Adding Comment Functionality) DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Twitter 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 #sanitycms #tailwindcss
