Grocery Helper
A full-stack recipe and grocery list manager with Google authentication.
Project Goal
The goal of this project was to create a personal productivity tool for managing recipes and grocery shopping. The focus was on integrating recipe creation with grocery list management, providing a smooth and flexible user experience while ensuring secure, user-specific data storage.
Key Features
- Google OAuth authentication with NextAuth.js
- Create, edit, and delete recipes
- Manage grocery lists manually or via recipes
- Check/uncheck items while shopping
- Seamless recipe-to-grocery list integration
- Prevents duplicate items in grocery lists
- Responsive design for mobile and desktop
UI Architecture
- Built using a component-based architecture with reusable React components
- Separated UI concerns into components such as form handling, ingredient lists, and list items
- Implemented state-driven UI logic to manage dynamic interactions and user input
- Designed reusable patterns for handling forms, lists, and user interactions consistently across the app
- Focused on building reusable UI patterns rather than isolated features, aligning with design system principles
Snapshots
Recipe card allowing users to upload images, link to the recipe, list ingredients, and generate a shopping list directly from the recipe.
Grocery list interface where users can edit the list title, add or remove items, and automatically combine quantities for duplicate items with the same unit.
Role & Learning
I built the project as a full-stack application using Next.js with server-side API routes and MongoDB for storage. I implemented Google authentication with NextAuth.js and focused on creating a seamless integration between recipes and grocery lists. This project strengthened my skills in building component-based UI, managing complex state, and designing consistent interaction patterns across the application.