ShoppingList

Share you shopping list

A modern, real-time sharebale shopping list application built with React, Node.js, Express, and Docker.

Screenshots

Features

• Real-time Synchronization: Updates appear instantly across all devices (SSE).
• Dashboard: Manage multiple lists, mark favorites, and share link.
• Smart Interactions:
  • Slide-to-Delete: Swipe items/lists to delete (preventing accidents).
  • Share Links: One-tap sharing via system sheet or clipboard.
• User Profiles: Custom usernames and display names.
• Modern UI: Dark mode, glassmorphism, responsive mobile-first design.
• Persistent Data: File-based JSON storage with Docker volume persistence.

Slash Commands

You can type these commands directly into the item input box:

• /clear-cache: Instantly delete all items in the current list.
• /config-lists: Enter configuration mode to manage existing lists.
• /config-users: Enter user configuration mode to view and manage users.

Sharing Lists

To share a list, the user first has to log in on the app and then open the shared list.

Deployment

Docker (Recommended)

The easiest way to deploy is using Docker Compose. This allows you to run the app with a single command.

Prerequisites

• Docker & Docker Compose installed.

Steps

1. Clone the repository:

   git clone https://github.com/straybiker/ShoppingList.git
   cd ShoppingList

2. Start the application:

   docker compose up -d --build

   This will build the React frontend, set up the backend, and expose the app on Port 80.

3. Access: Open http://localhost (or your server IP) in your browser.

Data Persistence

Data is stored in a Docker volume shopping_list_data mapped to /usr/src/app/data. Your lists are safe even if you rebuild the container.

Local Development

1. Install Dependencies:

   npm install && cd client && npm install

2. Run Dev Server:

   # Terminal 1: Root directory (runs server)
   npm start
   
   # Terminal 2: client/ directory (runs React dev server)
   cd client && npm run dev

   The app will be available at http://localhost:5173.

Technologies

• Frontend: React, Vite, Tailwind-inspired CSS.
• Backend: Node.js, Express.
• Infrastructure: Docker, Nginx (optional/proxied).