https://github.com/logifex/buylist
A collaborative shopping list app made with React, Express, PostgreSQL, Socket.IO and React Native and Expo for mobile.
https://github.com/logifex/buylist
expo express nodejs postgresql react react-native shopping-list socket-io tailwindcss
Last synced: 3 months ago
JSON representation
A collaborative shopping list app made with React, Express, PostgreSQL, Socket.IO and React Native and Expo for mobile.
- Host: GitHub
- URL: https://github.com/logifex/buylist
- Owner: logifex
- Created: 2025-02-02T11:29:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-28T11:40:43.000Z (about 1 year ago)
- Last Synced: 2025-03-28T12:32:36.824Z (about 1 year ago)
- Topics: expo, express, nodejs, postgresql, react, react-native, shopping-list, socket-io, tailwindcss
- Language: TypeScript
- Homepage: https://buylistapp.web.app
- Size: 803 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Buylist
A collaborative shopping list app that allows users to create and share lists with others in real time. Available on both web and mobile, the app supports offline functionality, list customization, and Google authentication.
## Features
### General
- Create, edit, and delete shopping lists.
- Customize lists with different colors.
- Add, edit, delete, and check/uncheck products.
- Prevent duplicate products, with an option to add anyway or uncheck an existing item.
- Invite others to collaborate using an invite link (expires after 3 days).
- View and manage participants (owner can remove participants).
- Dark mode and light mode support.
- Google authentication for secure login.
- Real-time updates using WebSockets.
### Web Version
- Built using React, Vite, and TailwindCSS.
- Uses React Router for navigation.
### Mobile Version
- Built with Expo and React Native.
- Uses Expo Router for navigation.
- Supports offline-first functionality:
- View all lists, including shared ones, while offline.
- Perform operations like adding, editing, or deleting products, which sync when online.
- Allows creation of local "personal" lists that are not synced with the server.
- Local lists can be shared and converted into shared lists.
- Designed for Android (not tested on iOS).
## Try It Out
Buylist is available on multiple platforms:
- **Web Version:** Access the app from any browser at [Live Website]().
- **Android Version:** Download the app from the [Google Play Store]().
The mobile version includes additional features such as offline support and local lists. Note that the app is currently designed and tested for Android, and iOS support has not been tested.
## Screenshots
### Web Version
### Mobile Version
## Technologies Used
### Clients (Web & Mobile)
- **React, React Native, Vite, Expo** (frontend frameworks)
- **TailwindCSS** (for styling)
- **TanStack Query** (for API queries and mutations)
- **TanStack Query Persist** (for offline-first sync on mobile)
- **Firebase Authentication** (for authentication)
- **Socket.IO** (for real-time updates)
- **AsyncStorage** (for local lists on mobile)
### Server
- **Node.js, Express** (backend framework)
- **PostgreSQL, Prisma** (database and ORM)
- **Redis** (for Socket.IO adapter communication between instances)
- **Morgan, Winston** (for logging)
- **Zod** (for validation)
- **Mocha, Chai, Sinon, Supertest** (for testing)
- **Socket.IO** (for real-time communication)
## Environment Variables
Each part of the application requires a `.env` file in its root folder.
### Web Client
```
VITE_SERVER_URL=
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
```
### Mobile Client
```
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=
EXPO_PUBLIC_SERVER_URL=
GOOGLE_SERVICES_JSON=google-services.json (file required)
ANDROID_PACKAGE=
```
### Server
```
NODE_ENV= (optional)
PORT= (optional, default value provided)
DATABASE_URL=
REDIS_URL= (optional, default value provided. A Redis database is required)
GOOGLE_APPLICATION_CREDENTIALS=service-account-file.json (file required)
CLIENT_URL= (optional, defaults to localhost:5173, used for cors and redirects)
SERVER_URL= (optional, used for logging)
GOOGLE_API_KEY= (optional, required for testing)
```
> **Note:** To properly run tests in development, a Firebase Auth Emulator is required along with `GOOGLE_API_KEY`.