Architecture - tais-yakimovich/nadatrace-app GitHub Wiki

Purpose

This document provides a comprehensive overview of the architecture of the Nadatrace app, detailing both the frontend and backend components. It highlights the structure, major components, libraries, and tools used to ensure the app delivers a seamless and efficient user experience. Additionally, it explains how these components interact with each other and provides a clear picture of how the app is structured.

Architecture Diagram

DB-architecture

Frontend Architecture

The frontend of the Nadatrace app is built using FlutterFlow, a visual development platform that simplifies the creation of UI components and app pages. This architecture is designed for modularity, scalability, and ease of collaboration among the development team.

  • Built using FlutterFlow with Dart/Flutter as the underlying language.
  • Pages: HomePage, Discover, Cart, MySubscription, Settings, Orders, Product Page, Tracking, PaymentInfo, Update Shipping
  • State management through FlutterFlow state logic
  • Navigation: Tabbed interface + stack-based routing for deep links

Major Components

  • Pages: Pages represent distinct screens or views within the app. Each page is composed of various widgets and layouts that define the user interface and interactivity.

  • Widgets: FlutterFlow provides a set of core widgets to build the app’s interface. Key widgets include:

    • Button Widget: Used for user interactions such as submitting forms or navigating between pages.
    • TextField Widget: Allows users to input text, such as for login, registration, or data entry forms.
    • ListView Widget: Displays a scrollable list of items, ideal for presenting data like user-generated content or app resources.

UI Design: The visual design of the app is initially created using Figma, ensuring that the UI aligns with the app's brand and user experience goals. Once the designs are approved, they are implemented in FlutterFlow, where they are connected to the app’s functionality.

Libraries and Tools

  • FlutterFlow: The primary tool for developing the frontend, offering a drag-and-drop interface for building pages and widgets.
  • Figma: Used for designing and prototyping the UI before it is implemented in FlutterFlow.

Interaction with Backend

The frontend communicates with the backend via API calls, sending and receiving data from Firebase services like Firestore and Shopify Authentication with OAuth. For example, when a user logs in, the frontend interacts with Shopify Authentication to verify credentials and authenticate the user.

Backend Architecture

The Nadatrace app backend is designed to be scalable, serverless, and integrated with third-party services to streamline development while maintaining strong performance, security, and flexibility. Our backend architecture leverages a combination of: Firebase services (Authentication, Firestore, Analytics), Shopify Authentication. This document provides an overview of the backend components, their roles, and how they interact to support core functionalities such as user authentication, data storage, and analytics tracking.

Key Components

  • Firebase the core platform for backend services: real-time data storage and analytics
  • Firestore a NoSQL database that stores user data, app-related information, and various other content related to the app.
  • Shopify Authentication with OAuth is a service for secure user authentication
  • Firebase Cloud Functions for background processing (e.g., carbon calculation)
  • Shopify API used for login, new user sign up, purchases, product metadata, and orders
  • Firebase Analytics a service that provides insights into app usage and user behavior, helping to track key metrics and improve user experience.

Firebase Analytics

Firebase Analytics collects data on app usage, user interactions, and performance, including:

  • User activities (e.g., button presses, page views).
  • Active users and retention rates.
  • Completion rates for important user flows (e.g., onboarding, registration).
  • Insights into specific button or feature performance.

Firebase - Google Firestore

Google Firestore is a cloud data storage designed to store, sync, and query app data easily and in real-time, both for mobile apps and web apps

  • NoSQL: Flexible schema to allow rapid evolution of data models.
  • Real-time updates: Firestore automatically syncs changes to clients instantly if needed.
  • Security Rules: Custom rules ensure that users can only access their own documents.

Shopify Authentication (via OAuth)

Workflow:

  • When users sign up or log in, Nadatrace uses Shopify OAuth to verify their identity.
  • Upon successful authentication, a secure token is issued.
  • The token is then used to manage session state within the app and allow access to user-specific data in Firestore.
  • Shopify Authentication ensures security standards like OAuth 2.0 flows.
  • Role-based access (e.g., admin, premium users) by leveraging Shopify customer tags.

The Nadatrace app’s backend architecture uses a serverless, scalable approach combining Firebase services and Shopify authentication. It ensures secure user management, real-time data updates, robust analytics tracking, and dynamic UI experiments — all while being flexible enough to grow with future business needs.