SpotShare

Main Search Screen
Location Based Map View
Spot Details
Review and Pay
My Bookings
Spot Filters

Inspiration

Finding parking near campus is almost always stressful, expensive, and unpredictable, especially around Morgridge Hall and the engineering buildings. At the same time, many driveways and private spots sit empty for hours while their owners are at work or in class. We wanted to connect those two realities: turn unused spots into an easy, trustworthy way to park cheaper and closer, while giving owners a simple way to earn a bit on the side. SpotShare grew out of that idea of making campus parking feel more like booking a Zipcar or Airbnb: quick, clear, and reservation‑based instead of circling the block.

What it does

SpotShare lets drivers quickly find and reserve short‑term parking spots on UW-Madison's campus. The home screen shows a map with price pills for nearby available spots. Users open a search sheet, pick a destination and time window, and see curated nearby spots (driveways, a garage, and lots) with photos, prices, walking times, and host info. Tapping a spot opens a details view with amenities and a larger photo; from there, users walk through a simple review‑and‑pay flow. Completing payment books the spot into the Upcoming section of the Bookings tab, where users can see their upcoming and past trips.

How we built it

We built SpotShare as a mobile‑first Next.js app using the App Router and TypeScript. On the frontend, we used Tailwind and shadcn/ui for the layout, cards, buttons, avatars, and sheets to move fast but still keep a consistent visual style. The map is powered by @react-google-maps/api and the Google Maps JavaScript API + Places API: the search sheet talks to Places autocomplete, and the map renders a destination pin plus custom price pills using OverlayView. Parking spots are defined in a simple catalog in lib/mock-spots.ts that includes coordinates, hourly rates, amenities, hosts, and photos; we calculate totals on the fly from the chosen time window. For state, we used local React state for the search flow and a small Zustand store for bookings so Upcoming/Past bookings persist as you move between tabs.

Challenges we ran into

One of the main challenges was designing a flow that feels as simple as opening a ride‑share app while still handling real‑world constraints like time windows, overlapping bookings, and walking distances. We spent time tuning the pricing model and spot metadata so that “cheaper than campus parking” is obvious but still believable. On the technical side, integrating Maps + Places with the App Router and keeping the UI responsive on small screens required careful coordination between map state, search state, and the bookings store.

Accomplishments that we're proud of

We’re proud that SpotShare feels like a cohesive, end‑to‑end experience rather than just disconnected screens. The flow from search → map → spot details → payment → bookings is smooth enough that people can pick up a phone and understand how it works in seconds. The map visualization, with clean price pills and a destination pin, ended up looking very close to what we had in mind. We also like that the Bookings and Account tabs are more than placeholders: they show a history of trips and a credible profile, which helps sell the idea that this could be a real product, not just a concept slide.

What we learned

We learned a lot about the practical side of working with Google Maps in a modern React/Next.js app—especially how to integrate @react-google-maps/api with the App Router while keeping things fast and responsive on mobile. We also deepened our understanding of end‑to‑end product flows: how search, map interactions, pricing, and bookings need to interlock so the user never wonders “what happens next.” On the product side, we were reminded how much realism matters: realistic prices, coordinates, walking times, and host profiles do a lot of heavy lifting in making the experience feel trustworthy.

What's next for Spot Share

Next, we’d like to add a real backend so hosts can create and manage their own spots rather than relying on a static catalog. That would include authentication, host onboarding, and a simple calendar to manage availability and pricing. On the driver side, we’d like to support live availability and basic conflict handling, as well as more flexible search (different destinations, filters like covered vs. driveway, EV‑ready, and max price). Integrating a real payment provider and simple dispute/cancellation logic would make the flow production‑ready. Longer term, SpotShare could expand beyond a single campus, turning underused driveways and lots in any busy neighborhood into a reliable, bookable parking network.