Initialize Frontend Project Structure and Architecture

Author: kalok94884-rgbCreated Oct 23, 2025Updated Mar 28, 2026

Overview

Establish the foundational setup for the frontend of a streaming website within the daniulive/SmarterStreaming repository. This issue covers Next.js project bootstrapping, configuring TailwindCSS, installing essential libraries, and setting up a scalable folder structure for future development.

Tasks

  • Create a new Next.js application (if not present)
  • Install dependencies:
    • TailwindCSS
    • Framer Motion
    • @headlessui/react
    • Video.js
  • Configure TailwindCSS:
    • Initialize Tailwind (npx tailwindcss init -p)
    • Integrate Tailwind into global CSS
  • Establish project structure:
    • /components for reusable UI components
    • /pages for Next.js routing
    • /styles for global styles
  • Add a README describing the architecture and tech stack rationale
  • (Optional) Set up CI/CD pipeline for linting and building

Acceptance Criteria

  • Next.js app runs locally (npm run dev)
  • TailwindCSS styles apply successfully
  • Project directory is organized for scalable development
  • README file describes architecture and tech choices
  • CI/CD workflow (if available) successfully lints and builds the project

This foundational issue enables efficient development and future feature integration for the streaming website frontend.

Source: daniulive/SmarterStreaming