Architecture Documentation: Get That Bread

Purpose

This document outlines the architectural design of Get That Bread, an app developed to help users track, plan, and optimize their financial habits with a social twist. The app leverages modern development tools to provide a smooth, reliable, and scalable experience. This documentation details the app's frontend and backend architecture, the major components involved, and how these systems interact.

Architecture Diagram

The following diagram provides a visual overview of the architecture of Get That Bread, highlighting data flow between frontend and backend components.

Frontend Architecture

The frontend of Get That Bread is built using FlutterFlow, a low-code development platform ideal for rapid UI/UX prototyping and app development. The design follows modular and scalable principles, making updates and collaboration straightforward.

Major Components

• Pages: Each functional area of the app (Login, Home, Friends, Calendar, Settings, etc.) is structured as a distinct page.
• Widgets: Some of Get That Bread's key widgets include -

• Button Widgets:
• Containers:
• Text Fields:
• Custom Sidebar: The sidebar is a quick and easy way to navigate between the different pages from the Home Page of Get That Bread

• UI Design: Initial visual design is created in Figma to ensure branding consistency and UX clarity. After approval, these designs are implemented in FlutterFlow where they are connected to backend logic.

Libraries and Tools

• FlutterFlow: Main frontend development environment.
• Figma: Used for UI/UX prototyping and design consistency.

Interaction with Backend

• Authenticating a user via Firebase Auth.
• Saving recipes and updating favorited lists using the Firestore Database.
• Keeping track of money saved using Firebase storage.
• Fetching analytics on user retention or button click behavior.

Backend Architecture

The backend of Get That Bread uses Firebase as its cloud services provider, offering real-time capabilities and seamless integration with FlutterFlow. Firebase tools used in the backend include Firestore (NoSQL database), Firebase Authentication, and Firebase Analytics.

Key Components

• Firebase Authentication: Manages user logins, signups, and identity verification. Methods supported: Email and Password authentication.
• Cloud Firestore:

Stores user data, recipes, and receipts scanned:

• User data
• Recipes
• NPS Survey Results
• Profile Photos and Usernames
• UID

• Firebase Analytics:

• Tracks onboarding completion
• Logs button click frequencies
• Monitors feature adoption and active user retention

User Authentication and Account Creation

Purpose: Enable secure user access and personalized features.

Firebase Authentication:

• Login and registration (Email/Password)
• Post-login session management

Firestore:

• User profile data
• Saved receipts and recipes
• Money saved
• Activity logs (e.g., recent login times, feature usage)

Summary

The architecture of Get That Bread combines a visually intuitive frontend built in FlutterFlow with a powerful Firebase backend that ensures speed, reliability, and scalability. With modular design, real-time updates, and detailed analytics, the app offers both users and developers a responsive and adaptable experience.

Interaction Summary

Frontend ↔ Backend:

• Firebase Authentication handles user identity
• Firestore manages structured user and receipt data
• Firebase Analytics feeds user interaction insights Example: When a user saves a favorite recipe -
• Frontend sends confirmation via Firebase function
• Firestore updates user's favorited list
• Analytics logs the event