PrimeScore Documentation

PrimeScore is a real-time sports broadcasting and viewer experience tool that provides live updates, visualizations, and commentary feeds for ongoing games.

• Match Viewer — View current score, game clock, possession, and key events (goals, fouls, etc.).
• Event Feed — Timeline of in-game events with timestamps (animate substitutions, cards).
• Match Setup — Create matches and add teams, players, and expected schedule.
• Live Input — Manually input events and score changes; supports pause/resume and timeline edits.

PrimeScore uses a client–server architecture:

• Frontend (React on Vercel): Chosen because React’s component-based structure makes it ideal for building dynamic UIs like scoreboards and dashboards, while Vercel provides seamless deployments, global CDN, and automatic scaling for fast access worldwide.
• Backend (Node.js/Express on Azure): Selected for its ability to handle real-time data efficiently. Node.js/Express offers lightweight, scalable APIs for match setup and live feeds, while Azure provides reliability, monitoring, and scalability as the platform grows.
• Database (Firestore): Used for its real-time synchronization capabilities, ensuring that match updates, team changes, and events appear instantly for all users. Firestore also scales automatically and integrates smoothly with Firebase services.
• Authentication (Firebase Auth): Provides secure, role-based access management. It was chosen because it supports multiple authentication methods and allows us to easily manage roles (admin, manager, viewer) with minimal setup.

UML Diagrams

Basic Wireframe

Live Update API

Receive and store stat events from external sources.

Feed API

Retrieve current state of the match for front-end display.

Match Setup API

CRUD for game meta (teams, match time, venue).

Display API

Serve structured game data to clients (scoreboards, overlays, etc.).

• Implement user authentication (sign in as admin or as viewer)
• Create a user homepage that shows upcoming matches
• Create a user profile under the homepage where the user can edit personal details
• Set up the documentation site on GitHub Pages and link it in the README
• Set up backend testing and show a code coverage badge on the repo
• Match creation form on the admin page that automatically reflects as an upcoming match on the user homepage

1. As a viewer, I want to create an account and log in, so that I can access my homepage.
2. As a viewer, I want to see upcoming matches on my homepage, so that I stay updated on events.
3. As a viewer, I want to open a profile page, so that I can view my profile details.
4. As a viewer, I want to edit my personal details, so that my profile stays up-to-date.
5. As a viewer, I want to log out and return to the Welcome page, so that I exit my session safely.
6. As a developer, I want to host a documentation site on GitHub Pages, so contributors can access docs easily.
7. As a developer, I want to set up backend testing, so that I can ensure the system works correctly.
8. As an admin, I want to create a match using a form, so that it appears under upcoming matches for viewers.
9. As an admin, I want to log in to the Admin page, so that I can access the admin homepage.
10. As a developer, I want to deploy the app to Vercel (frontend) and Azure (backend), so that it’s hosted online.

git clone https://github.com/your-repo/primescore.git

# Terminal 1 (frontend)
cd frontend
npm install
npm run dev

# Terminal 2 (backend)
cd backend
npm install
npm run dev

Ensure you have Node.js and npm installed before running the commands above.

• Branching: main for stable code; feature branches for new work.
• Pull Requests: All changes go through PR review with at least one approval.
• Commit messages: Conventional commits: type(scope): short description.