mshopify-store

Flutter app consuming the Shopify Storefront GraphQL API via a graphql_client, with JWT-based auth, SharedPreferences for lightweight persistence, Hive for offline caching, and dark mode support.

Overview

A Flutter storefront client for Shopify that uses the Storefront GraphQL API, manages auth with JWT, caches data with Hive, stores lightweight preferences with SharedPreferences, and supports light/dark themes.

Features

• Product and collection browsing from Shopify GraphQL
• Product detail with variants
• Cart & checkout flow (describe current state)
• User auth (JWT)
• Offline-friendly caching (Hive) + persisted prefs (SharedPreferences)
• Dark mode support

Tech Stack

• Language: Dart, Flutter
• State management: GetX (controllers, bindings, routes)
• API: Shopify Storefront GraphQL API via graphql_client
• Auth: JWT
• Storage: SharedPreferences (prefs), Hive (caching)
• Theming: Light/Dark mode
• Env/config: (e.g., .env + --dart-define), adjust to project

Architecture

• Bindings: wire controllers/services to routes.
• Controllers: handle logic, expose reactive state to views.
• Views: presentation/UI, listen to controllers.
• Routes: centralized navigation definitions.
• Services/Providers: GraphQL calls, auth, storage, caching.

Project Structure

Update any names as needed; reflects the provided layout.

• lib/main.dart — App entry, initial bindings, theme setup.
• lib/app/
  • routes/ — app_pages.dart, app_routes.dart (navigation).
  • core/ — shared constants, theme, utilities, error handling.
  • modules/
    • data/ — data-layer code scoped to modules.
    • domain/ — entities, repositories/interfaces, use-cases.
    • presentation/ — views, controllers, bindings per feature.
  • data/
    • fragments/ — GraphQL fragments.
    • queries/ — GraphQL queries/mutations.
    • graphql_client.dart (or similar) — Shopify Storefront client.
  • presentation/ — shared UI components/widgets (if separated).
• assets/ — images, icons, fonts.
• docs/screenshots/ — add app screenshots here (see below).

Environment Setup

1. Install Flutter (specify version).
2. Create a Shopify Storefront API client:
   • Storefront endpoint (e.g., https://your-store.myshopify.com/api/2024-07/graphql.json)
   • Storefront access token
3. Set environment variables (example):
   • SHOPIFY_STORE_URL=...
   • SHOPIFY_STOREFRONT_TOKEN=...
   • JWT_SECRET or JWT_PUBLIC_KEY (as required)
4. If using dotenv:

   cp .env.example .env
   # flutter run --dart-define-from-file=.env

   Or use --dart-define directly.

Running the App

flutter pub get
flutter run
# If using env defines:
# flutter run --dart-define-from-file=.env

Add flavors/targets if applicable.

Build & Release

# Android
flutter build apk --release
# iOS
flutter build ipa --release

Include signing configs as needed.

Testing & Linting

flutter test
flutter analyze
# add dart_code_metrics or other linters if configured

API & Data

• Endpoint: Shopify Storefront GraphQL API.
• Client: graphql_client (wraps auth headers, error handling, retries).
• GraphQL artifacts: keep fragments under lib/app/data/fragments/ and queries/mutations under lib/app/data/queries/.
• Consider pagination, network error states, and rate limiting handling.

Auth

• JWT for user/session tokens.
• Attach JWT to authorized GraphQL mutations/queries as needed.
• Handle expiry/refresh if implemented.

State, Storage & Caching

• State: GetX controllers + reactive observables.
• Prefs: SharedPreferences for lightweight flags (e.g., theme, onboarding, last store).
• Cache: Hive for product/collection/cacheable responses; consider encryption for sensitive data.
• Theme: Light/Dark mode toggle; persist preference in SharedPreferences.

Contributing

• Branch per feature; open PRs with description and screenshots for UI changes.
• Run tests and analyzers before submitting.

License

LICENSE.