DH2642 Interactive Programming Project

React + Vite application with Redux Toolkit state management and Firebase backend.

Setup

Prerequisites

• Node.js (v16+)
• Firebase CLI (for deployment): npm install -g firebase-tools

Installation

# Install dependencies
npm install

# Start development server (runs on http://localhost:8080)
npm run dev

Available Scripts

Command	Description
npm run dev	Start Vite development server (HMR)
npm run build	Create production build in dist/
npm run serve	Preview production build locally
firebase deploy	Deploy to Firebase Hosting
npm run lint	Run ESLint
npm run format	Format source files with Prettier

Tech Stack

Category	Technology
Framework	React 19 + Vite 7
State Management	Redux Toolkit + persistence middleware
UI Library	Material UI v7 (Emotion CSS-in-JS)
Routing	React Router v7
Backend	Firebase (Auth + Firestore)
Animations	GSAP, Motion (Framer Motion), Three.js
External APIs	MediaWiki REST API

Third-Party Components (User-Visible)

Material UI (MUI)

Used across all major views for buttons, cards, typography, inputs, icons, and layout primitives. Theme is configured in styles/theme.js and provided via ThemeProvider in ReactRoot.jsx. Supports dark/light mode toggle via Redux (themeSlice).

Key components: Button, Card, Stack, Typography, TextField, Alert, Avatar, IconButton, Box, CssBaseline.

React Bits Components

Pre-built components from React Bits:

Component	Description	Tech	Location
SplitText	Animated text reveals with stagger	GSAP	components/SplitText.jsx
TrueFocus	Sequential word focus animation	Motion	components/TrueFocus.jsx
ElectricBorder	SVG filter-based animated border	–	components/ElectricBorder.jsx
ColorBends	WebGL shader background (theme-aware)	Three.js	components/background/

React Router

BrowserRouter in ReactRoot.jsx; Routes, Route, Navigate in AppPresenter.jsx.

Architecture

Model-View-Presenter pattern with strict separation of concerns:

• Models (src/app/models/): All Firestore + external API access
• State (src/app/features/): Redux slices (authSlice, gameSlice, wikipediaSlice, themeSlice)
• Middleware (persistenceMiddleware.js): Auto-syncs game state to Firestore
• Containers (*Container.jsx): Redux-connected, handle side effects
• Presenters (*Presenter.jsx): Prop composition, local UI state
• Views (src/views/): Pure presentational components

Firebase Configuration

Pre-configured in src/firebaseConfig.js:

• Project ID: iprog-project-c443f
• Services: Authentication (Email/Password), Firestore Database
• Auth Flow: onAuthStateChanged listener in authSlice.js; supports email/password login and explicit guest sessions
• User Data: Stored at users/{userId} (stats, leaderboard). Guest sessions persist progress but are filtered from leaderboard rankings.