🛒 Kroger Budget Grocery Planner
Search, Plan & Budget Your Grocery Shopping
Project Showcase
📌 About This Project
This full-stack application demonstrates the power of integrating third-party APIs with a modern web application. It allows users to search for Kroger stores by location, browse products, and build personalized grocery lists with real-time cost estimates.
💡 Why I Built This Project
I wanted to challenge myself by learning something entirely new with APIs. My goal was to understand how to:
- Fetch and parse JSON data from third-party APIs like Kroger's Public API
- Clean and transform messy API responses into user-friendly data for the frontend
- Protect sensitive information using environment variables and .gitignore files
- Implement OAuth 2.0 authentication for secure API access
- Build a full-stack application with a backend server handling API requests
Key Learning: One of the most important lessons was understanding the critical importance of not uploading API keys to repositories. Using .env files and .gitignore is essential for security and protecting credentials from exposure.
✨ Features
- Search Kroger stores by ZIP code
- Select specific store locations
- Search products by keyword
- View detailed product information
- Add products to grocery list
- Calculate estimated grocery total
- Save grocery lists using localStorage
- Responsive design for all devices
🛠️ Tech Stack
📄 HTML
Semantic markup & page structure
🎨 CSS
Responsive styling & animations
⚡ JavaScript
Dynamic interactions & DOM manipulation
🔌 API
Kroger Public API & REST calls
🚀 Node.js
Server runtime environment
⚙️ Express
Backend web framework
🔐 OAuth 2.0
Secure authentication
☁️ Render
Cloud deployment platform
🔄 How It Works
- User enters a ZIP code
- Frontend calls the /locations route
- Backend gets a Kroger OAuth token
- Backend requests nearby Kroger stores
- User selects a store
- User searches for a product
- Frontend calls the /products-simple route
- Backend gets Kroger product data and cleans the response
- Frontend displays product cards
- User adds products and sees estimated total
📚 What I Learned
- Protecting API credentials using .env files
- Creating backend routes with Express
- How OAuth client credentials flow works
- Fetching data from third-party APIs
- Cleaning messy API JSON responses
- Using localStorage for persistent data storage
- Deploying full-stack Node/Express apps
- Best practices for API security
Ready to Try It Out?
Check out the live demo or explore the source code on GitHub