SLApp Shopping List App

Category Full-Stack / Utility App

Stack HTML, CSS, JavaScript, Firebase

Focus Realtime Sync, Auth, Shared Lists

Deployment Netlify

Project Overview

A live shopping list built for shared everyday tasks.

Shopping List App, affectionately known as SLApp, is a full-stack web application designed to make list-making collaborative and dynamic. Instead of one person managing a static note, multiple users can interact with the same list and see updates as they happen.

SLApp was built to solve the everyday problem of keeping a shopping list synced between people, devices, and sessions. Instead of sending updates through texts or relying on paper notes, the app gives users one live list that can be updated collaboratively.

The frontend is built with foundational web technologies: HTML, CSS, and vanilla JavaScript. The backend and database layer is powered by Firebase, which handles authentication, database operations, and real-time syncing across connected clients.

The core interaction is intentionally simple: users can sign in, create or access a list, add shopping items, assign categories, and mark items as bought. When an item is added or checked off, Firebase pushes the change so the interface updates across connected devices almost instantly.

That real-time behaviour is what makes the app feel less like a static checklist and more like a practical shared tool for households, errands, or group tasks.

Core purpose: make shopping lists collaborative, synced, and easy to use.
Frontend layer: vanilla HTML, CSS, and JavaScript for a lightweight interactive interface.
Backend layer: Firebase Authentication and Realtime Database for user sessions and live data.
Interaction layer: add items, choose categories, toggle bought states, and see updates immediately.

HTML

CSS

JavaScript

Firebase

Auth

Realtime DB

Netlify

Responsive UI

Interface Screens

The UI keeps the task clear: sign in, add items, and manage the list.

The app is designed around direct utility, so every screen supports the flow of entering a shared space, adding items, and tracking what has already been bought.

SLApp authentication screen — Authentication gives each user access to their own list space and keeps list data tied to a session.

SLApp items with categories and bought state — Items can be grouped by category and toggled into a bought state, making the list readable while shopping.

Key Features

What makes SLApp more than a normal checklist.

Real-Time Collaboration

Multiple users can manage the same shopping list, with additions and bought-state changes reflected across connected devices.

Firebase Auth

Email/password authentication creates a private app layer where list data can be tied to a user or shared list context.

Live Database Sync

Firebase Realtime Database listens for changes and updates the interface when data changes, instead of relying on manual refreshes.

Technical System

Firebase turns static list-making into a synced utility.

SLApp uses Firebase to handle the backend behaviour that makes the experience feel alive: authentication, data storage, and instant updates.

Firebase Realtime Database structure for SLApp — The database structure stores list items and supports live updates across active sessions.

SLApp authentication and login UI — Authentication creates the entry point into the app and separates the user experience from a public static list.

SLApp interface showing list entry and controls — The interface is intentionally minimal so the Firebase behaviour stays clear and easy to test.

Vanilla JavaScript Frontend

The app uses plain JavaScript to manage DOM updates, item input, category selection, toggle behaviour, and user-triggered events.

Firebase Authentication

Email/password authentication handles the entry layer and gives the app a stronger full-stack structure than a local-only checklist.

Realtime Database Listener

The app listens for database changes so list updates can render as soon as data changes, supporting a collaborative experience.

Next Iteration

The next improvement is to separate returning-user login from sign-up by using signInWithEmailAndPassword for the login flow.

From simple list to shared utility.

SLApp shows how a small everyday tool can become more valuable when the backend keeps everyone in sync.

Open Live App