twtr_exemplar

Branches

• main -> PR this branch for all edits.
• dev -> checkout this branch locally and test all changes made here.

Technologies used

• pnpm/bun.sh
• Next.js
• Tailwind CSS
• Prisma -> Database ORM
• create-t3-app
• Day.js - Date formatting
• Turborepo - high-performance build system for JS and TS codebases. speeds ups the execution of scripts in your package.json

Features

Google OAuth

Send a tweet

Like a tweet

Infinite Scroll

Concepts

• OAuth
• tRPC
• Schema Validation w/ Zod
• Cursor based pagination
• Invalidating queries
• Manually updating the cache
• Formatting dates with Day.js
• useMutation, useQuery & useInfiniteQuery

Setup

Bootstrap

pnpx create-t3-app@latest twtr_exemplar
# Select TypeScript, nextAuth, prisma, tailwind
# (Optional) Initialize a new git repository.
# run pnpm install
# install rome tools for linting and formatting
pnpm install rome --save-dev
pnpx rome init
pnpm install turbo --save-dev
touch turbo.json

Add a turbo.json file at the base of your repository.

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "outputs": [".next/**"]
    },
    "lint": {
      "outputs": []
    }
  }
}

Setting up a Database

We’ll be using a Supabase PostgreSQL database connected via Prisma, but feel free to use the default sqlite configuration.

pnpm install @supabase/supabase-js

Project Dependencies

pnpm add react-icons@latest dayjs@latest