← Projects

Photalks

An app for finding nearby photo booths and sharing photos and reviews. Built map exploration on Naver Map, step-by-step review writing and photo upload flows, and released it on the App Store.

Jul 2022 – Nov 2022Frontend developer on a 6-person team (2 designers, 2 backend, 2 frontend)

View project page ↗GitHub ↗

Role

Frontend development on a 6-person team (2 designers, 2 backend, 2 frontend)

Problem

It was hard to find the locations and information of self photo booths in one place

Solution

  • Map explorationBuilt current location exploration on Naver Map with "Search this area again", and synchronized marker and list selection
  • ReviewsBuilt step-by-step review writing and image resizing before upload

Result

Completed the React Native app and released the iOS app on the App Store

Overview

Photalks is a mobile app where users find photo booths near their current location on a map and leave a review after using one. On the DND 7th cohort project, I worked in a 6-person team of 2 designers, 2 backend developers and 2 frontend developers, and I built the frontend of the React Native app. It was made so that the flow runs from discovering a booth to posting a review with a star rating and photos.

Key features

  • Finding booths on the map: Shows photo booths near the current location on a Naver Map-based map, and lets users narrow the results by brand.
  • Searching a chosen area again: After moving the map, the user taps to search again and loads the booths in that area.
  • Choosing a booth and writing a review: Select a booth from a map marker or the list, and write a review with a star rating, tags and photos.
Map search, photo booth information and photo review screens in the real Photalks app

Implementation and improvements

  1. Separated map movement from the moment of searching

    If results reload every time the map moves, the list can keep changing while the user is browsing. When the screen is moved, a Search this area again button appears, and booths are fetched for the new center coordinates only when the user taps it. The current location and the brand filter are also connected to the search conditions.

  2. Updated the selected marker and the bottom list together

    Tapping a marker sets that booth as selected, and the bottom list is connected so that the booth is shown at the top. Also fixed a problem where the selected item disappeared from the list after the booth selection changed.

  3. Split the review input into steps and shrank photos before upload

    The review first asks for a star rating and the features of the shop. The next step asks for photo result tags and tags the user types in, and then the photos and a description are submitted. Up to 4 photos can be selected. Before upload they are reduced so that no side is longer than 600px, and then included in the review data.

Tech stack

Mobile

React Native · TypeScript · React Query · CodePush

Results and current status

Users can find booths near their current location, narrow them by brand, and move the map to search a chosen area again. Built the user flow of checking a booth by following the selected marker and the list, and writing a review with a star rating, tags and photos. Completed the React Native app and released it on the App Store as an iOS app, and applied CodePush for app updates.