Live Predictor

Full-stack football match prediction and tracking platform built with a Java/Spring backend and a React/TypeScript frontend.

How I built it

• Built a complete full-stack product with clear separation of concerns between frontend and backend.
• Integrated live external sports data and normalized it into a reliable domain model.
• Implemented automated synchronization workflows to keep match data fresh without manual intervention.
• Used TypeScript and DTO-based API design to improve reliability and reduce runtime data issues.
• Structured for maintainability with component-based UI and service/repository layers in the backend.

Product Overview

Live Predictor allows users to:

• Browse recent and upcoming matches
• View match details in responsive UI
• Consume continuously updated match data from the backend API
• Work with a system designed to scale from local development to production deployment

Architecture

Frontend

• React + TypeScript
• Component-driven UI architecture
• Hooks-based data fetching and state management
• Responsive layout for desktop and mobile

Backend

• Spring Boot (Java 21)
• REST API for frontend communication
• Spring Data JPA + Hibernate for persistence
• Scheduled jobs for automatic data updates
• Jackson + Java records/DTOs for type-safe payload mapping

Data Layer

• PostgreSQL relational database
• Indexed lookups and structured match storage

Tech Stack

• Frontend: React, TypeScript, Vite, CSS
• Backend: Java 21, Spring Boot, Spring Data JPA, Hibernate
• Database: PostgreSQL
• Tooling: Gradle, npm

Repository Structure

live-predictor/
|- backend/   # Spring Boot API + data synchronization
|- frontend/  # React TypeScript client

Local Setup

Prerequisites

• Java 21
• Node.js 18+
• PostgreSQL

1) Start the backend

cd backend
.\gradlew bootRun

2) Start the frontend

cd frontend
npm install
npm run dev

.