heeyunlee / cccc

Expense Tracker built with Flutter, Firebase, and Plaid API

CCCC: Credit Card Calorie Counter

Table of contents

• CCCC: Credit Card Calorie Counter
  • Table of contents
  • Introduction
  • Features
    • Link Bank Accounts and Fetch Transactions Data
    • Scan Receipt Image
  • Architecture

Introduction

CCCC is an food-focused expense tracking application built with Flutter, Firebase, and Plaid API.

This project uses the following technologies:

• Dart and Flutter for building mobile application
• Firebase Cloud Firestore for NoSQL Database
• Google Cloud Functions for serverless functions
• Plaid API for connecting with bank accounts and fetching transactions data

Features

Link Bank Accounts and Fetch Transactions Data

Open Plaid Link	Connect Bank Account	Fetch Transactions

Scan Receipt Image

Screenshot

Using image_picker, Google ML Kit's Text Recognition function, and Plaid API, I created a feature where users can scan the receipt image and match it with the transaction data from their debit/credit card.

1. Pick Image to scan using image_picker package

import 'package:image_picker/image_picker.dart';

Future<File?> pickImage(ImageSource source) async {
  final image = await picker.pickImage(source: source);

  if (image != null) {
    final file = File(image.path);

    return file;
  } else {

    return null;
  }
}

2. Extract Texts and items from the file

import 'package:google_ml_kit/google_ml_kit.dart';

Future<ReceiptResponse?> extractTexts() async {
  logger.d('File exists. Start using [GoogleMlKit]');

  final imageFile = pickImage(ImageSource.camera)
  final textDetector = GoogleMlKit.vision.textDetector();
  final inputImage = InputImage.fromFile(imageFile);
  final recognisedText = await textDetector.processImage(inputImage);
  final textsWithOffsets = _getTextsWithOffsets(recognisedText);
  final nestedLines = texts.blocks.map((e) => e.lines).toList();
  final textLines = nestedLines.expand((e) => e).toList();
  final textElements = textLines.expand((e) => e.elements).toList();
  final textElementsMap = textElements.map((e) => e.toMap).toList();
  
  final response = await functions.processReceiptTexts(
    rawTexts: recognisedText.text.replaceAll('\n', ', '),
    textsWithOffsets: textsWithOffsets,
  );

  return response;
}

Adding this for the text

Architecture

lib/
│───constants/
│───extensions/
│───models/
│───routes/
│───services/
│───styles/
│───view_models/
│───views/
│───widget_models/
│───widgets/
└───main.dart

• constants: constant values such as urls, keys, etc
• extensions: custom extensions for String or Enum
• models: custom classes and enums
• routes: for routing within the app
• services: for using Firebase Authentication, Cloud Firestore, and Functions
• styles: app-level ThemeData, TextStyles, ButtonStyles, and Color Palette
• view: Scaffold-level ui components
• view_models: view model for each view scaffolds
• widgets: widgets that are used in view

cccc's Issues

is this project open? like can i learn from it or not. Please reply back

How did you configure firebase cloud functions?

First of all thank you a ton for this project. It's really eye opening and the way in which you executed it is simply amazing.

I am trying to user the firebase emulator to run the functions, or even deploy them to my firebase project, but firebase CLI does not recognize any function because they are under sub-directories and not directly under the "functions" directory. I see and agree that the functions should be separated, I just want to know how you initiated them inside the project. I don't want to have to go to each individual sub-directory and deploy the functions from there as that would be an anti-pattern to managing it all from the root of the project.

My question also related to the cloud_functions_host.dart file, which you didn't upload. I assume it includes the hostname constant, but I'd like to know exactly how you did it so I could point it to my localhost firebase emulator at the very least or my cloud project.