---

🛒 Add to Cart - Realtime Shopping List App

A simple, responsive web application that allows users to add and remove items from a shopping list. This app is powered by Firebase Realtime Database, meaning the list updates instantly across all connected devices (mobile, desktop, etc.) without needing to refresh the page.

📖 Overview

This project demonstrates how to connect a frontend JavaScript application to a serverless backend. Instead of storing data locally on the device (like LocalStorage), items are pushed to the cloud. This allows you to add items on your laptop and check them off on your phone while at the store.

📸 Screenshots

✨ Key Features

• Real-Time Synchronization: Uses onValue to listen for database changes. When an item is added or removed, the UI updates automatically.
• Cloud Storage: Data persists indefinitely in the Firebase Realtime Database.
• Add Items: Users can type an item and push it to the list.
• Remove Items: Simply click on an item to delete it from the database permanently.
• Empty State Handling: Displays a friendly "No items here... yet" message when the database is empty.

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6 Modules)
• Backend: Firebase Realtime Database
• SDK: Firebase JS SDK v9.15.0

🚀 Installation & Setup

To run this project locally, you cannot simply open the HTML file because it uses ES6 Modules (import). You need a local server.

1. Clone the repository:

git clone https://github.com/Otormin/AddToCartMobileApp.git

2. Create an index.html: Ensure you have an HTML file linked to the script with type="module".

<script src="index.js" type="module"></script>

3. Run with Live Server:

• If using VS Code, install the "Live Server" extension.
• Right-click index.html and select "Open with Live Server".

📂 Code Logic

The application follows a "Listen and Render" pattern:

1. Push: When you click "Add", the app uses push() to send the data to Firebase.
2. Listen: The onValue() function triggers every time the database changes.
3. Render: It clears the current list (clearShoppingListEl) and rebuilds it from fresh database snapshots (appendItemToShoppingListEl).

// Example of the Delete Logic
newEl.addEventListener("click", function() {
    // Locates the specific item ID in the database
    let exactLocationOfItemInDB = ref(database, `shoppingList/${ItemId}`)
    
    // Removes it from the Cloud, which triggers onValue() to refresh the UI
    remove(exactLocationOfItemInDB)
})

If you are forking this repo, create your own Firebase project and replace the appSettings URL with your own to ensure you have full control over your data.