Green Circle

Preview Live
Svelte SvelteKit Nhost Docker PWA DaisyUI IndexedDB Service Workers
Green Circle

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

Description

Green Circle is an offline-first plant sharing and marketplace platform built during a hackathon. Designed for plant enthusiasts and local communities, it enables exchanging plants and cuttings—even in low-connectivity areas—through location-based discovery and seamless offline posting.

Tech Stack

  • Frontend: SvelteKit, DaisyUI
  • Offline Support: Service Workers, IndexedDB
  • App Type: Progressive Web App (PWA)
  • Other Tools: Nhost, Docker

Key Features

  • Offline-First Posting — Create and view plant listings without an internet connection.
  • Smart Sync — Automatically uploads queued posts once connectivity is restored.
  • Nearby Sharing — Uses geohash radius filtering to discover plants within walking distance.

Challenges & Solutions

1. Conflict Resolution in Offline Sync

Challenge: Managing data consistency when the same listing was edited offline and online simultaneously.

Solution: Applied a last-write-wins policy for quick resolution, with clear user prompts when conflicts occurred to maintain trust.

2. Delivering a Fully Functional Offline UX

Challenge: Providing an app experience that felt complete without active internet access.

Solution: Cached the app shell and plant listings via service workers, used IndexedDB to store pending posts, and implemented optimistic UI rendering so offline submissions appeared instantly.

3. Efficient & Privacy-Friendly Location Matching

Challenge: Matching users to nearby plant listings without excessive battery drain or privacy risks.

Solution: Used lightweight geohashing to filter listings within a set radius, eliminating the need for continuous GPS polling while maintaining accuracy.

4. Caching & Data Sync Architecture

Challenge: Ensuring cached data stayed fresh without overloading the network when reconnecting.

Solution: Designed a cache-first, network-update strategy—loading instantly from IndexedDB while fetching background updates for freshness, then merging changes with minimal payloads.

What I Learned

  • Designing a cache-first PWA architecture with offline-first principles as the foundation.
  • Implementing location-based filtering using geospatial data without heavy GPS polling.
  • Building conflict resolution workflows for offline-to-online sync scenarios.
  • Integrating IndexedDB with service workers for local data persistence and queued actions.
  • Applying optimistic UI patterns to maintain user trust during low or no connectivity.