This full-stack web application is a searchable database of full-length professional tennis match videos sourced from Youtube. Tennis fans enjoy rewatching older professional matches but find it difficult to search for free content online in a systematic way. With Tennis Replay users can easily search and filter matches by player names, tournaments, and years to quickly find relevant content.

The frontend is built with React + Typescript and leverages Shadcn with Tailwind CSS for modern accessible components. Filtering state and search inputs are managed using React’s native hooks, while all CRUD operations for adding and editing videos utilize React Hook Form.

The backend is powered by Java Spring Boot and MySQL, handling API requests and storing match metadata. Admin login authorization is also implemented using JWT and Spring Security.

The app is deployed via fly.io which uses Docker images to define the runtime environment and Firecracker microVMs for deployment.

Finally, there is also a separate microservice developed in Python to leverage LangChain and incorporate AI-generated match summaries of video transcripts.

Below are screenshots of the main archive section on desktop and mobile.

Desktop Dark Mode

Desktop Light Mode

Mobile Dark and Light Modes