RRAP - Real-time Racing Results Application Platform

A full-stack web application for monitoring and displaying Baja SAE racing competition results in real-time. The application scrapes data from the official Baja SAE results website and provides a clean, responsive interface for viewing team standings and event results.

🏁 Features

• Real-time Data Updates: Automated scraping of racing results every 30 seconds
• Multi-Event Support: Tracks Endurance, Hill Climb, Suspension, Acceleration, and Maneuverability events
• Team-Specific Views: Dedicated dashboard for tracking your team's performance
• Live Leaderboards: Current standings for all monitored events
• Historical Data: Maintains complete race history in SQL Server database
• Responsive Design: Works seamlessly on desktop and mobile devices

🏗️ Architecture

Frontend

• React application with modern hooks-based components
• Responsive design with CSS Grid and Flexbox
• Real-time polling for live updates
• Team-focused dashboard with performance metrics

Backend

• Flask REST API server
• Background scheduler for automated data collection
• SQL Server database for persistent storage
• Web scraping with BeautifulSoup4 and requests

📋 Prerequisites

• Python 3.8+
• Node.js 14+
• SQL Server database
• Azure App Service (for deployment)

🚀 Local Development Setup

1. Clone the Repository

git clone <repository-url>
cd rrap

2. Backend Setup

# Install Python dependencies
pip install -r requirements.txt

# Create environment file
cp .env.example .env
# Edit .env and add your DB_CONNECTION_STRING

3. Frontend Setup

# Install Node.js dependencies
npm install

# Start development server
npm start

4. Database Configuration

Create a .env file in the root directory:

DB_CONNECTION_STRING=Driver={ODBC Driver 17 for SQL Server};Server=your-server;Database=your-database;UID=your-username;PWD=your-password;

5. Run the Application

# Start the backend API server
python backend.py

# In a separate terminal, start the React development server
npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5001

🌐 Production Deployment to Azure

Prerequisites

• Azure subscription
• Azure App Service instance
• SQL Server database (Azure SQL Database recommended)

Build and Deploy Steps

1. Build the React application:

   npm run build

2. Configure environment variables in Azure App Service:

   • DB_CONNECTION_STRING: Your SQL Server connection string
   • SCRAPE_INTERVAL_SECONDS: Scraping interval (default: 30)

3. Deploy using Azure CLI or your preferred method:

   az webapp up --name your-app-name --resource-group your-resource-group

Deployment Files

• startup.txt: Contains the gunicorn command for Azure App Service
• requirements.txt: Python dependencies
• .gitignore: Excludes sensitive files and build artifacts

📊 API Endpoints

Event Results

GET /api/results/{event_type}/latest

Returns the latest results for a specific event (endurance, hillclimb, suspension, acceleration, maneuverability).

Team Results

GET /api/team/{car_number}/latest

Returns the latest results across all events for a specific team.

Update Status

GET /api/update-status

Returns the last update timestamp and recently updated events.

🛠️ Configuration

Race Configuration

Update the race identifier in save.py:

race_identifier = 'Arizona25'  # Update for your specific race

Team Configuration

Update your team number in src/App.js:

const OUR_TEAM_NUMBER = 88; // Your team's number

Monitored Events

Configure which events to track in save.py:

monitored_event_types = ["Endurance", "hillclimb", "Suspension", "Acceleration", "Maneuverability"]

📁 Project Structure

rrap/
├── src/                    # React frontend source
│   ├── App.js             # Main application component
│   ├── App.css            # Application styles
│   └── index.js           # React entry point
├── public/                # Static assets
├── backend.py             # Flask API server
├── save.py                # Data scraping and database logic
├── requirements.txt       # Python dependencies
├── package.json           # Node.js dependencies
├── startup.txt            # Azure App Service startup command
└── README.md              # This file

🔧 Development

Adding New Events

1. Add the event to monitored_event_types in save.py
2. Create parsing function in save.py
3. Add database table creation logic
4. Update frontend components as needed

Database Schema

Each event type has its own table with the naming convention: {EventType}{RaceIdentifier} (e.g., EnduranceArizona25)

🚨 Troubleshooting

Common Issues

Build fails with 'react-scripts not found':

npm install
npm run build

Database connection errors:

• Verify your connection string in the environment variables
• Ensure SQL Server allows remote connections
• Check firewall settings

Scraping fails:

• Verify the Baja SAE website structure hasn't changed
• Check network connectivity
• Review table ID mappings in save.py

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

🏆 Acknowledgments

• Built for Baja SAE racing teams
• Data sourced from the official Baja SAE results website
• Designed for real-time competition monitoring

---

For support or questions, please open an issue in the repository.

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify