SnapRec

Motivation

SnapRec became a passion project as soon as we thought of the idea. Our team has all struggled with this common, frustrating reality that personal care is hard to shop for. We wanted to create an app that can be an easily used application to provide the best personal care for you, even just from a photo.

What it does

It is very simple! Pull out your phone, open the website, make your user profile, and use your phone camera to take a photo of the store shelf. Once that happens, our AI will scan and analyze the image for the best product specifically for YOUR needs! Once you finish, just go back and take a photo of another part or section of the store shelf.

How we built it

Before beginning coding, we planned out the general design on Figma with a wireframe which we later turned into a complete mockup for our final user interface. We build our front-end application using the React Framework, applying Tailwind CSS and the DaisyUI Component Library to match our final mockup. We used several React libraries, such as React Router for Pagination and Tanstack Query for making API Calls to our back-end. Written in Python, our back-end was set up using Fast API and makes Google Gemini API calls using the 2.5 Flash model with Google Search grounding for generating product recommendations based on given parameters and the image of the store aisle. For final deployment, we used Vercel to host our front-end and Render to host our back-end.

Attribution

Following proper licensing, we used these third-party assets in our application:

Remix Icons (under Apache License)
Loading Animation from Lottiefiles (under Lottie Simple License)
SVG Animation Background by Álvaro (https://codepen.io/alvarotrigo/pen/qBMMyxz)

Challenges we ran into

We ran into challenges like CORS and making sure that the formatting of the image is in a certain format. Our user inputs their preferences, which sends a JSON. However, Gemini can be finicky with its output formatting, thus causing a "CORS" error. Additionally, the photo analysis + user preference can be taxing on the Gemini API, making it slower than anticipated. We will work hard to improve these sinkholes and acknowledge these challenges.

Accomplishments that we're proud of

We are proud of having a fully-fledged application, start to finish. The UI is extremely clean, and the backend is synonymous. We are also proud of learning so much about full-stack development, learning how to deploy, and creating a product that others would use.

What we learned

We learned, more specifically, a lot about React and its behaviors, and how backend/frontend are connected. We also learned the principles of UI/UX throughout this adventure, taking careful consideration of where buttons, icons, and text are positioned.

What's next for SnapRec

Expanding! Taking not just Shampoo, but expanding to conditioner, skin care, and dental care. That was a major goal we want to hit with SnapRec, so that no matter what your personal care needs are covered, in any aisle. Additionally, adding more error-handling to the application to enhance the user experience. UI/UX is something we realized takes careful consideration, and with more time, we could make SnapRec a truly fast, clean experience. Finally, we want to make our AI the best it can be, with regard to speed, security, and insurance. Making SnapRec a universal experience for all is what we want to accomplish.