Project Background
Why did I build this?
I created EXIF Mapper as a novice developer because I needed a project that was technically ambitious, yet engaging enough so I wouldn’t drop it halfway through. After one week of ideation, I settled on this concept. At the time, I had an embarrassingly limited understanding of how web apps work. I had never worked with external libraries, API requests, or built any CRUD functionality in my life. Thanks to my
very smart friend, I learned which tools I needed to bring this app to life.
Even though I didn't really know what my friend was talking about (running servers, using APIs, libraries, AWS S3?) I got some really helpful pointers on where to start. From there, I researched how to build a proper front-end and explored options for handling authentication, file storage, and data retrieval.
Learning & Development
Putting the pieces together, one step at a time
In order to build, I had to learn. My starting knowledge was effectively 0, so I did everything in baby steps.
First, I read about how REST APIs work, and got to know the Firebase and Maps APIs.
Next, I discovered how to extract metadata from media files.
Then, I learned how to structure, retrieve, and store data for individual users.
Finally, I learned to use React by making stupid stuff like a counter. Then, a to-do list I'll never use.
Once I felt ready, I got to work.
I got a lot out of just reading documentation - things clicked for me once I read the React docs in full, along with useful parts of the Google Maps and Firebase docs, which really helped me get over my fear of reading technical content. What also helped me grasp the backend infrastructure was sketching little diagrams like this:
Eventually, I scrapped together a basic login and application UI that would create, store, modify, and relevant user data. I learned to extract location and time data from photos using exifr, an XML parser for reading data from XMP. Next, I practiced encoding images as Base64 (hashed with SHA-3 using Crypto-JS) so I could store image references in JSON objects.
Final Outcomes
Project Showcase
I used Firebase Authentication to handle account creation and login, giving each user a private account tied to their uploads and map data. This setup ensures that when users return, their photos and data are securely stored and retrieved.
Users can customize the overall map theme and dynamically adjust the visibility of roads, landmarks, and labels. On the front-end, these options are intuitively handled using buttons and sliders, which are directly tied to styles in the Google Maps JavaScript API, so any changes made by users will update the map’s appearance in real time.
After users upload their photos, I pulled timestamp and GPS data from each image using the EXIFR library. The images were saved as an array of metadata-rich objects, then sorted chronologically with JavaScript’s native sort() method, which runs Timsort under the hood. Upon retrieval, images are placed on the map as pins, which are visually connected using the Maps API’s Polyline to render bezier curves that trace the user’s journey through time and space.
Clicking on a pin loads a popup with details associated with that pin, including the source image, visit date, address, and location details. Users can toggle these popups by clicking the pin again, and they can remove the pin entirely by hitting the trash icon, removing the corresponding image and its metadata from both the map as well as the user's Firestore records.
