🔴 Let’s build a Twitter Clone with REACT.JS! (Next.js, Sanity CMS, TS, SSR, Tailwind CSS, NextAuth)

Sonny Sangha

🚨 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

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

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 TWITTER 2.0 CLONE 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