Shopping List App

Hi there! 👋

Learn to build a local-first, real-time shopping list app using Expo, TinyBase, Clerk, and Cloudflare Durable Objects. Master offline capabilities, real-time syncing, and cross-platform functionality!

📱 iOS Demo → App Store
🌐 Web Demo → Live Demo
🛠️ Powered by Expo, TinyBase, Clerk, & Cloudflare

Dependencies

To build the Shopping List App, you need to install several dependencies that enable core features of the app. Here's a breakdown of each:

Main Dependencies

• @clerk/clerk-expo
  Provides authentication and user management functionality seamlessly integrated with Expo.

• expo-camera
  Enables camera access for scanning QR codes or capturing images within the app.

• expo-crypto
  Adds cryptographic functions such as hashing and secure key generation for enhanced data security.

• expo-network
  Used to show an alert when the user is offline.

• expo-secure-store
  Securely stores sensitive data like authentication tokens or user settings locally on the device.

• expo-sqlite
  Implements a lightweight, local SQLite database for offline data storage and querying.

• react-native-qrcode-svg
  Allows the app to generate QR codes for sharing shopping lists.

• react-native-svg
  Provides support for rendering scalable vector graphics (SVG), required by the QR code generation library.

• reconnecting-websocket
  Ensures reliable real-time communication by reconnecting automatically if the WebSocket connection is lost.

• tinybase
  Acts as a state management library optimized for local-first apps, providing reactive data storage and offline capabilities.

npx expo install @clerk/clerk-expo expo-camera expo-crypto expo-network expo-secure-store expo-sqlite react-native-qrcode-svg react-native-svg reconnecting-websocket tinybase

Don't forget to install Cleerk's typescript types:

bun i -D @clerk/types

Watch the video to learn more about the Shopping List App. 👇

Links

Go back to Projects