DevSnack is a web app that helps users quickly find meal or snack ideas using ingredients they already have.
It’s built with React, TailwindCSS, and Vite, following professional workflows from design → development → testing → deployment.
This project is part of my portfolio to demonstrate:
- API integration & search/filter UX
- State management & persistence (favorites)
- Responsive + accessible UI design
- Professional Git/GitHub workflows
- 🔍 Search & Filter Recipes by name or ingredient
- 📖 Recipe Details (ingredients, steps, image)
- ⭐ Favorites page (persistent with localStorage)
- ⚡ Responsive & Fast (Lighthouse ≥ 90)
- ♿ Accessible (keyboard nav, contrast, ARIA basics)
- 🚨 Clear loading, empty, and error states
- React + Vite
- Tailwind CSS
- React Router
- LocalStorage for persistence
- Deployed on Vercel or Netlify
🚧 In Progress — Day 1 (Design Phase)
- Requirements gathered
- Wireframes in Figma (
/design) - Development setup (Day 2)
- Core features (Day 3–5)
- QA + Deployment (Day 6–7)
devsnack/ ├── public/ # Static assets ├── src/ │ ├── components/ # Reusable UI components │ ├── pages/ # Page-level components │ ├── hooks/ # Custom React hooks │ ├── lib/ # Utilities/helpers │ ├── assets/ # Images/icons │ └── types/ # TypeScript types (from Project 2 onward) ├── docs/ # Docs, screenshots, diagrams ├── design/ # Wireframes & style guide exports └── README.md
yaml Copy code
- Functional: search, detail, favorites working
- Non-functional: responsive, accessible, performant
- Lighthouse ≥ 90 on mobile
- Deployed live (Vercel/Netlify)
- README with screenshots + Loom walkthrough
- Tagged release
v1.0.0
MIT License