Full Stack Twitter Clone

Designs a three-column twitter-like user interface using Tailwind CSS in a Next.js project, implementing a responsive sidebar with home, explore, notifications, messages, bookmarks, and profile icons, plus a tweet button.

Build a reusable Twitter feed card with avatar, name, caption, and optional image, inside a sidebar, using a grid layout, Next.js image, borders, hover effects, and icons.

Discover how GraphQL differs from REST, using a single endpoint to fetch only requested fields, define data shapes with typedefs, and resolve queries and mutations with resolvers.

Create and push a full-stack Twitter clone project, configure TypeScript and yarn scripts, and build a GraphQL server with Express and Apollo to test queries.

Set up Prisma ORM with PostgreSQL for a Next.js GraphQL project, migrate schemas, generate Prisma Client, and prepare for Google authentication in a Twitter clone.

Implement google sign-in on the front end with the react oauth google library, configure client ID from google cloud, and have the backend verify the token and issue jwt.

Learn to verify a Google token and generate a custom JWT for the user by validating or creating a database record, calling Google OAuth, and returning a signed token.

Connect the front end to the GraphQL back end by configuring GraphQL request, generating TypeScript types with codegen, and implementing Google token authentication via a client-side token.

Detect the currently logged-in user by reading the authorization header, decoding the JWT in a GraphQL context, and exposing a get current user query for client-side caching.

Designs the add tweet UI with a two-column feed grid, a current user avatar, a what's happening text area, and an image picker wired to AWS S3.

Build a tweet feed schema for full stack twitter clone using prisma, GraphQL, mutations, and queries. Define tweet and user models with an optional image and a one-to-many author relation.

Demonstrate fetching all tweets via a GraphQL get all tweets query, rendering a feed with author and image data, and creating tweets with a mutation, query invalidation, and toast feedback.

refactor the twitter clone into a reusable twitter layout component and render dynamic middle content via props.children, while building responsive mobile layouts with tailwind for desktop and profile routing.

Design a user profile page by using a GraphQL current user query to fetch tweets, display the user's name and profile image, and prepare a dynamic id-based route for profiles.

Convert a hardcoded profile into a dynamic view by fetching a user by id via GraphQL on the server. Use Next.js getServerSideProps for SSR and connect profiles to user ids.

Set up an AWS account, create an IAM user with S3 access, generate an access key and secret key, and create a development S3 bucket for image uploads.

Configure an S3 bucket policy to block public access, allow public read, restrict put to authenticated users, and enable cors with localhost 3000 using pre-signed upload URLs.

Learn to generate pre-signed S3 URLs using the AWS SDK v3 by implementing a GraphQL resolver that authenticates users, validates image types, and returns a signed URL for image uploads.

Refactor the server by moving hardcoded keys to environment variables via dotenv, and introduce a service layer for users and tweets accessed by resolvers.

Refactor the tweet page to fix SSR refresh by introducing client-side rendering with a state copy of server data, async mutation, and query invalidation to auto-refresh tweets.

Implement follow and unfollow on the server side by modeling followers and following with Prisma, migrating the schema, and building GraphQL mutations and resolvers to manage relationships.

Build a client-side follow and unfollow feature for the full stack Twitter clone, showing follower and following counts and a dynamic follow button with GraphQL.

Build a basic user recommendation widget for a Twitter clone by querying your followings and their followings with a simple resolver, filtering out already followed users, and rendering recommended profiles.

Redis is an open source in-memory key-value data store used for caching, streaming, and message brokering, enabling batch inserts into Postgres and fast reads.

Explore how to set up Upstash Redis, create a serverless Redis database, and implement caching to speed up expensive queries with a Redis client and cache invalidation.

Limit user actions with Redis by setting a per-user rate limit key with a 10-second expiry, checking before each tweet, and blocking repeated requests for tweets, follows, or messages.

Launch your twitter clone backend on AWS EC2 by deploying Ubuntu 22 on a t2 medium, with Redis via env var and secure access setup.

Connect to an AWS ubuntu instance via EC2 or SSH with a PEM key, then install node and run the twitter app on port 8000 with GraphQL access.

Configure an application load balancer and CloudFront distribution to host a Twitter clone on AWS, set SSL and domain, define a GraphQL origin, and implement health checks.

Deploy the front end to Vercel with Next.js, configure next public env vars for localhost and production, and rely on Vercel CI/CD to auto deploy.

Clean up AWS resources by disabling and deleting CloudFront, terminating EC2 instances, releasing Elastic IPs, deleting security groups, and emptying and deleting S3 buckets to avoid charges.