EXIF Mapper
EXIF Mapper is a web application that chronologically charts physical journeys on Google Maps using metadata from uploaded images. Multiple images can be uploaded to the platform, and images with metadata (like those taken from an Android or iPhone) are saved as pins on an interactive map in each user's account.
EXIF Mapper
EXIF Mapper is a web application that chronologically charts physical journeys on Google Maps using metadata from uploaded images. Multiple images can be uploaded to the platform, and images with metadata (like those taken from an Android or iPhone) are saved as pins on an interactive map in each user's account.
Timeline
2 months (Sep 2023 - Oct 2023)
Timeline
1 month
(Oct 2022 - Nov 2022)
Code / Frameworks
JavaScript, ReactJS, HTML/CSS
Tools
Firebase (Database, Auth, Cloud Firestore), Google Maps API
Timeline
1 month
(Oct 2022 - Nov 2022)
Code / Frameworks
JavaScript, ReactJS, HTML/CSS
Tools
Firebase (Database, Auth, Cloud Firestore), Google Maps API
My purpose for creating EXIF Mapper was to learn how to create simple, dynamic, interactive applications – and creating a web app seemed like the most accessible way to do this. I also wanted to get involved with some degree of back-end development, which I wasn't familiar with at the time. After brainstorming several potential apps, EXIF Mapper was perfect for my personal goals, and looked like something I wouldn't get bored of making.
Thanks to the guidance from my
very smart friend, I discovered some useful tools that could help me deploy the app that I envisioned. From there, I read up on what I needed to learn to build a proper front-end, and also explored some tools that could help me fulfill tasks like authentication, file storage, and data retrieval.
At the time, I didn't know what my friend was talking about – running servers, using APIs, AWS S3? I barely knew what a library was, but I got some really helpful pointers on where to start.
For the front-end, I started learning a bit of JavaScript with the eventual goal of learning to build a React app (even though I wasn't sure yet why React would be useful.) For back-end tasks, I decided to use Firebase for its robust documentation and ease of setup.
Before getting to the action, I had a lot of learning to do. My action items were to:
- Read the full React documentation, which is supposedly good according to some random guy on Stack Overflow 7 years ago
- Learn how REST APIs work and how I can use them
- Get to know the Firebase and Maps APIs
- Learn how to extract metadata from media files
- Figure out how to structure, retrieve, and store relevant data
- Learn React, starting with making stupid stuff like a counter. Then, a to-do list I'll never use
- Eventually, build the project
Previously, I learned programming from online lectures and tutorials, and didn't anticipate how much I could get out of reading documentation. At first, I spent a ton of time learning very slowly from various content creators on YouTube, but everything clicked for me as soon as I read the React documentation in full. Google Maps and Firebase docs were also very easy to digest; it was only when I started exploring third-party libraries that I had issues understanding poorly-documented dev tools. Nevertheless, I kept reading and building progressively more useful things using React.
Eventually, I scrapped together a basic login and application UI, and outlined how EXIF Mapper would create, store, and get data (specifically uploaded images and stored locations.) 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.
Using Cloud Firestore, I stored users as collections, which contain sub-collections for markers (location pins) and images. Each marker contains a reference to the collection of images associated with its location. I stored hashed images in Firestore to handle checks for duplicate images, since images in Firebase storage can't be queried like a database.
After linking the data access layer with the React interface, the app needed to sort and traverse marker & image collections through Firebase in order to visually connect location pins in chronological order. Once I implemented this, I made it possible for users to delete existing images and markers. Then, I used Firebase Authentication so allow signups through email, and modified the back-end to attribute images and markers to their uploading user – meaning that maps become permanently stored on users' accounts. Finally, all I needed to do was to clean up the remaining bugs and make the app look pretty. Upload a batch of your old photos and enjoy!
This project really helped me cement my fundamentals in JavaScript and React, and I really got a feel for the basics of full stack web development.
I learned how to integrate and manage various APIs and third-party software packages, and I gained valuable experience in separating signal from the noise when learning to use new software. Additionally, I revisited learnings from previous personal projects like data structures, sorting algorithms, and design thinking.
There were also some remaining issues with EXIF Mapper I could have improved:
- How should I display multiple markers positioned tightly together, with both short and long durations between visits?
- How should videos be displayed, if at all?
- How should very large files be processed and stored?
- How can I allow users to add or modify location data for an uploaded image?
- How can I shorten the time between uploading files and displaying markers?
I left these questions unanswered because for the most part, I had already learned what I needed from the project. Building EXIF Mapper helped me learn very quickly because it was just barely outside of my reach, and now that I had it in the palm of my hand, it was time to move on to a project with more complexity.
%2010.svg){kind=icon}
%209.svg){kind=icon}
