Login
Welcome
Homepage
Calendar
Start of the walk
During the walk
Record the new route and an option to generate a description using AI
Share feature
Profile

Inspiration

Most navigation apps today are designed for driving or cycling, leaving walking enthusiasts with few ways to explore or share meaningful routes. We wanted to change that. Stroll Path was inspired by the idea of making walking more engaging, social, and personalized — encouraging people to discover their surroundings, enjoy scenic paths, and connect with others who share a love for walking.

What it does

Stroll Path is an application for walking enthusiasts that combines route discovery, creation, and activity tracking with social connectivity. Users can find, record, and manage their favorite walking routes, tracking their progress and sharing experiences with a community of walkers.

The app allows users to record walks using GPS, automatically calculating distance, steps, and duration. Through AI-powered recommendations and descriptions, users can discover new routes or generate creative summaries for their own. Each route can include a custom name, photo, and hashtags like #nature, #urban, or #historic, with the option to keep it private or public.

A personalized profile helps users monitor their walking history, set daily step goals, and showcase their created routes. The social features—such as following others, liking routes, and sharing Google Maps links—make walking a connected and interactive experience.

By blending activity tracking, creativity, and community, _ Stroll Path _ transforms walking from a simple activity into a personalized and social exploration.

How we built it

Stroll Path is a modern, single-page web application (SPA) designed to deliver a seamless and interactive walking experience. Built with a component-based architecture using React 19 and TypeScript, it emphasizes clean code, clear separation of concerns, and cutting-edge AI integration for personalized route discovery and creativity.

1. Core Technology Stack

React 19:

Uses hook-based components (useState, useEffect, useMemo, useCallback) for efficient state and lifecycle management.

TypeScript:

Ensures type safety and maintainable code with clearly defined types for all core data (e.g., Route, User).

Tailwind CSS:

Provides a clean, responsive UI through utility-first styling directly within JSX.

Gemini API Integration:

Enables AI-generated route descriptions and personalized route recommendations.

Lightweight Build:

Dependencies like React and Gemini SDK load via import maps in index.html, avoiding complex build tools.

Firebase:

To manage data as a database service. User authentication, login, data, pictures, and other information.

2. Application Architecture

Component-Based Design:

The UI is composed of modular components (e.g., RouteCard.tsx, CreateRouteForm.tsx), making it scalable and reusable.

Centralized State Management:

App.tsx acts as the single source of truth, handling routes, users, filters, and UI state, with updates managed via callback props.

Separation of Concerns:

services/geminiService.ts → handles API communication and prompt logic.
hooks/useGeolocation.ts → manages GPS tracking and distance calculation.
data.ts → stores mock data, ready to be replaced by a real backend.
utils/ → helper functions like generateGoogleMapsUrl and getWarmImageUrl.

3. Key Features

GPS Route Recording:

Tracks real-time movement with navigator.geolocation, calculates distance via the Haversine formula, and estimates steps and duration.

AI-Powered Tools:

Description Generation: Gemini creates creative route summaries.
Route Recommendations: AI suggests walking paths based on natural language queries.
Dynamic Filtering & Search: Optimized with useMemo to update route lists efficiently under multiple filter modes, including AI-based searches.
Social Features: Users can follow/unfollow, like, and share routes. The handleFollowToggle function maintains cons istent updates across the user network.

Challenges we ran into

Since Stroll Path was primarily developed as a concept and architecture prototype, one of the biggest challenges was designing a realistic, scalable system without having a live backend or mobile deployment. Translating the idea of walking route recording, social interaction, and AI integration into a coherent front-end structure required deep consideration of data flow, modular design, and state management.

Another challenge was integrating AI meaningfully — identifying where the Gemini API could genuinely enhance user experience (e.g., generating descriptions, personalizing routes) rather than serving as a gimmick. Balancing technical feasibility and user value in the design was key.

Integrating live GPS tracking with smooth performance also posed a major technical challenge. Managing location accuracy, handling frequent coordinate updates, and optimizing for battery consumption required careful planning to ensure a responsive and efficient experience.

Finally, conceptualizing how GPS tracking and geolocation could be managed efficiently in the browser using React hooks and asynchronous updates was a learning curve, particularly when simulating data for non-native environments.

Accomplishments that we're proud of

We’re proud of developing a clear, modular architecture and detailed feature blueprint that can evolve into a full application. The project demonstrates strong separation of concerns, scalable component design, and thoughtful AI integration strategy — all grounded in real-world best practices with React and TypeScript.

We also built a fully functional prototype that records real walks, calculates distance and time, and allows users to share and explore routes. Adding hashtag tagging and social features made it more interactive and engaging than a typical map-based app.

Defining services, hooks, and utility layers early on provided a strong foundation for future implementation. We also successfully designed AI workflows (like prompt structures and response schemas) that can later plug directly into live Gemini API endpoints.

Even without full-scale deployment, the project captures the essence of Stroll Path’s mission — to make walking more engaging, social, and personalized.

What we learned

Through this project, we learned how to:

Design full-stack-ready architecture even without backend implementation.
Apply React hooks and TypeScript type systems for maintainable, predictable code.
Plan effective AI prompt engineering workflows to enhance user experience.
Use Tailwind CSS for rapid UI prototyping that remains flexible and consistent.
Think critically about user-centered design, ensuring each feature (GPS tracking, AI, social sharing) serves a clear purpose.

What's next for Stroll Path

Looking ahead, we plan to expand Stroll Path beyond its prototype stage into a more comprehensive platform for both locals and travelers. The next phase will focus on scaling to more locations and enhancing the experience for tourists by introducing tourist-friendly route recommendations — such as default sightseeing paths in popular destinations like Paris, New York, or London.

We also aim to explore a gamified walking experience, inspired by ideas like Pikmin Bloom or Pokémon Go, where walking itself becomes interactive and rewarding. This could include partnership features with local businesses — for instance, adding restaurants, cafés, or stores as stops where users can earn points or achievements along their routes.

In the near term, our focus will remain on core functionality: improving GPS tracking performance, refining route sharing, and polishing AI-based recommendations. Once these foundations are solid, we plan to gradually integrate the community and gamification elements as part of our future expansion roadmap.