Skip to content

jpegjon/twitter-clone

Repository files navigation

Technologies Used

  • Next.js - Used as the app framework to handle everything from data fetching, rendering, state management etc.
  • Sanity CMS - Used as the content platform/database to house the tweets
  • TypeScript - Used for strong static typing and help minimize the amount of bugs/warnings in the app.
  • Tailwind CSS - Used to style the app.
  • Toast notifications - Notifications that display when the feed has been refreshed, or when a new tweet has been posted to the timeline.
  • Next.js Server Side Rendering (SSR) - Used to fetch the tweets from the Sanity CMS backend.
  • GROQ - The language used to query the Sanity CMS backend for tweet fetching.
  • NextAuth - Used to authenticate a logged in user via the Twitter API.
  • Vercel - Used as the deployment platform.

Features & User Flow

  • Click the "Sign in" button on the left-hand nav, and you're directed to sign in using your Twitter account.
  • Once signed in, the user is able to type a tweet in the form, attach an image, and submit.
  • Fully responsive design, down to mobile.
  • Click the arrow icon near the top-center of the screen to trigger the React Hot Toast feature - a confirmation message that the feed has finished updating.
  • The existing comments are tied to/reference existing tweets, using Sanity.
  • NASA's Twitter feed is embedded on the right-hand nav.