Aggie-skate

Inspiration

As a skater at Texas A&M, I was always asking "Where should I skate today?" Some spots look good but have terrible surfaces. Others are great until security shows up. I wanted to build something to help Aggie skaters find the best spots on campus.

What it does

Aggie Skate Spots helps Texas A&M skaters find great places to skate:

• Rate Any Spot: Upload a photo and get an instant rating (1-10)
• Check the Weather: See real-time College Station weather and get skating recommendations
• Track Your Sessions: Time yourself, count tricks, and earn points
• Compete on the Leaderboard: Top 10 sessions with medals for 1st, 2nd, 3rd place
• Interactive Map: See all spots across campus
• Compare Spots: Pick between two locations side-by-side

How I built it

I used HTML, CSS, and JavaScript

Weather: I connected to a free weather API (Open-Meteo) that gives me real College Station conditions

// Fetch real weather data from College Station
async function fetchWeather() {
    const url = 'https://api.open-meteo.com/v1/forecast?latitude=30.6280&longitude=-96.3344';
    const response = await fetch(url);
    const data = await response.json();

    const temp = data.current.temperature_2m;  // Get temperature
    displayWeather(temp);  // Show it on screen
}

Image Analysis: When you upload a photo, my code looks at the colors:

• Lots of gray = probably concrete = good score
• Lots of green = probably grass = bad score
• Bright image = well-lit = bonus points 💡 javascript // Simple scoring algorithm function calculateScore() { let score = 5.0; // Start at 5/10 if (grayPercent > 30) score += 2.5; // Concrete bonus if (greenPercent > 30) score -= 2.0; // Grass penalty if (avgBrightness > 150) score += 1.0; // Lighting bonus return score; }

Session Timer: Simple math for scoring:

• 1 point per minute skating
• 10 points per trick landed
• Multiply by spot difficulty

So if you skate 30 minutes, land 5 tricks, at an 8/10 spot: Score = (30 + 50) × 0.8 = 64 points

Challenges I faced

1. Making image analysis work At first, I only checked if the image was bright or dark. But shaded concrete would get bad scores! I had to add more checks for different colors.

2. Getting the timer to work My timer kept running even after I stopped it, eating up memory. I learned to properly clean up my code when stopping the timer.

3. Weather API was confusing The weather service gives you a "code" like 51 or 95, not "rainy" or "sunny". I had to create a translator to turn codes into weather conditions.

4. Keeping track of all the features With 7 different tabs (analyze, campus spots, saved spots, map, compare, timer, leaderboard), I had to organize my code carefully so everything worked together without breaking.

What I learned

• How to connect to APIs and get real data
• How to analyze images using code
• How to store data in the browser
• How to make timers and calculate scores
• How to make websites look good with CSS
• How to debug when things break (a lot!)

What's next

• Mobile optimization: Make it work better on phones and tablets
• Let users create accounts and save their favorite spots
• Add comments and ratings from other skaters
• Send notifications when the weather is perfect
• Make a mobile app version
• Add more campus spots with photos and details

Built With

• HTML5
• CSS3
• JavaScript
• Leaflet.js (for maps)
• Open-Meteo API (for weather)

Gig 'em!

Built With

• css
• html5
• javascript