Full Stack Twitter Clone
Published 9/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 4.92 GB | Duration: 8h 16m
Master the Modern Tech Stack
What you'll learn
Building Full Stack Applications
Working with SSR in Nextjs
Caching Queries using Redis
Deploying Full Stack Apps using AWS
Requirements
Basic of HTML, CSS and Javascript
Experience with React and NodeJS
Description
In this tutorial, we will create a FullStack Twitter Clone that allows users to create and post tweets, follow other users, and like, and view their own profiles and the profiles of other users.Twitter is one of the most popular social media platforms in the world, with over 330 million active users as of 2021. If you are interested in building a Twitter-like application, this tutorial will guide you through the process of building a FullStack Twitter Clone using the latest technologies.Tech StackNode.js for our backend code which would be running GraphQL server inside the node.js environment.GraphQL for our API, which provides a flexible and efficient way to define our data model and query it.Prisma ORM for our database ORM, which provides a type-safe and easy-to-use interface for interacting with our PostgreSQL database.PostgreSQL is our database, which is a powerful and reliable relational database system.Supabase for hosting and managing cloud Postgresql db.Redis for query caching on the server side and increasing query speedsGoogle OAuth for Sign in with GoogleJSON WEB TOKENS for authenticationNext.js for our front, which is a popular framework for building React applications with server-side rendering and optimized performance.TailwindCSS for styling and reusable components.Codegen for typesafe GraphQL queries and mutations.Graphql-Request as API client for client-server communicationReact-Query for client-side data caching and query cachingTypescript to maintain code quality and write type-safe code.Amazon Web Services for storage, deployments, and CDN.
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 What we are going to build?
Lecture 3 NodeJS Setup
Lecture 4 NextJS Setup with Tailwind CSS
Section 2: Building Twitter UI
Lecture 5 Twitter Feed Cards
Lecture 6 Building Twitter Sidebar
Section 3: Twitter Backend Setup
Lecture 7 What is GraphQL?
Lecture 8 Creating Express Typescript Project
Lecture 9 Setting up Prisma ORM and PostgreSQL
Section 4: Authentication
Lecture 10 Adding Google Auth
Lecture 11 Verifying and Generating JWT
Lecture 12 Implementing Authentication on Client Side
Lecture 13 Detect Logged In User
Section 5: Twitter Feed
Lecture 14 Designing Add Tweet Modal
Lecture 15 Adding Tweet Feed Schema
Lecture 16 Mutations and Resolvers for Tweet
Lecture 17 Adding Mobile Responsive
Section 6: User Profile Page
Lecture 18 Designing Profile Page
Lecture 19 SSR User Profile
Section 7: Setting AWS Account
Lecture 20 Getting AWS Access and Secret Keys
Lecture 21 Setting up S3 Bucket Policy
Lecture 22 Generating PreSigned URL for S3 Bucket
Lecture 23 Refactoring the Server Code
Lecture 24 Refactoring the SSR on Tweet Page
Section 8: Follow and Unfollow
Lecture 25 Follow and Unfollow on Server Side
Lecture 26 Follow and Unfollow on Client Side
Lecture 27 User Recommendation System
Section 9: Redis
Lecture 28 What is Redis?
Lecture 29 Caching with Redis
Lecture 30 Rate Limiting with Redis
Section 10: Deployment
Lecture 31 Launching AWS EC2 Instance
Lecture 32 SSH And Security Groups Setup
Lecture 33 AWS Load Balancer and CloudFront Setup
Lecture 34 Deploying NextJS to Vercel
Lecture 35 AWS Resources Cleanup
Developers who want to become Full Stack Dev
DDownload
Code:
Code:
Code:
