🏍️ RideWrapped 2025

Your Year on Two Wheels. An interactive, cinematic annual recap for motorcycle riders.

RideWrapped 2025 is a web application that generates a personalized "Spotify Wrapped" style summary for motorcyclists. Users input their riding stats, favorite locations, and memories, and the app generates a beautiful, animated slideshow celebrating their journey.

✨ Features

• Interactive Questionnaire: A smooth, single-page form to collect riding stats.
• Dynamic Map Generation: Visualizes the rider's journey using Leaflet.js and OpenStreetMap data.
• Cinematic Slideshow: 12+ animated slides powered by GSAP, showcasing stats like total distance, top locations, and riding personality.
• Personality Engine: Automatically determines if you're a "Speedster", "Explorer", "Zen Rider", and more based on your inputs.
• Social Sharing: Download individual slides or the entire summary as high-quality images for Instagram Stories.
• Cloud Persistence: Saves user recaps to a Supabase database for posterity.

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Custom Properties & Animations), Vanilla JavaScript (ES6+)
• Animations: GSAP (GreenSock Animation Platform)
• Maps: Leaflet.js & Nominatim API (Geocoding)
• Image Generation: html2canvas
• Backend: Supabase (PostgreSQL Database)
• Deployment: GitHub Pages (via GitHub Actions)

🚀 Getting Started

Prerequisites

• A modern web browser
• A Supabase account (free tier works great)

Local Development

1. Clone the repository

   git clone https://github.com/Synapse-Space/Riders-Recap.git
   cd Riders-Recap

2. Configure Environment Variables Create a config.js file in the root directory to store your local Supabase credentials.

   Note: config.js is git-ignored to keep your secrets safe.

   // config.js
   window.CONFIG = {
       SUPABASE_URL: 'YOUR_SUPABASE_URL',
       SUPABASE_ANON_KEY: 'YOUR_SUPABASE_ANON_KEY'
   };

3. Run the App Simply open index.html in your browser.

   Tip: Use a local server like Live Server (VS Code) or python -m http.server for the best experience.

🗄️ Supabase Setup

To enable data saving, you need to set up a table in your Supabase project.

1. Go to the SQL Editor in your Supabase Dashboard.

2. Run the following SQL query (also found in supabase_schema.sql):

   create table public.ride_recaps (
     id bigint generated by default as identity primary key,
     created_at timestamp with time zone default timezone('utc'::text, now()) not null,
     name text,
     total_distance numeric,
     locations text[],
     favorite_time text,
     favorite_terrain text,
     longest_ride numeric,
     favorite_day text,
     preferred_weather text,
     ride_length text,
     memorable_moment text,
     motorcycle_name text,
     personality text
   );
   
   alter table public.ride_recaps enable row level security;
   
   create policy "Enable insert for everyone" 
   on "public"."ride_recaps" 
   for INSERT 
   to public 
   with check (true);

📦 Deployment

This project is configured to deploy automatically to GitHub Pages using GitHub Actions.

1. Push your code to the main branch.
2. Go to your GitHub Repository Settings > Secrets and variables > Actions.
3. Add the following Repository Secrets:
   • SUPABASE_URL
   • SUPABASE_ANON_KEY
4. The action will automatically build and deploy your site, injecting the secrets securely.

🎨 Customization

• Themes: Edit styles.css variables (--cosmic-dark, --teal-electric, etc.) to change the color scheme.
• Personalities: Modify the personalities object in app.js to add or change rider archetypes.

📄 License

This project is open source and available under the MIT License.

---

Made with 🖤 and 🏍️ by Synapse Space