Overview

This document describes the component structure of our frontend. We aim to build a modular, reusable, and scalable UI. The project is split into pages and common components, which can be easily maintained and extended.

Pages

• HomePage:
  Displays livestreams in a carousel (Twitch-like grid layout) and includes navigation buttons and a sidebar for followed channels.

• LoginPage & RegisterPage:
  Forms for user authentication.

• ProfilePage:
  Shows logged-in user details such as username, email, profile picture, and follower count. This page can update data on the fly and interact with our AuthContext.

• StreamerProfilePage: Shows details of another user (streamer).

• SettingsPage:
  Enables users to change settings like username, email, password, etc.

Components

• HomePageStreamItem:
  A card component that displays individual livestream details (thumbnail, title, streamer, game, viewer count).
• HomePageStreamerItem: A component that displays information about the most followed streamers on the platform. When clicked it takes the user to the streamers profile page.
• FollowingSidebarItem: A component which is used in the sidebar on the home page. Used for displaying all the streamers a user currently follows.
• HomeLivestreams: A carousel on the home page used for displaying the most watched streams.
• HomeSidebar

Global State Management

• AuthContext:
  Provides a context for managing authentication data (JWT token, user info, login/logout functions).

  • The AuthContext is used by both page-level components (e.g., LoginPage, ProfilePage) and shared components (e.g., Header).

• Data Fetching:
  Pages like StreamerProfilePage and HomePage make API calls to retrieve user and stream data using React Query.