Xpire

See what food you have in your kitchen and when it expires, and cook dishes for points and to reduce food waste!

Comment 1

Inspiration

Are you tired of throwing away old, moldy food? Money going down the drain because you buy too many groceries? Don't you wish there was a way for you to remember whats in your fridge? Well, let us introduce you to Xpire!

Xpire is the premiere kitchen memo web-app. We were tired of feeling guilty throwing away food and feeling stressed trying to remember. Now we've built this app to help you save money and live guilt-free!

What it does

Xpire includes amazing features like:

  • an interactive dashboard that notifies you when items have expired
  • a fun leaderboard to encourage you to cook and use up your ingredients to beat other people on the platform
  • a summary of your lifetime ingredients used, dishes cooked, and expired ingredients/ingredients thrown away

How we built it

Frontend:

  • Vite + React.js + TypeScript, React-Router-Dom
  • React Bootstrap, Font Awesome Icons
  • Axios

Our frontend was built on Vite, React.js, and TypeScript. We stylized Xpire using a combination of react-bootstrap components and our own custom styling.

The frontend team mainly consisted of Bryant, Tanner, Thao, and a little bit of Dylan.

Backend:

  • Node.js + TypeScript + Express for the API routes
  • Google Firestore as a database
  • JSON Web Tokens (JWT) for authentication
  • bcrypt for password salting and hashing

The backend was built in Node.js, TypeScript, and Google Firestore as our database. Dylan was the one who built almost all of the backend. Additionally, we have a working email and password system with password hashing and encryption using bcrypt. Once the user is logged in, they are given a JSON Web Token that authorizes them access to the rest of the API.

Here is the sign up flow:

  1. Input information
  2. Send information to Express.js backend
  3. View auth collection in Firestore to see if the user id (email) already exists
  4. If it does not, the password is hashed and saved.

Login Flow:

  1. Input information
  2. Send information to backend
  3. Check if user exists
  4. Compare inputted password to hashed password
  5. If match, sign a JWT and return it

Challenges we ran into

The majority of our team were beginners to React.js. It was also Thao's first hackathon!

For Tanner and Thao, it was their first time working in JavaScript and React. Many React.js tutorials were read and watched...

Dylan was the only one who was comfortable doing the backend, so he had to work as fast as he could while supporting the others, which was a challenge.

We also encountered many issues with setting up development environments.

Delegating tasks and deciding what features we needed to prioritize over the others was a challenge.

Accomplishments that we're proud of

We are proud of everything. We got further on this idea than we originally thought coming in, and we're happy that the project turned out as well as it looks and that it actually works!

What we learned

The last thoughts from Bryant as he fell asleep at ~4 AM:

  • "working with dylan as the leader is fun and stress free"
  • "we can just sleep on the floor instead of motel"

Dylan takes over: In actuality though, I'm hoping everyone came out of this knowing more than what they started. I personally learned how challenging it is to nicely organize your code. While I have experience writing API routes and doing CRUD operations in the database, I found it difficult to structure my code in a nice way as well as writing the best documentation I could to enable the frontend to seamlessly call my API. It was one of the more important lessons I learned and one that I'll need to figure out soon!

I know for Tanner and Thao, it was their first time working with a lot of these things that they encountered. They did excellent work!

What's next for Xpire

UPDATES! make it into a mobile app, incorporate AI to make inputting less manual. More stats features so you can know your habits. more personalization options. Adding a way to generate recipes based on what's in your kitchen. Also, the more standard account features like password reset, email verification, and rendering the dishes created in the frontend (the information is stored in the backend).

Built With

Share this project:

Updates