A fully-responsive webapp (SPA/WPA) to solve the problem of forgetting what you need to buy from the grocery store. Try it out for free on the link below!
A robust React JS project centered around an installable fully responsive dynamic web page application PWA designed for keeping and managing your (shopping) list. This application is optimized and offers a seamless experience with support for three languages, two color themes, auto-save, dynamic backgrounds, and optional sound features. It includes an array of functionalities such as the ability to: create, view, update, delete, undo, filter, clear, check/uncheck, and default list items.
- HTML5, CSS3, JavaScript/ECMA Script 6/ES7/ES2022
- React JS
- Tailwind CSS
- React Icons
- SASS
(Grocery) Shopping List - 2023
🚀 A (Grocery) Shopping List Progressive Web Application with a touch of creativity! 🎨📱
Where the user can create, view, update, delete, clear, default, filter, check/uncheck list items.
Other functionalities also include undoing actions, changing languages, and toggling sound or color themes.
🌐 Key Features:
Three languages (English, German, Arabic - LTR/RTL)
Two brightness/color themes,
Auto-save, undo, default, and clear functionalities for an efficient user experience
Best practices, SEO optimizations, and Accessibility features for a good user experience
Info modal and sound options
Installable and works in offline mode
💻 Tech Stack:
React.js for a responsive and dynamic UI
Tailwind CSS for sleek styling
SASS for custom styling
Leveraged useReducer and useContext for efficient state management
Custom hooks like useLocalStorage for data persistence
Workbox for advanced service worker functionalities
Additional dev tools like the Babel for efficient development
🎨 Aesthetic Touch:
An info widget that summarizes your progress
AI-made decoration images optimized into WebP format for efficient loading
A new inspiring random quote on every new load
Clean organized code and reusable components for maintainability
A sleek and fully responsive interface
Smooth animations and user interactions
🔊 Sound Features:
Optional sound effects for different interactions
🌍 Multilingual Support:
Three language settings, including RTL languages
UI updates dynamically based on language preferences
I'm proud of the progress made in this project and the skills honed in React.js web development.
Feel free to check out the app and let me know your thoughts! 💻🛒
Skills: Software Systems Engineering · Front-end Coding · Adaptive Design · Responsive Web Design · Application Frameworks
· Data Structures · JavaScript Frameworks · SASS · HTML5 · Cascading Style Sheets (CSS) · Tailwind CSS
· npm · Git · Visual Studio · React.js · Web Applications · JavaScript · Programming · Node.js · Software Development ·
Front-End Development · Web Development . Project Management
A fully-responsive Progressive Web App (PWA) built with React that helps you never forget what you need to buy at the grocery store. This feature-rich application provides a seamless shopping list management experience with multilingual support, theme customization, and offline functionality.
- 🚀 Immediate Access: No sign-up required
- 📱 Installable: Add to your home screen as a native-like app
- 🌐 Offline Support: Works without internet connection
- Create & Manage Items: Add, edit, and remove grocery items
- Check/Uncheck System: Track purchased items with visual indicators
- Filter Views: Show all, active, or completed items
- Bulk Actions: Clear all or restore default lists
- Undo Function: Recover accidentally deleted items
- Auto-save: Changes saved automatically in real-time
- Three Languages: English, German, and Arabic
- RTL/LTR Compatibility: Full support for right-to-left (Arabic) and left-to-right languages
- Dynamic UI Translation: Entire interface adapts to selected language
- Dual Color Themes: Light and dark mode for comfortable viewing
- Dynamic Backgrounds: Visually appealing interface with WebP-optimized images
- Customizable Sound: Toggle sound effects for interactions
- Inspirational Quotes: New random quote on each app load
- Progressive Web App: Installable on devices with native-like experience
- Offline Functionality: Access and modify lists without internet
- SEO Optimized: Improved discoverability and performance
- Accessibility Features: Designed for inclusive user experience
- Progress Widget: Visual summary of shopping list completion
| Category | Technologies |
|---|---|
| Frontend Framework | React.js 18+ |
| Styling | Tailwind CSS, SASS |
| State Management | React Hooks (useReducer, useContext) |
| Icons | React Icons |
| PWA Support | Workbox, Service Workers |
| Build Tools | Babel, npm |
| Languages | JavaScript (ES6+/ES2022), HTML5, CSS3 |
- Node.js
- npm
-
Clone the repository
git clone https://github.com/Rami24t/Grocery-Shopping-List-Tracker.git cd Grocery-Shopping-List-Tracker/client -
Install dependencies
npm install
-
Start the development server
npm start
-
Build for production
npm run build
- 🔧 Custom Hooks: Includes
useLocalStoragefor data persistence - ♿ Accessibility: ARIA labels and keyboard navigation support
- 📱 Responsive Design: Mobile-first approach with breakpoint optimization
- 🎨 Component Library: Reusable, maintainable UI components
- Context API: Global state management for themes and language preferences
- useReducer: Complex state logic for shopping list operations
- Local Storage: Persistent data storage across browser sessions
- Code Splitting: Dynamic imports for faster loading
- Image Optimization: WebP format with appropriate fallbacks
- Service Workers: Caching strategies for offline availability
- Lazy Loading: On-demand resource loading
- Modular Architecture: Separation of concerns and reusable components
- Clean Code Practices: Consistent formatting and meaningful naming
- Error Handling: Graceful degradation and user-friendly error messages
This isn't just another todo-list application. It demonstrates:
- Production-Ready PWA: Full offline capability and installable experience
- Internationalization: Comprehensive RTL/LTR language support
- User Experience Focus: Thoughtful features like undo, auto-save, and progress tracking
- Modern React Patterns: Custom hooks, context, and reducer implementations
- Performance Conscious: Optimized loading and smooth interactions
Through developing this project, I've strengthened skills in:
- Progressive Web App development and service worker implementation
- Internationalization and localization strategies
- Responsive design with Tailwind CSS utility-first approach
- React state management patterns and custom hooks
- Accessibility standards and inclusive design principles
- Build optimization and deployment strategies
While this is primarily a showcase project, suggestions and improvements are welcome:
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit changes (
git commit -am 'Add new feature') - Push to branch (
git push origin feature/improvement) - Open a Pull Request
This project is available for review and educational purposes. Please credit the original author if repurposing code.
Feel free to explore the code, try the live application, and share your thoughts! The app demonstrates practical implementation of modern web development concepts in a useful, everyday application.
Built with ❤️ using React, Tailwind CSS, and modern web technologies
Last Updated: 2026