Frontend Setup - shibotsu/obs-clone GitHub Wiki

Overview

This page describes the steps and dependencies required to set up the frontend of our Twitch clone project. The frontend is built with React and uses Fluent UI for styling and components, along with other helpful libraries.

Prerequisites

  • Node.js (version 14 or later recommended)
  • npm (or yarn)

  1. Clone the repository
git clone https://github.com/shibotsu/obs-clone.git
cd your-repo
  1. Install Dependencies
npm install
  1. Environment setup Create an .env file if needed to store environment variables. For example:
REACT_APP_API_URL=http://127.0.0.1:8000/api
  1. Starting the Development Server Start the app locally with:
npm start

Key dependencies

  • React: The core JavaScript library for building user interfaces.
  • Fluent UI: Provides pre-built UI components with a modern design. We use both @fluentui/react and @fluentui/react-components packages.
  • React Router: For handling client-side routing (e.g., navigating between login, register, profile, and livestream pages).
  • React Query: For handling API calls to the backend.

Project Structure (overview)

  • src/
    • components/ – Reusable UI components (e.g. cards, carousels, sidebars)
    • pages/ – Page-level components (e.g. HomePage, LoginPage, RegisterPage, ProfilePage)
    • context/ – Global state management (e.g. AuthContext)
    • layouts/ - Layouts for each page (e.g. DefaultLayout, AuthLayout)
    • App.jsx – Main component that sets up routing and context providers
    • index.jsx – Entry point of the application