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.
在本教程中，我们将创建一个 FullStack Twitter 克隆，允许用户创建和发布推文、关注其他用户、点赞和查看他们自己的个人资料和其他用户的个人资料。

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.
Twitter 是世界上最受欢迎的社交媒体平台之一，截至 2021 年拥有超过 3.3 亿活跃用户。如果您对构建类似 Twitter 的应用程序感兴趣，本教程将指导您完成使用最新技术构建全栈 Twitter 克隆的过程。

Tech Stack 技术栈

• Node.js for our backend code which would be running GraphQL server inside the node.js environment.
  Node.js用于我们的后端代码，这些代码将在node.js环境中运行 GraphQL 服务器。
• GraphQL for our API, which provides a flexible and efficient way to define our data model and query it.
  GraphQL 用于我们的 API，它提供了一种灵活高效的方式来定义我们的数据模型并对其进行查询。
• Prisma ORM for our database ORM, which provides a type-safe and easy-to-use interface for interacting with our PostgreSQL database.
  Prisma ORM 用于我们的数据库 ORM，它提供了一个类型安全且易于使用的界面，用于与我们的 PostgreSQL 数据库进行交互。
• PostgreSQL is our database, which is a powerful and reliable relational database system.
  PostgreSQL是我们的数据库，是一个功能强大且可靠的关系数据库系统。
• Supabase for hosting and managing cloud Postgresql db.
  Supabase，用于托管和管理云Postgresql数据库。
• Redis for query caching on the server side and increasing query speeds
  Redis，用于在服务器端进行查询缓存并提高查询速度
• Google OAuth for Sign in with Google
  用于“通过 Google 登录”的 Google OAuth
• JSON WEB TOKENS for authentication
  用于身份验证的 JSON WEB 令牌
• Next.js for our front, which is a popular framework for building React applications with server-side rendering and optimized performance.
  Next.js我们的 front，这是一个流行的框架，用于构建具有服务器端渲染和优化性能的 React 应用程序。
• TailwindCSS for styling and reusable components.
  TailwindCSS，用于样式和可重用组件。
• Codegen for typesafe GraphQL queries and mutations.
  用于类型安全 GraphQL 查询和突变的 Codegen。
• Graphql-Request as API client for client-server communication
  Graphql-Request 作为客户端与服务器通信的 API 客户端
• React-Query for client-side data caching and query caching
  用于客户端数据缓存和查询缓存的 React-Query
• Typescript to maintain code quality and write type-safe code.
  Typescript 来维护代码质量并编写类型安全代码。
• Amazon Web Services for storage, deployments, and CDN.
  用于存储、部署和 CDN 的 Amazon Web Services。

Checkout detailed document on Twitter Clone Notion Page
在 Twitter 克隆概念页面上查看详细文档

Join Discord Server https://discord.gg/kRSRxBQ6xf
加入 Discord 服务器 https://discord.gg/kRSRxBQ6xf

Course Structure 课程结构

• Introduction 介绍(Watch Video) （观看视频）4 分 27 秒

• What we are going to build? 我们要建造什么？1 分 55 秒

• NodeJS Setup NodeJS 设置 4 分 21 秒

• NextJS Setup with Tailwind CSS Next使用 Tailwind CSS 设置 44 分 56 秒

• Building Twitter Sidebar 构建 Twitter 侧边栏 29 分 41 秒

• Twitter Feed Cards Twitter 提要卡 26 分 35 秒

• Creating Express Typescript Project 创建 Express Typescript 项目 15 分 52 秒

• What is GraphQL? 什么是 GraphQL？8 分 42 秒

• Setting up Prisma ORM and PostgreSQL 设置 Prisma ORM 和 PostgreSQL 10 分 22 秒

• Adding Google Login 添加 Google 登录 15 分 16 秒

• Verifying and Generating JWT 验证和生成 JWT 11 分 45 秒

• Implementing Authentication on Client Side 在客户端实现身份验证 22 分 53 秒

• Detect Logged In User 检测已登录用户 21 分 49 秒

• Designing Add Tweet Modal 设计添加推文模态 11 分 27 秒

• Adding Tweet Feed Schema 添加推文源架构 21 分 59 秒

• Mutations and Resolvers for Tweet Tweet 的突变和解析器(Watch Video) （观看视频）14 分 2 秒

• Adding Mobile Responsive 添加移动响应式(Watch Video) （观看视频）13 分 43 秒

• Designing Profile Page 设计配置文件页面 11m

• SSR User Profile SSR 用户配置文件 16m

• Getting AWS Access and Secret Keys 获取 AWS 访问密钥和私有密钥(Watch Video) （观看视频） 7 分 24 秒

• Setting Up S3 Bucket Policy 设置 S3 存储桶策略(Watch Video) （观看视频）6 分 12 秒

• Generating PreSigned Upload URLs 生成预签名上传网址 26 分 54 秒

• Refactoring the Server Code 重构服务器代码 15 分 54 秒

• Refactoring the SSR on Tweet Page 在推文页面上重构 SSR 5 分 49 秒

• Follow and Unfollow on Server Side 在服务器端关注和取消关注 21 分 1 秒

• Follow and Unfollow on Client Side 在客户端关注和取消关注(Watch Video) （观看视频）19 分 36 秒

• User Recommendation System 用户推荐系统 20 分 43 秒

• What is Redis? 什么是Redis？ 9 分 12 秒

• Caching with Redis 使用 Redis 进行缓存 18 分 20 秒

• Rate Limiting with Redis 使用 Redis 进行速率限制 5 分 39 秒

• Launching AWS EC2 Instance 启动 AWS EC2 实例 11 分 44 秒

• SSH And Security Groups Setup SSH 和安全组设置(Watch Video) （观看视频）13 分 54 秒

• AWS Load Balancer and CloudFront Setup AWS 负载均衡器和 CloudFront 设置 31 分 23 秒

• Deploying NextJS to Vercel 将 NextJS 部署到 Vercel 11 分 48 秒

• AWS Resources Cleanup AWS 资源清理 3 分 55 秒

In this comprehensive Full Stack Development tutorial, we delve into building a Twitter-like social media platform using cutting-edge technologies like Node.js and GraphQL. This course goes beyond just backend development with Node.js and data querying with GraphQL; it encompasses frontend development with the Next.js framework and styling with TailwindCSS, ensuring a seamless user interaction experience through real-time data interaction. You’ll learn the ins and outs of database management with Prisma ORM, how to deploy your application using AWS cloud services, ensuring user authentication and security, and providing a responsive web design along with a suite of social networking features implementation. Whether you’re looking to enhance your Web Application Development skills or gain insights into managing a complex social networking project, this tutorial offers practical guidance and deep dives into every aspect necessary for building and deploying a robust online community platform.

在这个全栈开发教程中，我们深入探讨如何使用Node.js、GraphQL等前沿技术构建一个类似Twitter的社交媒体平台。通过实时数据交互和精心设计的用户互动功能，本课程不仅涵盖了后端的Node.js开发和GraphQL数据查询，还包括了前端的Next.js框架和TailwindCSS样式设计。通过本课程，您将学会如何利用Prisma ORM进行数据库管理，以及如何将您的应用部署到AWS云服务，确保用户认证与安全，同时提供响应式网页设计和丰富的社交网络功能实现。无论您是希望提升Web应用开发技能，还是想要深入了解如何构建和管理一个复杂的社交网络项目，这个教程都将为您提供实用的指南和深入的洞察。