Overview
Add To Cart is a mobile-first shopping list application designed for simplicity and convenience. It leverages Firebase for real-time updates and cloud storage, ensuring that lists are instantly synchronized and never lost. Built with core web technologies, it focuses on responsive layouts and a clean, tile-based design for quick usability within Web Development.
Live: add-to-cart.ashwin.co.in
Source code: View Repository
Goals & Problems Solved
- Provide a lightweight, mobile-optimized shopping list tool.
- Ensure lists are accessible across devices with real-time sync.
- Replace fragile paper lists with reliable cloud persistence.
- Keep UI intuitive with minimal clicks for adding/removing items.
Architecture & Tech Stack
| Layer | Technology / Library | Purpose |
|---|---|---|
| Frontend | HTML, CSS, JavaScript | Structure, styling, and interactivity |
| Backend | Firebase | Real-time database, persistent storage |
| Hosting | Netlify | Deployment and live hosting |
Key Features & UX Flow
-
Mobile-First Design
- Optimized for smartphones, scales to larger devices.
-
Real-Time Updates
- Firebase sync ensures lists update instantly across devices.
-
Cloud Storage
- Persistent shopping list stored in the cloud.
-
Simple Interface
- Add and remove items with just a tap/click.
-
Tile-Based Layout
- Clear organization for readability and usability.
Code Walkthrough & Notable Modules
- index.html: Entry point with shopping list interface.
- styles.css: Provides responsive styling, mobile-first design.
- index.js: Handles item addition/removal, Firebase integration, and real-time updates.
- Firebase Config: Stores database URL and authentication details.
- assets/screenshots/: Contains UI screenshots for documentation.
UI / Responsiveness & Design Decisions
- Focused on mobile-first usability since shopping is often done on phones.
- Tile-based layout chosen for quick readability.
- Minimal color scheme for clarity and focus on list items.
- Responsive scaling for tablets and desktops.
Challenges & Learnings
- Implementing real-time sync with Firebase while keeping UI responsive.
- Handling cloud persistence without complex backend logic.
- Designing a layout that balances simplicity and functionality.
- Managing state changes seamlessly with vanilla JavaScript.
Future Improvements
- Add user authentication for personalized lists.
- Support categories/tags for items (e.g., groceries, electronics).
- Offline mode with localStorage sync once reconnected.
- Enhanced UI with animations and drag-and-drop sorting.
Screens & Visuals
Main Interface
Item Added To Cart
![Shopping List Items]https://raw.githubusercontent.com/Ashwin-S-Nambiar/add-to-cart/main/assets/screenshots/AddToCart-2.png)
