Skip to content

mandi-tech/tc3-flutter-app

Repository files navigation

Tech Challenge - Fase 03: Gerenciador Financeiro

Flutter Dart Architecture Design System Storybook Firebase Status

Aplicativo Flutter para gerenciamento financeiro pessoal com autenticação, dashboard financeiro e armazenamento de recibos utilizando Firebase.

📑 Sumário


📱 Sobre o projeto

Este projeto foi desenvolvido como parte do Tech Challenge - Fase 03 da Pós Tech.

A aplicação tem como objetivo permitir que usuários gerenciem suas finanças pessoais, incluindo cadastro de transações, visualização de relatórios financeiros e armazenamento de recibos utilizando Firebase.

O projeto também explora conceitos de arquitetura escalável, Design System e documentação de componentes utilizando Storybook.


🛠 Tecnologias

O projeto foi desenvolvido utilizando as seguintes tecnologias:

Mobile

  • Flutter — framework para desenvolvimento mobile multiplataforma
  • Dart — linguagem utilizada pelo Flutter

Backend / Cloud

  • Firebase Authentication — autenticação de usuários
  • Cloud Firestore — banco de dados NoSQL para armazenamento de transações
  • Firebase Storage — armazenamento de recibos e anexos

Gerenciamento de Estado

  • Provider — gerenciamento de estado da aplicação

UI / Design

  • Custom Design System — tokens e componentes reutilizáveis
  • Storybook Flutter — documentação visual de componentes

Ferramentas

  • Git / GitHub — versionamento de código

✨ Funcionalidades

🔐 Autenticação

  • Login de usuário
  • Registro de novos usuários
  • Persistência de sessão

📊 Dashboard Financeiro

  • Visualização de gráficos financeiros
  • Análise das transações cadastradas

💸 Gerenciamento de Transações

  • Listagem de transações
  • Filtros por categoria e data
  • Paginação / scroll infinito

➕ Cadastro de Transações

  • Adicionar novas transações
  • Editar transações existentes
  • Validação de campos

📎 Upload de Recibos

  • Upload de comprovantes
  • Armazenamento no Firebase Storage

🏗 Arquitetura

O projeto utiliza uma arquitetura baseada em:

DDD (Domain Driven Design)

Separação clara entre:

  • Domain
  • Application / UseCases
  • Presentation
  • Infrastructure

Feature First

Organização baseada em funcionalidades da aplicação.

Isso permite:

  • melhor escalabilidade
  • maior isolamento de features
  • código mais fácil de manter

📂 Estrutura do projeto

TC3-FLUTTER-APP\LIB
+---app
|   +---controllers
|   \---router
+---core
|   \---error
+---features
|   +---auth
|   |   +---data
|   |   |   \---services
|   |   \---presentation
|   |       +---controllers
|   |       +---screens
|   |       \---widgets
|   +---home
|   |   \---presentation
|   |       +---screens
|   |       \---widgets
|   |           \---charts
|   +---navigation
|   |   +---domain
|   |   \---presentation
|   |       +---screens
|   |       \---widgets
|   +---profile
|   |   \---presentation
|   |       +---screens
|   |       \---widgets
|   +---register
|   |   \---presentation
|   |       +---screens
|   |       \---widgets
|   +---splash
|   |   \---presentation
|   |       \---screens
|   \---transactions
|       +---data
|       |   +---models
|       |   \---services
|       +---di
|       +---domain
|       |   +---entities
|       |   +---enums
|       |   \---usecases
|       \---presentation
|           +---controllers
|           +---filters
|           +---formatters
|           +---helpers
|           +---mappers
|           +---screens
|           +---utils
|           \---widgets
|               \---filters
\---shared
    +---design_system
    |   +---components
    |   +---storybook
    |   |   +---previews
    |   |   |   +---features
    |   |   |   |   +---auth
    |   |   |   |   |   \---widgets
    |   |   |   |   +---home
    |   |   |   |   |   \---widgets
    |   |   |   |   +---navigation
    |   |   |   |   +---profile
    |   |   |   |   |   \---widgets
    |   |   |   |   +---register
    |   |   |   |   |   \---widgets
    |   |   |   |   +---splash
    |   |   |   |   \---transactions
    |   |   |   |       \---widgets
    |   |   |   \---widgets
    |   |   +---stories
    |   |   |   +---components
    |   |   |   +---features
    |   |   |   |   +---auth
    |   |   |   |   |   \---widgets
    |   |   |   |   +---home
    |   |   |   |   |   \---widgets
    |   |   |   |   +---navigation
    |   |   |   |   |   \---widgets
    |   |   |   |   +---profile
    |   |   |   |   |   \---widgets
    |   |   |   |   +---register
    |   |   |   |   |   \---widgets
    |   |   |   |   +---splash
    |   |   |   |   \---transactions
    |   |   |   |       \---widgets
    |   |   |   +---tokens
    |   |   |   |   +---models
    |   |   |   |   \---widgets
    |   |   |   \---widgets
    |   |   \---support
    |   |       +---mocks
    |   |       |   \---features
    |   |       |       +---auth
    |   |       |       \---home
    |   |       \---states
    |   |           +---components
    |   |           +---features
    |   |           |   +---auth
    |   |           |   +---home
    |   |           |   +---navigation
    |   |           |   \---transactions
    |   |           \---widgets
    |   +---themes
    |   \---tokens
    \---utils

🧠 Gerenciamento de estado

O gerenciamento de estado é realizado utilizando:

Provider

Responsável por gerenciar:

  • estado de autenticação
  • estado das transações
  • atualização da interface

🎨 Design System

O projeto possui um Design System próprio, responsável por centralizar:

  • tokens visuais
  • componentes reutilizáveis
  • temas

🎨 Tokens

Localizados em:

shared/design_system/tokens

Colors

AppColors.primary
AppColors.secondary
AppColors.accent
AppColors.background
AppColors.surface

Spacing

AppSpacing.xs
AppSpacing.sm
AppSpacing.md
AppSpacing.lg
AppSpacing.xl

Typography

AppTypography.title
AppTypography.subtitle
AppTypography.body
AppTypography.caption
AppTypography.button

🧩 Componentes

Localizados em:

shared/design_system/components

Componentes disponíveis:

  • AppButton
  • AppTextField
  • AppEmailField
  • AppPasswordField
  • AppDropdownField
  • AppCard
  • AppPickerField
  • AppSectionTitle
  • AppTopBar
  • AppSpeedDial

Exemplo:

AppButton(
  label: 'Entrar',
  onPressed: () {},
)

📚 Storybook

O projeto utiliza Storybook Flutter para documentar visualmente os componentes.

Permite:

  • visualizar componentes isoladamente
  • testar diferentes estados
  • documentar tokens
  • validar consistência visual

Rodar Storybook

flutter run -t lib/main_storybook.dart

🚀 Executando o projeto

Instalar dependências

flutter pub get

Rodar aplicativo

flutter run

🔥 Configuração do Firebase

O projeto utiliza:

  • Firebase Authentication
  • Cloud Firestore
  • Firebase Storage

Criar projeto

https://console.firebase.google.com

Instalar dependências

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add firebase_storage

Inicializar Firebase

await Firebase.initializeApp();

🎥 Demonstração

Vídeo demonstrando:

  • login
  • cadastro de transações
  • edição
  • filtros
  • upload de recibos
  • integração com Firebase

https://youtube.com/shorts/Z-QvAC9wJ-8?feature=share


👥 Equipe - Grupo 11

RM Nome LinkedIn GitHub
RM367409 Isabelle Dias Ribeiro Silva Linkedin Badge GitHub Badge
RM367047 Mariana Ayumi Tamay Linkedin Badge GitHub Badge

About

Projeto desenvolvido para o Tech Challenge da Fase 03 da Pós-Graduação em Frontend Engineering da Pós Tech FIAP.

Topics

Resources

Stars

Watchers

Forks

Contributors