GoFindr

A nearby store is found! In this case 7-Eleven
GoFindr dynamically adjusts information and styling depending on the nearby business
Example of the dynamic styling of GoFindr (with placeholder images)
Creating a store in GoFindr
Image of the GoFindr account page

Inspiration

Both being recent graduates out of high school, we felt a sudden urge for trying new things and exploring places around us. Having a passion for software engineering and discovering new things, we decided to hack up our project GoFindr.

This idea came to us as a recent project we developed involved the Google Maps Platform API, enabling us to implement geofencing effectively in this project.

With our eyes set out on improving the interactivity of consumers, enabling sellers to more easily attract traffic, and our skills in geofencing, we modelled what we believed to be a service that greatly improves the general buyer and seller experiences.

What it does

Ever wonder what restaurants are near you to quickly grab a bite or find unique shops hidden amongst the big chains? GoFindr is the solution!

It is a progressive web application that enables consumers to discover shops around them and sellers to put themselves on “the map”. GoFindr will notify users when they enter a geofence, a set area around a shop, and allow the user to view the shop and all its items.

This app is perfect for window shoppers and local buyers alike. For sellers, it’s a different story. Often, local shops have a difficult time getting themselves known or discovered. Because of the way GoFindr is structured in that shops are only filtered based on distance rather than popularity, it provides smaller businesses with a chance to be seen. Using the Square API, the app further assists businesses by displaying their most appealing items to entice customers. That’s our GoFindr vision ;)

How we built it

GoFindr was built mostly using Next.js with Typescript for both the frontend as well as backend and designed using Figma.

For data storage we implemented the popular duo of Prisma and MySQL. The database we set up holds account data, shop styling/theming, and much more.

As mentioned previously, we implemented Square OAuth into our account system and used the Catalog API to manage items displayed to users. In addition, we learned and integrated various other APIs such as the Google Maps Platform API to manage geofencing and location displaying and the AWS SDK for storing images in our database.

Finally, this whole infrastructure was hosted from scratch using Nginx and DigitalOcean’s cloud services.

Challenges we ran into

As far as challenges go, our biggest was linking all the Square functionality with our infrastructure and database. In other words, the largest obstacle was merging the Square API with our existing APIs to create a seamless user experience.

Another difficulty we found was hosting and setting up a database. Having to learn all about MySQL and Prisma (an ORM for Node.js) in addition to creating it soaked up a lot of the development time that could have been spent elsewhere.

Finally, a very specific problem we encountered was image storage. How do upload images fast without bloating up a database in the process? We discovered the solution was to implement a S3 bucket hosted on DigitalOcean and store the URL to the resources in our MySQL database. We were very joyous after designing this system as the result was a blazing fast uploading structure. Sometimes the smallest of wins mean the most.

Accomplishments that we're proud of

We are proud of developing and hosting a full stack application including a database ourselves without using any services to “do it for us” (such as BaaS). We believed designing as much as we can from scratch helped us learn much more than we would have using prebuilt services.

Additionally, successfully integrating the Square API into our GoFindr ecosystem was probably our proudest moment. It initially felt impossible trying to link up what seemed like more individual APIs and services together than we could count on our fingers. Although the future looked gray, we stayed patient and eventually linked everything together one-by-one.

Our biggest accomplishment, though, is probably when the explorer page of our site updated for the first time after creating our geofences. The weeks of work and testing gave us a decent confidence, but seeing all the little parts come together to create a functional comopnent really made our days.

What we learned

Taking a deep-dive into fullstack web development and a little bit of systems design, we learned a load of useful technologies and design patterns that we can’t wait to use for future projects. For instance, we took an in-depth look into MySQL and the object relational mapping technology called “Prisma”. We learned how to structure data in a relational database and how to fetch it using typescript.

As mentioned previously, we encountered and used many miscellaneous APIs that helped GoFindr become what it is now. We learned how to use the Square API for managing seller data and improved our skills in creating and displaying location data using Google Maps Platform.

Being a fullstack application, we learned how to create custom API routes, how to manage state in our application, and design UI for both large and small screens alike. We used Next.js for our application but also converted it into a progressive web app using the library next-pwa. This means mobile users can install the website right to their home page where it acts very similarly to a native app found on app stores.

Finally, we gained invaluable experience hosting and deploying application to the web. We self-hosted the database and progressive web app to the cloud using DigitalOcean as our cloud provider. We dealt and learned how to manage DNS, use Nginx and Varnish Cache to optimize performance, and acquire all sorts of networking design principles. The feeling of our website finally working properly and being publicly accessible truly made the whole journey worthwhile.

What's next for GoFindr

As mentioned in our video, GoFindr has huge upside in terms of potential business expansion through advertisement and brand deals. Our first goal would be to expand GoFindr to become a regularly used app among square sellers and customers, followed by an effort to create non-intrusive advertisement geofences and brand deals with major corporations (e.g. app-exclusive items/deals) to promote the success of GoFindr.