Statchasing

A site that provides additional interesting analytic data for Rocket League players with replays on ballchasing.com

Not part of the scene but want to see how it works?

1. Copy my personal profile link: https://ballchasing.com/player/steam/76561198835242233
2. Head over to Statchasing, paste the copied link in the text box and click the "See Stats" button

Features

• Cached data via IndexedDB for faster reload times on previously searched player stats.
• Buttons to filter stats (played game-modes, used cars).
• A handy sidebar to jump to different sections.
• Supports desktop and mobile browsers.

Technologies

• Frontend: React, Vite
• Backend: Rails
• Deployment: Fly.io

For Developers

If you'd like to explore or contribute to the codebase, you can set up the project locally by following these steps:

Prerequisites

Make sure you have the following installed:

• Ruby (with Bundler)
• Node.js and npm
• PostgreSQL (or the database you're using)
• Rails

---

Getting Started

1. Clone the repository:

 git clone https://github.com/maybethee/stat-chasing-rails.git
 cd statchasing

3. Set up the backend:

• Install ruby gems:

  bundle install
  

• Set up the database:

  rails db:create db:migrate
  

• Start the Rails server:

  rails s
  

• By default, the backend will run on http://localhost:3000

3. Set up the frontend:

• Navigate to the React app folder inside the rails app:

  cd stat-chasing
  

• Install npm dependencies:

  npm install
  

• Start the development server:

  npm run dev
  

• By default, the frontend will run on http:/localhost:5173

4. Access the app: Open your browser and navigate to localhost:5173. The frontend will communicate with the backend on http://localhost:3000.

Notes

• Hot Reloading: Changes in the React app will be reflected in real time, but backend changes will require you to restart the Rails server.

---

Setting Up Your API Key

This project requires a personal API key to interact with ballchasing.com. Follow these steps to configure it:

1. Obtain Your API Key:

• Visit ballchasing.com.
• Create an account or log in.
• Follow the documentation to generate your API key.

2. Set Up Your API Key in config/application.yml:

• Navigate to the config directory in your project.
• If application.yml does not already exist, create it:

touch config/application.yml

• Open config/application.yml in a text editor and add your personal API token:

API_BASE_URL: "https://ballchasing.com/api"
API_AUTH_TOKEN: your-api-token

• Replace your-api-token with your actual token.

3. Environment Variables Setup (Optional): If you are deploying to production, ensure that the API_AUTH_TOKEN value is securely set as an environment variable or through a secret management tool used by your hosting provider.

---

Contributing

Feel free to open an issue or submit a pull request if you encounter any problems or have ideas for improvements!