Selecting a coordinate needs to lead to a useful action
The hackathon team built a map for recording emotions and stories at places. Location permission, address search, recording, and discovery needed to work as one flow while frontend and backend development happened in parallel.
Connect location, recording, and exploration
Map and server state
React, TypeScript, and Vite provide the app foundation, with TanStack Router and Query for navigation and server state. Kakao Map supports current-location movement, coordinate selection, markers, and address search with coordinate conversion.
Two-step recording
Users first choose an emotion and then add a title, story, and photo. The selected emotion appears in the marker and badge, preserving the meaning of the record beyond its coordinates.
Discovery on a mobile map
Emotion filters, newest and popular sorting, personal records, and a top-places sheet support discovery. Records sharing a coordinate can be explored with previous and next navigation.
Forms, place details, and popular lists use bottom sheets, with action and filter placement arranged around the map.
An explicit backend contract
I documented place-list, detail, creation, deletion, like, and liked-state endpoints with multipart image upload. The shared specification provided a concrete integration target during parallel development.
Grand Prize at the 12th Highthon
Marker connected map selection, emotional recording, image upload, filtering, likes, and sheet interactions in one web app and received the event Grand Prize.
The main design work was turning a selected location into a clear recording or exploration flow, supported by an explicit API contract.
Trace
- Grand Prize
- 12th Highthon2026