A full-stack shopping list application built with vanilla JavaScript and Firebase, featuring real-time data synchronization, user authentication, and comprehensive CRUD operations.
- ✅ Live Search: Real-time filtering as you type, case-insensitive match against item names
- ✅ Combined Filters: Search and category filter work simultaneously
- ✅ Clear Button: X appears when search has text, resets list on click
- ✅ No Results Message: Appears when nothing matches, disappears when results exist
- ✅ Category Filter System: Filter your shopping list by category using dynamic filter buttons. Select any category to narrow the list, or hit "All" to return to the full view.
- ✅ Complete Edit Functionality: Users can now edit items inline with full Edit/Save/Cancel workflow
- Dynamic State Management: Edit mode tracked via
data-edit-modeattribute - Improved UX: Delete button hidden during edit mode to prevent accidental deletions
- Timestamp Updates: Edited items now update timestamps in the database
- Google Sign-In Branding: Updated to meet Google's official branding guidelines
- Fixed cancel button event listener scope issues
- Resolved UI state inconsistencies when canceling edits without changes
- Corrected double-click requirement bug in cancel functionality
-
Clone the repository
git clone https://github.com/ryanbcommits/shopping-list-app.git cd shopping-list-app -
Install dependencies
npm install
-
Set up environment variables
cp .env.example .env
-
Run Development server
npx vite
Then open your browser to the localhost URL that Vite provides (usually http://localhost:5173).
The app is deployed at: https://app.ryanbcommits.com
Current Status: Production-Ready (v1.2.0)
- ✅ HTTPS/SSL certificate active
- ✅ Full CRUD operations implemented
- ✅ Mobile compatibility tested
- ✅ Environment variables secured
- User Authentication: Email/Password and Google Sign-In
- Real-time Sync: Shopping list items sync across devices via Firestore
- Full CRUD Operations:
- Create new items
- Read/display items
- Update/edit existing items
- Category filtering by item type (NEW in v1.2.0!)
- Delete items (soft delete)
- Security Features:
- Session timeout after 15 minutes of inactivity
- Rate limiting to prevent spam
- XSS protection via textContent sanitization
- Password validation with complexity requirements
- Inline Editing: Click Edit to modify items without leaving the list
- Visual Feedback: Loading states, error messages, and success indicators
- Keyboard Support: Enter key to add items
- Responsive Design: Works on desktop and mobile devices
- Data Persistence: All data saved to cloud, survives logout/login
- Live Search: Real-time filtering as you type with clear button
- Smart Filtering: Search and category filters work simultaneously
- Frontend: Vanilla JavaScript, HTML5, CSS3
- Backend: Firebase (Authentication & Firestore)
- Build Tool: Vite
- Deployment: Netlify
- Dual Filter State:
currentFilterandcurrentSearchboth feed the same filter stage simultaneously without interfering - Event-driven rendering:
loadUserData()is called on every keystroke — no manual loop needed
- Collect → Filter → Display Pipeline: Refactored data loading into three
stages — non-hidden items are collected into an
allItems[]array, filtered againstcurrentFilterusingArray.filter(), then rendered to the DOM - Module-level State:
currentFilterlives outside all functions so both the button listeners andloadUserData()can read and update it
- State Management: Single source of truth using
data-edit-modeattribute - Event Listener Scope: Importance of defining listeners at component creation level
- UI State Coordination: Managing visibility of multiple elements based on editing state
- Database Updates: Using
updateDoc()for partial updates with timestamp refresh
- Event listeners and DOM manipulation
- Async/await with Firebase operations
- Function scope and hoisting
- Element visibility control
- Attribute manipulation for state tracking
- Authentication flow (Email/Password + OAuth)
- Firestore CRUD operations
- User-specific data organization
- Soft delete patterns for data recovery
- Real-time search with case-insensitive matching
- Combined search + category filter working simultaneously
- Clear search button
- No results message
- Category filter system with dynamic buttons and active state
- Categories/tags for items
- User authentication system
- Add items functionality
- Delete items (soft delete)
- Data persistence
- Rate limiting & security
- Edit/Update items with full Save/Cancel workflow
- Google Sign-In integration
- Production deployment with HTTPS
- Input validation for special characters
- Enhanced mobile UI
- Drag-and-drop reordering
- Shopping list sharing
- Quantity tracking
- Purchase history
- Offline mode support
- Progressive Web App (PWA) functionality
- Minor typo in code comments
- Firestore Security Rules need production hardening
- Special character validation pending implementation
- alert modal creates timeout error.
- blank category can be submitted to list
This project uses Claude AI as a learning assistant, not as a code generator. My approach:
Method: Code-first development with AI assistance only when stuck on specific problems.
How I Use AI:
- As a tutor for complex concepts
- To debug error messages
- To learn best practices
- To understand API differences
What's My Own Work:
- All initial code attempts
- Project architecture decisions
- Problem-solving approaches
- Feature implementation
- Firebase documentation for excellent guides
- Claude AI for patient tutoring during roadblocks
- The JavaScript community for invaluable resources
Ryan Burns - GitHub
Last Updated: May 2026 | Version: 1.3.0