SpotME.tech

logo

Inspiration

When brainstorming ideas for HackNC 2024, we tried to come up with the most unique and impactful projects. Bouncing between ideas, we landed on a money transfer app, but we struggling to find ways this app could be unique among many other similar money management apps. This lead to us thinking of unique methods of signing in, with facial recognition standing out among these. With the limited time of the hackathon, complexity of the project, and our lack of experience with image recognition software, we decided to develop a standalone app incorporating facial recognition. And with that, SpotME was born.

What it does

Have you ever come home from a party only to realize you forgot to get that person's phone number? Trying to figure out who is in those pictures you took? Well, we have the solution! Spot: Matching Engine is a powerful tool that allows you to upload a picture of yourself to a database, along with any information you would like to share, ranging from social, to contact information.

With the tool, all information is completly optional to opt into providing. By uploading your information, you allow people to contact you after having met you. Additioanally, you can use it to talk to people you haven't gotten the contact information of yet. The public access database is a great solution to never losing someone that you met-- as long as your have a photo!

Want to see for yourself? Check out spotme.tech! Note that due to restrictions of our fly.io backend deployment, this version is slower and more unreliable than a development build (instructions for this in our GitHub repository README).

How we built it

SpotME was built using Node.js with JavaScript in a full-stack application. The client side of the app is built with React.js, which allowed us to have better control over reactive state management. We also used tailwindcss to help organize css and framer-motion to help make smooth animations for a better User Experience. On the server side, we used a Node.js server with express.js to serve an API which helps to interface with the app's persistent storage for user data. We used Sqlite for most data storage with SQL queries and JSON storage for more complex detection files. Our facial recognition software was built with the help of the face-api.js library, built entirely server side. Finally, we were able to utilize the domain name provided by Free.Tech & MLH to host our application on a custom domain (spotme.tech)!

At some points in the project we did use AI to supplement our coding. ChatGPT & Claude were used to help us learn unfamiliar concepts quicker and debug through tough obstacles. With the exception of the animation on our Spot avatar (to help quickly create a cleaner svg), all code was written during this hackathon ourselves.

Challenges we ran into

One of the biggest challenges we ran into was the deployment process. We tried to set this up early on and had issues with connecting all the pieces of our application together.

Another large challenge that we were faced with was learning how to use a facial recognition library within the span of this hackathon. There were many errors that we made when attempting this, such as management of asynchronous functions in JavaScript.

Accomplishments that we're proud of

Perhaps the largest challenge was reducing the time to search for other people in the application. Our initial algorithm consisted of inefficiently running facial detection algorithms for each image it came across when trying to make a match. We were able to significantly reduce this time by caching files on our server when each new image is uploaded.

Another big accomplishment of this project was the amount of polish we were able to put in while still focusing on making sure core features worked well. The UI of our application turned out well and works fluidly with the server-side of our application.

What we learned

As mentioned earlier, this project reinforced the idea of getting development done before worrying about deployment. While we were able to get deployment working in the end (with some drawbacks on performance & reliability), we learned to know when to focus on the main parts of the app early on.

In terms of technical skills, this project helped us both learn a lot more about tools in the many frameworks and libraries we used, listed below. In particular, we learned a lot about facial recognition, how to build a backend server with an API and database, a better understanding of the syntax of tailwindcss.

What's next for SpotME.tech

If we are to continue development on this application, there are still many things we would add. Some of these include a user login feature with better user verification, faster image recognition algorithms, and improving our deployed production product.