ShelfLife

ShelfLife is a mobile app that tracks medication and its expiry dates with notes for all family/ staff members, so as they never have to miss another expiry date again.

Comment

💊 ShelfLife

A smarter way to manage pharmaceuticals/lab/hospital or at home medicines

ShelfLife is a full-stack medicine-management platform designed to help medical professionals/pharmacies/family keep track of the medicines, expiry dates, and potential medication combinations — all in one place.

✨ Inspiration

Medicine cabinets are full of products that people forget about.

A medicine can expire, get forgotten at the back of a cabinet, or be taken alongside another medicine without the user realizing there may be an interaction. We wanted to build something that made managing medicines simple, visual, and proactive, rather than forcing people to manually keep track of everything.

That idea became ShelfLife: a digital medicine companion designed to help people know what they have, what is expiring, and what they should pay attention to.

Instead of treating a medicine cabinet as a collection of boxes, ShelfLife treats it as something that can actually be managed intelligently.

🚀 What it does

ShelfLife provides a centralized place to manage and keep track of medicines.

💊 Medicine Management

  • Add and organize medicines in a personal collection
  • View detailed information about individual medicines
  • Keep an overview of everything in your medicine cabinet

📅 Expiry Tracking

  • Track medicine expiry dates
  • Identify medicines approaching expiration
  • Reduce the chance of forgotten medicines sitting unused

⚠️ Combination & Safety Checks

  • Check potential medicine combinations and interactions
  • Surface information users should pay attention to before combining medicines

🔐 Secure Access

  • Personal user accounts
  • Google OAuth authentication
  • Persistent, user-specific medicine data

The goal is simple: make it harder to forget what is sitting in your medicine cabinet.

🛠️ How we built it

ShelfLife was built as a modern full-stack web application.

Frontend

Technology Purpose
⚛️ React User interface
🧭 TanStack Start / Router Full-stack routing and application architecture
⚡ Vite Development and production build tooling
🎨 Tailwind CSS Styling and responsive UI
🧩 Radix / shadcn components Accessible UI components
✨ Lucide Interface icons

Backend & Data

  • Supabase — authentication and database functionality
  • Google OAuth — secure sign-in
  • TanStack Start + Nitro — server-side functionality and production deployment

Deployment & Development

  • Vercel — production hosting
  • GitHub — version control

We designed the application around a component-based architecture so that features such as medicines, profiles, authentication, and medicine combinations could remain modular and maintainable.

🧩 Challenges we ran into

One of our biggest challenges was getting the application from a working local development environment to a working production deployment.

ShelfLife uses TanStack Start with server-side rendering, which meant that deploying it was more complicated than simply uploading a static Vite application. We initially encountered persistent Vercel 404 NOT_FOUND errors even though the application built successfully locally.

We had to investigate the difference between the client and server build outputs, understand how TanStack Start uses Nitro for deployment, and correctly configure the production environment.

Authentication presented another challenge. Google OAuth worked locally, but after deploying, the authentication flow initially redirected users back to localhost instead of the production application.

We had to trace the entire OAuth flow across our application, Supabase, Google Cloud, and Vercel before correcting the production redirect configuration.

These problems were frustrating, but they forced us to understand how the pieces of a full-stack application actually communicate, rather than treating deployment as a black box.

🏆 Accomplishments we're proud of

We're particularly proud that we turned ShelfLife from an idea into a fully deployed, functioning application.

What we accomplished

  • 💊 Built a complete medicine-management experience
  • 🔐 Implemented authentication and Google OAuth
  • 🗄️ Connected the application to persistent backend data
  • ⚠️ Created medicine combination/interaction functionality
  • 🚀 Successfully deployed a TanStack Start application with SSR
  • 🐛 Debugged production-only deployment and authentication issues
  • 📱 Built a polished, responsive interface rather than stopping at a prototype

Most importantly, we didn't give up when our local application worked but the production deployment didn't.

We kept investigating until we had a live application that users could actually access.

🧠 What we learned

This project taught us that building an application isn't just about writing code.

We learned how different layers of a modern web application interact:

Frontend
   ↓
Router
   ↓
Server
   ↓
Database
   ↓
Authentication
   ↓
OAuth
   ↓
Deployment

We also learned how dramatically production can differ from localhost.

A successful:

npm run build

doesn't necessarily mean that an application is correctly configured for its hosting environment.

Working through our deployment and OAuth problems gave us practical experience debugging issues involving Vercel, TanStack Start, Nitro, Supabase, Google OAuth, environment variables, and Git.

Most importantly, we learned to debug systematically instead of immediately rebuilding everything when something goes wrong.

🔮 What's next for ShelfLife?

ShelfLife is only the beginning.

Our next goal is to make the platform significantly more intelligent and useful.

🤖 Intelligence

  • AI-assisted medicine information and explanations
  • Smarter personalized expiry and refill reminders
  • More sophisticated interaction and safety checks

📸 Automation

  • Scan medicine packaging to automatically add medicines
  • OCR-based extraction of medicine names and expiry dates
  • Reduce manual data entry

👨‍👩‍👧‍👦 Collaboration

  • Household/shared medicine cabinets
  • Shared reminders and inventory management

📊 Insights

  • Medicine usage and inventory analytics
  • Smarter recommendations based on a user's collection
  • More comprehensive medicine databases

📱 Beyond the Web

  • Dedicated mobile experience
  • Notifications and reminders that follow users beyond the browser

Ultimately, we want ShelfLife to evolve from a medicine inventory tracker into an intelligent personal medication-management platform.

### 💚 ShelfLife **Know what you have. Know what matters.**

Built With

Share this project:

Updates

Submission history