Flip-a-Bite

Inspiration

We've all been there - staring at a list of restaurants or ingredients, unable to make a decision. Food choice paralysis is real, and sometimes you just need the universe to decide for you.

What it does

Flip-a-Bite is a simple decision-making app that randomly selects food options from your custom lists. Add your favorite restaurants, cuisines, or ingredients, hit the flip button, and let fate choose your next meal. It includes history tracking and saved food sets for different occasions.

How we built it

Built with React and TypeScript for a solid foundation, styled with Tailwind CSS for clean aesthetics, and powered by Zustand for state management. Used Framer Motion for smooth animations and IndexedDB for local data persistence. Vite handles the build process for fast development.

Challenges we ran into

Balancing simplicity with functionality was key - making the app intuitive without overwhelming users with options. Implementing smooth animations while maintaining performance, and ensuring data persistence works reliably across browser sessions.

Accomplishments that we're proud of

Created a genuinely useful tool that solves a common everyday problem. The app feels responsive and delightful to use, with thoughtful animations and a clean interface that works well on both desktop and mobile.

What we learned

Sometimes the best solutions are the simplest ones. Focused on core functionality over feature bloat, and learned that good UX often means making fewer decisions for the user, not more.

What's next for Flip-a-Bite

Potential features include sharing food sets with friends, integration with food delivery APIs, dietary restriction filters, and maybe a "surprise me" mode that suggests completely random cuisines from around the world.

Built With

• autoprefixer
• eslint
• framer-motion
• hot
• indexeddb
• javascript
• lucide-react
• postcss
• react
• tailwind-css
• typescript
• vite
• zustand