Dream Hack- CycleLink

One tap to start, One hub to work, One map to manage, One Tap to Celebrate

Comment

Inspiration

We tried signing up to volunteer and landed in a long Google Form with no progress or sense of how much was left. It felt endless and we nearly quit. That same night we were gaming together and watched a team coordinate smoothly with a mini map, clear roles, quick pings, and a ready check. It clicked for us: if strangers can get organised in minutes online, events in real life should feel just as clear.

We also love how Toss handles onboarding. One step per screen, one clear action, instant feedback. We wanted that feeling for volunteers. Everything in one place. A progress bar that shows where you are. Short, focused sections that actually finish.

So we blended the two ideas. Simple in-app onboarding that removes friction. A live map that shows where help is needed. Role targets that make coverage obvious. Precise notifications that reach only the people who need to act. Badges and small celebrations so contribution feels seen.

That is how CycleLink started. Make it easy to begin. Make it clear on the day. Make it rewarding to come back.

What it does

Ageless Bicyclists is a comprehensive volunteer management platform for organizing and participating in cycling events. The platform streamlines volunteer onboarding, event management, route planning, and provides both gamified and standard tutorials for new users.

How we built it

Languages Used

  • JavaScript (main application logic, React frontend)
  • HTML (structure for the web app, entry points)
  • CSS (styling, including Tailwind CSS for utility-first design)

Core Technologies & Frameworks

Frontend & UI

  • React 18.3.1: Main UI framework, component-based architecture.
  • React Router DOM 6.30.1: Handles client-side routing/navigation.
  • Tailwind CSS 3.4.17: Utility-first CSS for rapid styling and responsive design.
  • Lucide React 0.294.0: Icon library for modern UI elements.

Backend & Data

  • Firebase 10.14.1: User authentication (role-based: Volunteer/Admin/Pending), data storage, and real-time updates.

Mapping & Event Features

  • Google Maps JavaScript API: Interactive event route mapping.
  • Google Maps OverlayView: Used for advanced coordinate conversions.
  • HTML5 Drag and Drop API: Enables drag-and-drop volunteer reassignment and event route editing.

Animations & Tutorials

  • GSAP: Animation library powering gamified onboarding and tutorials.

Key Features

  • Volunteer Registration: 8-step signup with preferences collection.
  • Event Management: Browse/register for cycling events, Google Maps integration.
  • Event Route Mapping: Interactive planning with waypoints, start/end points, drag-and-drop.
  • Event Recommendations: Personalized suggestions based on volunteer experience.
  • Profile & Badges: Dashboard, achievement tracking, badge system.
  • Leaderboard System: Volunteer ranking.
  • Admin Dashboard: Volunteer/event management, analytics.
  • Gamified Onboarding: Animated, interactive tutorial for new volunteers.
  • Role-Based Navigation: Custom UI for volunteers and admins.

Authentication & Authorization

  • Utilizes Firebase Authentication with custom claims for role-based access:
    • Pending: Awaiting approval, access tutorial only
    • Approved: Full volunteer access
    • Admin: Full management and analytics tools

Performance Considerations

  • Efficient drag-and-drop logic (minimal re-renders, memory leak prevention)
  • Responsive UI design (Tailwind + React)
  • Optimized Google Maps workflows for fast event management

Challenges we ran into

From our own use • External Google Forms felt endless: As users, we found the form tedious because there was no sense of progress and sections blended together. We replaced it with an in-app, step-by-step sign-up that shows a clear progress bar indicator and grouped sections, so you always know how far you are and what’s next. • Everything now lives in one place: Sign-up, tutorial, acknowledgement, event discovery, and joining all happen inside the website/app. There is no Google Form hand-off, no tab switching, and no duplicate data entry. • Website and tools used were currently outdated. • There was no reliable system for both the volunteers and the organizers.

Accomplishments that we're proud of

We're proud to have worked with Ageless bicyclist's problem statement to develop this Onboarding platform prototype in under 2 weeks

What we learned

Onboarding is fragmented, role expectations are unclear, and in-field coordination is manual. A single, inclusive platform is needed to standardise onboarding and acknowledgements, make roles and expectations explicit, and support real-time route staffing and updates so commitment, safety, and continuity improve across all roles.

What's next for Dream Hack- CycleLink

• Full app live on Web, iOS (App Store), and Android (Google Play) • Integrate additional features • If money and data are sufficient - To include an AI recommendation feature

Built With

Share this project:

Updates