Focal
A map-based photo journal for tracking and reflecting on where you've been.
TEAM
Solo Capstone Project
Role
UI & UX Design, Full-Stack Development
Tech Stack
React, Node.js, Express, MySQL, Figma
TimeLine
March 2025 (1.5 weeks)
Overview
Introduction
This was my capstone project at BrainStation, where I built everything from scratch using the tech stack we learned: React on the frontend, Node and Express on the backend, and MySQL for the database. I also used Multer and Sharp to handle file uploads and extract metadata, and Leaflet for the map.
What is Focal?
Focal is a full-stack travel journaling app that helps people document their trips in a more contextual way. By extracting location and timestamp metadata from uploaded images, Focal helps users visualize where they’ve been and reflect on their trips by adding comments.
Outcomes
Functional web application that demonstrates the core interactions.
Ideation
Why I Made This
When I travel I tend to take a lot of photos on my phone but they usually sit in my camera roll without much context. I built Focal as a way to bring those memories back together, connected by where and when they happened.
How Might We
How might we make it easier to document and share our explorations in contextual way?
Process
Planning
I started with sketches and then creating wireframes on Figma for a general look and feel. The main user flow I wanted for this prototype was to:
upload photos → extract metadata → display on a map → add comments → save "logs"
Final MVP
User Flow
Photo Upload
Drag-and-drop interface for uploading JPEGs
Location Mapping
Displays property statuses and booking details.
Comments
Keeps property owners updated on guest feedback and property activities.
Saved logs
Easy access to property related financial statements.
Key Features
Upload Photos
Start by uploading photos either by dragging and dropping or selecting them manually. Focal extracts location and time data from each image automatically.
Create a Log
Once uploaded, your photos are grouped by date and location to create a visual log, letting you reflect on where you’ve been and what you experienced, all in one place.
Reflection
Challenges
EXIF Data Extraction
Sharp made it possible to extract coordinates and timestamps from uploaded images, but only for JPEGs so I limited support to JPEG files for MVP clarity and easier hosting.
Simplifying the frontend
By offloading metadata work to the backend, I kept the React side focused on layout, state, and user interaction, without having to handle file parsing or coordinate logic in the browser.
Future Improvements
If I continue working on Focal, I’d want to explore a few directions:
• User authentication and personal log dashboards
• A mobile app version, since documenting travel often happens on the go
• Shared or collaborative logs
• More thoughtful error handling and file validation