Back to Projects

CoffeeCard

DjangoReact.jsFlutterMySQL

Overview

CoffeeCard is a multi-client coffee-shop loyalty and subscription platform composed of a Django REST backend, a React management portal, a Flutter customer app, and a Flutter staff app. It models shops, branches, managers, barmen, customers, subscription templates, customer subscription products, and item-redemption requests. Staff can issue and decrement subscription items, customers can review and approve or deny redemption requests, and Firebase Cloud Messaging connects backend events to customer-device notifications. The platform also supports Google sign-in, media uploads, bilingual Italian and English interfaces, and role-specific workflows across web and mobile clients.

Objectives

  • ▸ Allow managers to register and administer shops, branches, and barman staff
  • ▸ Enable staff to define reusable subscription templates and issue subscription products to customers
  • ▸ Allow barmen to decrement subscription items through an approval-based customer redemption workflow
  • ▸ Give customers a mobile experience for viewing active and inactive subscriptions, reviewing redemption requests, and managing their profile
  • ▸ Notify customer devices when subscriptions are created or item-redemption requests require action
  • ▸ Provide a React web portal with separate manager and barman workflows for operational administration
  • ▸ Support customer and staff authentication through token-based API access and Google OAuth
  • ▸ Support bilingual Italian and English experiences across the web portal and Flutter applications
  • ▸ Provide media upload and thumbnail generation for platform content

Architecture

Four-tier application architecture. Backend: Django 3.1 with Django REST Framework, MySQL, DRF routers, token authentication, custom authorization-header middleware, Firebase Cloud Messaging through fcm-django, Google OAuth support, and Pillow-based image processing. Domain responsibilities are divided across shop, manager, barman, and customer apps. Core entities connect shops to branches, branches to staff, users to customer profiles, and customers to subscription products derived from reusable subscription templates. React frontend: React 17 with Create React App, Redux and redux-thunk, React Router v5, Axios, Material UI, react-data-table-component, SweetAlert2, Material UI Dropzone, and i18next. Route guards separate private, manager, and barman sections. Mobile: two Flutter applications share the backend API; the customer app uses Provider, HTTP interceptors, SharedPreferences, Firebase Messaging, Google Sign-In, and generated ARB localization; the barman app uses HTTP interceptors, SharedPreferences, connectivity checks, dropdown search, toasts, and Flutter localization. Backend signals generate related profile and notification records and send push notifications when subscriptions or redemption requests are created. The repository contains deployment artifacts for the backend but no separate frontend backend service or database other than the Django API and MySQL store.

Key Features

  • ▸ Manager workflows for shop registration, branch creation, branch listing, and barman-staff management
  • ▸ DRF ModelViewSets and routers for shops, branches, barmen, customers, subscription templates, subscription products, media, and customer actions
  • ▸ Reusable subscription templates defining purchasable or redeemable coffee-shop products
  • ▸ Customer-specific subscription products that track available subscription items and redemption state
  • ▸ Per-item decrement endpoint that creates a SubscriptionItemRequest containing staff and customer context, device information, and approval status
  • ▸ Customer approval and denial workflow for incoming item-redemption requests
  • ▸ Backend signal handlers that create customer-related records and trigger subscription and redemption notifications
  • ▸ Firebase Cloud Messaging integration with screen-routing payload data used by the customer app
  • ▸ Customer registration with associated profile, social-links, push-notification, and email-notification records
  • ▸ Google OAuth login that provisions or retrieves a customer and returns an API token
  • ▸ Token-based API authentication with Axios and Flutter HTTP interceptors that attach authorization headers
  • ▸ React manager dashboard for branches, employees, customers, subscription templates, and subscription products
  • ▸ React barman dashboard for customer creation, subscription-template creation, subscription issuance, and item redemption
  • ▸ Subscription decrement confirmation dialog with quantity selection and status polling in the web staff interface
  • ▸ Customer Flutter screens for authentication, home, active and inactive subscriptions, item requests, notifications, settings, profile editing, public information, and password changes
  • ▸ Barman Flutter screens for login, searchable customer lists, subscription lists, subscription creation, customer creation, and drawer navigation
  • ▸ Media upload endpoint and React uploader with progress reporting, backed by Pillow thumbnail generation
  • ▸ Bilingual React interface with English and Italian translation namespaces for common, home, manager, and barman content
  • ▸ Bilingual Flutter interfaces using ARB localization files and flutter_localizations
  • ▸ Shared persistence of authentication and profile data through browser storage or Flutter SharedPreferences
  • ▸ Reusable API service classes for branches, barmen, customers, subscription products, subscription templates, and common DRF operations
  • ▸ Responsive branded assets and coffee-oriented onboarding, home, profile, and subscription screens across web and mobile clients

Challenges

  • ▸ Keeping a single subscription state consistent across the manager web portal, barman web and mobile interfaces, customer mobile app, and Django API
  • ▸ Designing an approval-based decrement workflow in which a staff action creates a pending request and the customer later approves or denies it
  • ▸ Coordinating push notifications, notification payload routing, and mobile-screen navigation across backend signals and Firebase Messaging
  • ▸ Representing reusable subscription templates separately from customer-specific subscription products while tracking item availability and redemption history
  • ▸ Maintaining role-specific routing and permissions across manager, barman, and customer clients
  • ▸ Supporting both web and Flutter clients against shared token-authenticated endpoints with different interceptor and persistence implementations
  • ▸ Handling subscription status polling in the web staff interface when customer approval is asynchronous and network requests may be delayed or missed
  • ▸ Providing bilingual content across React translation namespaces and independently generated Flutter ARB catalogs
  • ▸ Processing uploaded media and generating thumbnails while exposing the resulting content through API serializers
  • ▸ Reconciling legacy framework versions across Django, React, and Flutter while keeping several client applications aligned
  • ▸ Hardening authentication and deployment configuration: the repository contains permissive defaults, committed sensitive configuration, weak exception handling, and incomplete test coverage that require remediation before production use
  • ▸ Avoiding plaintext or regenerated customer-password handling and ensuring staff mobile clients use the current persisted token rather than a static credential

Outcomes

  • ▸ Delivered an end-to-end coffee subscription platform spanning one shared REST backend, a manager and barman web portal, a customer mobile app, and a barman mobile app
  • ▸ Implemented the complete subscription lifecycle from reusable template creation through customer issuance, item decrement, approval or denial, and notification
  • ▸ Connected backend subscription events to customer mobile screens through Firebase Cloud Messaging payloads
  • ▸ Provided role-specific manager, barman, and customer workflows across web and mobile interfaces
  • ▸ Created reusable DRF API service patterns and client-side authentication interceptors for multiple consumers
  • ▸ Implemented bilingual Italian and English interfaces in both the React portal and Flutter applications
  • ▸ Added Google OAuth support alongside token-based authentication
  • ▸ Implemented media upload with client progress reporting and server-side thumbnail generation
  • ▸ Provided subscription status polling and confirmation UX for staff-side redemption operations
  • ▸ Established a cross-platform foundation for coffee-shop loyalty operations while documenting important production-hardening requirements around secrets, permissions, password handling, token management, and automated tests