Youtube-like Preview List

Youtube-like Preview List in React 18 with TypeScript using the Next.js framework.

Preview

Deployed using Vercel, the running live project can be acessed here.

How to Run

System Requirements

• Node.js 18.17 or later

Running Locally

Install the dependencies using yarn after cloning this repo:

yarn

Then just:

yarn dev

Tech Stack

• Main
  • React 18
  • TypeScript
  • Next.js
• Design System
  • Tailwind
• Fetching & Caching
  • Fetch (extends the native Web fetch)
  • React-Query
  • Either Strategy (Based)
• Images
  • SVGR
• Code Helpers (for re-render, comparison, etc)
  • debounce
  • tailwind-merge
• Development Helpers
  • Lint
    • ESLint
    • Prettier
    • ESLint React Hooks
  • Git Hooks
    • Husky
    • Lint Staged
    • Commits with Conventional Commits

Next Steps

• Add Icon
• Add Favicon
• Add Unit Testing: Vitest for example
• Add e2e Testing: Playwright for example
• Add Observability: Sentry for example
• Add .env variables
• Enable CI/CD: GitHub Actions for example
• I left some "TODOs" in the code
• Pull Request rules:
  • CODEOWNERS
  • Branch Rules
  • PR Template