Clash Cache

Clash Cache is a React + Vite web app for exploring Clash Royale deck and leaderboard data, backed by Firebase Cloud Functions and Firestore.

Why I Built This

I created this project to learn and practice React and modern web development in a hands-on, practical way. I wanted to build a fully functional application that required me to think through component design, state management, user interaction, and overall application architecture. This project gave me experience working with reusable components, managing props and state effectively, and structuring a front-end codebase in a clean and scalable way.

This application was developed as my final project for CS 571 at the University of Wisconsin–Madison (Fall semester). The course focuses on modern web and mobile application development, and this project served as a capstone opportunity to apply the concepts we covered throughout the semester. It required integrating core React principles with thoughtful UI design, problem solving, and real-world development practices.

🖼️ App Preview

Features

• Browse deck-related pages (Explore, Build, and Cache).
• View leaderboard experiences (Global and Friends).
• Serve data through Firebase HTTP endpoints.
• Keep top-player leaderboard and deck data refreshed with scheduled Cloud Functions.

Tech Stack

• Frontend: React, Vite, React Router, React Bootstrap
• Backend: Firebase Cloud Functions (Node.js)
• Database: Firestore

Project Structure

• src/ – React app source code
• functions/ – Firebase Cloud Functions for data ingestion and APIs
• public/ – Static assets
• docs/ – Generated/static deployment assets

Getting Started

Prerequisites

• Node.js (LTS recommended)
• npm
• Firebase CLI (for backend deployment)

Install dependencies

npm install
cd functions && npm install

Run frontend locally

npm run dev

Build frontend

npm run build

Firebase Functions Notes

The backend uses a secret API key for Clash Royale API access:

• CLASH_API_KEY

Set it with Firebase CLI before deploying functions:

firebase functions:secrets:set CLASH_API_KEY

Available Scripts (root)

• npm run dev – Start Vite dev server
• npm run build – Build production frontend
• npm run preview – Preview production build locally

License

Add your preferred license details here.