My Stage

Inspiration

Public transportation can be overwhelming, especially in areas where bus stages aren’t clearly marked or routes aren’t well-documented. Many people - especially newcomers, tourists, or even daily commuter -often miss their rides or get lost trying to find the nearest bus stop. We wanted to solve that problem by creating a tool that helps users quickly and easily locate the nearest bus stage, reducing confusion and improving everyday mobility.

What it does

MyStage is a location-based web app that helps users find the closest bus stage to their current position. By accessing GPS data (with user permission), the app identifies nearby stages and provides directions or a simple map view to guide users. This tool is especially helpful in unfamiliar areas, helping users save time, avoid walking in the wrong direction, and gain more confidence navigating public transit.

How we built it

Frontend & Framework: We used Next.js for a modern, fast, and SEO-friendly frontend experience.

CMS & Data Management: We used Payload CMS to manage bus stage data efficiently, allowing for scalable and dynamic content updates without code changes.

Maps & Location: Integrated geolocation APIs to detect user location and render nearby bus stages on a map using Google Maps.

Deployment: Deployed using vercel.

Challenges we ran into

Accurately mapping bus stages was a challenge due to inconsistent data and a lack of centralized sources.

Ensuring the app worked smoothly across different browsers and devices took time, especially for location permissions and mobile responsiveness.

We had to manage user privacy carefully when working with geolocation features.

Accomplishments that we're proud of

We created a working prototype that reliably shows nearby bus stages based on a user’s real-time location.

We designed a simple, intuitive interface that doesn't require a steep learning curve.

Successfully integrated map and location APIs without compromising user experience or security.

What we learned

How to work with geolocation APIs and map services in real-world applications.

The importance of clean, user-focused design when solving real problems.

How to troubleshoot cross-browser compatibility and manage API rate limits.

What's next for My Stage

Expand coverage: Add more cities or regions by integrating additional transit data sources.

User input: Allow users to report missing or incorrect stages to improve the data.

Routing: Add route suggestions and bus arrival estimates for better trip planning.

Mobile App: Develop a native version for Android and iOS for better performance and accessibility.

Built With

• google-maps
• nextjs
• payload
• shadcn
• tailwind