Lucas Batista
AppEm Produção2024

Ciclou

App Flutter na Google Play que liga quem descarta óleo de cozinha a coletores — da proposta ao certificado de destinação

Ver projeto ao vivoGoogle Play5 fluxos em vídeo
FlutterDartReact 19 (site)ViteTailwind CSSFirebase Cloud Functions
Roda emAndroidSite ciclou.app
perfis no mesmo app: gerador e coletor
2
Cloud Functions: Pix, webhook, push e limpeza
12
faixas de taxa por volume, de R$ 7,50 a R$ 20
6
volume mínimo por solicitação
20 L

01

Visão Geral

O Ciclou organiza uma coleta que costuma acontecer por telefone e sem registro. O gerador informa quantos litros tem, até quando aceita propostas e em que dias e horários o óleo pode ser retirado. Coletores veem os pedidos abertos, mandam preço por litro e prazo, e o gerador escolhe. A partir do aceite, o app conduz o resto: o coletor paga a taxa da plataforma por um Pix gerado pelo Mercado Pago, confirma seus dados e avisa que está a caminho; na chegada, o gerador digita o código de confirmação; depois da retirada, o coletor registra a quantidade real e envia o comprovante do pagamento ao gerador, que confere, avalia o coletor e recebe o certificado de destinação em PDF. Tudo roda sobre Firebase — Auth, Firestore em tempo real, Storage, Cloud Functions e notificações push — e o site ciclou.app, em React, apresenta o produto e leva à Play Store.

Meu papel

Desenvolvedor Front-End & Mobile — responsável pela interface Flutter, fluxos de usuário e integração com Firebase. Projeto desenvolvido em parceria com Rafael Almeida (back-end e design).

Categoria

App

Ano

2024

Status

Em Produção

Plataformas

AndroidSite ciclou.app

O app Flutter fala direto com o Firebase. O que não pode rodar no celular — gerar e validar o Pix, receber o webhook do Mercado Pago, disparar push — fica nas Cloud Functions. O site em React apresenta o produto e leva para a Play Store.

App Flutter

gerador e coletor

Firestore em tempo realpdf (certificado)Syncfusion PDF ViewerNotificações locais

Firebase

Auth, Firestore e Storage

Coletas e propostasNotificaçõesComprovantesCertificados

Cloud Functions

12 funções em Node.js

Pix da taxaWebhook do Mercado PagoPush por eventoLimpeza de pedidos expirados

Site ciclou.app

React 19 + Vite

Tailwind CSSframer-motionPáginas para restaurantes e coletoresBlog

Sincronização: O endereço completo do gerador só é liberado para o coletor depois que a taxa da plataforma é paga.

02

O Problema

Restaurantes, condomínios e escolas precisam dar destino correto ao óleo de fritura, e muitos precisam comprovar isso. Mas encontrar coletor é boca a boca, o preço é combinado por mensagem, ninguém registra quanto saiu de fato e o comprovante de descarte raramente existe.

03 — A Solução

Um marketplace de coleta em Flutter com dois perfis na mesma base: o gerador pede e escolhe entre propostas; o coletor encontra pedidos, propõe preço e prazo e conduz a coleta passo a passo. Pagamento da taxa via Pix, código de confirmação na chegada, comprovante do pagamento ao gerador e certificado de destinação gerado ao finalizar a coleta.

04

Por dentro do produto

O app de verdade rodando com dados fictícios no Firebase Emulator, gravado em dois celulares ao mesmo tempo: à esquerda o gerador, à direita o coletor. O Pix é de demonstração — nenhuma tela é mockup.

01

Pedido

O restaurante pede, o coletor propõe, o restaurante escolhe

Mariana informa 45 litros e dá uma hora para receber propostas; dias de retirada, horário e chave Pix já vêm do perfil. Diego abre o app, vê o pedido na lista de novas solicitações e manda R$ 2,40 por litro com seis horas para coletar. Do outro lado, o cartão do pedido passa a mostrar a proposta — e o aceite muda a coleta para em andamento.

  • Mínimo de 20 litros e prazo de 15 min a 2 h para propostas
  • Total e taxa da plataforma calculados enquanto o coletor digita
  • Propostas comparadas lado a lado, com aceitar e recusar
02

Coleta

Taxa via Pix, aviso de saída e código na chegada

O coletor abre o processo da coleta e encontra o Pix da taxa. Pago, o app libera o endereço e os dados para pagar o gerador; ele confirma CPF e RG — nome, veículo e placa vêm do perfil — e toca em Estou a Caminho. Aparece o código de confirmação; o gerador digita o código no próprio celular e a coleta passa a aprovada.

  • Pix gerado por Cloud Function no Mercado Pago
  • Endereço completo só depois da taxa paga
  • Código de confirmação para autorizar a retirada
03

Fechamento

Comprovante, avaliação e certificado de destinação

Na volta, o coletor registra os 47 litros que saíram de fato e anexa o comprovante do Pix feito ao gerador. O app finaliza a coleta e gera o certificado de destinação em PDF. Mariana abre o comprovante, marca como válido, dá cinco estrelas e encontra o certificado novo na lista, pronto para visualizar.

  • Quantidade real registrada no fim da coleta
  • Comprovante conferido pelo gerador: válido ou inválido
  • Certificado em PDF montado no app sobre o template da Ciclou
04

Acompanhamento

Impacto, estatísticas e histórico dos dois lados

O gerador acompanha quantos litros já destinou, quanta água deixou de ser contaminada e quanto CO₂ foi evitado, além do histórico com o status de cada comprovante. O coletor tem as próprias estatísticas, o histórico de coletas e o espaço para as licenças ambientais.

  • Água preservada e CO₂ evitado calculados a partir dos litros
  • Histórico com coletor, quantidade e comprovante
  • Documentos do coletor: IBAMA, licença, alvará e AVCB
05

Site

ciclou.app: o produto explicado para quem gera e para quem coleta

O site em React apresenta o ciclo em quatro passos, fala com residências, restaurantes, coletores e empresas, mostra os recursos com telas do app e explica por que o descarte correto importa. Páginas próprias para restaurantes e coletores, blog e perguntas frequentes completam a parte de SEO.

  • Seções interativas de recursos e do ciclo em ação
  • Páginas para restaurantes, coletores e temas de busca
  • Termos de uso e política de privacidade
Site

05

5 fluxos em vídeo

Cada vídeo mostra uma tarefa completa, de ponta a ponta. Clique para assistir com controles.

06

Funcionalidades Principais

01

Dois perfis no mesmo app

Cadastro em quatro etapas para gerador ou coletor, com validação de CPF/CNPJ e endereço preenchido pelo CEP. Depois do login, o perfil define o painel: pedidos e impacto para o gerador; solicitações, coletas e estatísticas para o coletor.

02

Pedido com prazo para propostas

O gerador informa a quantidade (mínimo de 20 litros), o prazo para receber propostas (15 min a 2 h), dias e horário de retirada e a chave Pix para receber pelo óleo.

03

Propostas e aceite

Coletores enviam preço por litro e tempo máximo de coleta, com o total e a taxa da plataforma calculados na hora. O gerador compara as propostas lado a lado e aceita ou recusa.

04

Taxa via Pix e código de chegada

Aceita a proposta, uma Cloud Function gera o Pix da taxa no Mercado Pago. Paga a taxa, o coletor vê o endereço completo, confirma os dados e avisa que está a caminho; na chegada, o gerador digita o código de confirmação.

05

Comprovante, avaliação e certificado

O coletor registra a quantidade real e envia o comprovante do pagamento ao gerador. O app gera o certificado de destinação em PDF, e o gerador confere o comprovante e avalia o coletor.

06

Notificações e impacto

Notificações dentro do app e push pelo Firebase a cada proposta, aceite, chegada e fim de coleta. Painéis de impacto com litros coletados, água preservada e CO₂ evitado.

07

Telas do sistema

Capturas reais do produto, organizadas por módulo. Clique em qualquer tela para ampliar.

Dois painéis: pedidos e impacto para o gerador, novas solicitações para o coletor
O pedido do gerador, o detalhe no celular do coletor e a proposta com taxa calculada
Propostas comparadas lado a lado e as coletas ativas do coletor
Pix da taxa, dados para pagar o gerador e o código de confirmação
Código digitado pelo gerador, quantidade real e comprovante do Pix
Coleta finalizada, comprovante conferido e avaliação do coletor
O certificado em PDF que o app monta ao finalizar a coleta
Certificados do gerador e a visualização do PDF no app
Impacto do gerador, estatísticas do coletor e notificações
Histórico do gerador, detalhe da coleta e histórico do coletor
Login, cadastro em quatro etapas e licenças do coletor
O início do site, com a chamada para a Play Store

08

No celular

As telas do app dos dois lados: primeiro o gerador, depois o coletor. Os dados são fictícios — o Restaurante Sabor da Vila, a Mariana e o coletor Diego, da Recicla Verde, foram criados só para a demonstração.

Gerador · Entrar
Gerador · Cadastro
Gerador · Início
Gerador · Nova solicitação
Gerador · Horário e Pix
Gerador · Propostas
Gerador · Código
Gerador · Comprovante
Gerador · Avaliação
Gerador · Certificados
Gerador · Certificado em PDF
Gerador · Impacto
Gerador · Histórico
Gerador · Detalhe da coleta
Gerador · Notificações
Gerador · Perfil
Coletor · Início
Coletor · Solicitação
Coletor · Proposta
Coletor · Coletas ativas
Coletor · Taxa via Pix
Coletor · Próximos passos
Coletor · Código
Coletor · Conclusão
Coletor · Comprovante
Coletor · Finalizada
Coletor · Estatísticas
Coletor · Histórico
Coletor · Documentos
Coletor · Perfil

09

Tecnologias

Front-end

FlutterDartReact 19 (site)ViteTailwind CSS

Back-end

Firebase Cloud FunctionsNode.js

Banco de Dados

Cloud FirestoreFirebase Storage

Deploy

Google Play StoreFirebase

Integrações

Mercado Pago (Pix)Firebase AuthenticationFirebase Cloud MessagingViaCEP

Bibliotecas

pdfsyncfusion_flutter_pdfviewerflutter_local_notificationsapp_linksshare_plusframer-motion

10

Decisões de Design

Verde da reciclagem nas barras e botões, cartões brancos arredondados sobre cinza-claro e ações grandes no topo de cada painel. O gerador vê primeiro o que está em aberto — cada pedido com status em cor, cronômetro do prazo e número de propostas. O coletor vê primeiro as solicitações novas, com volume, bairro e o tempo que falta para o prazo. O processo de coleta é uma tela só, que muda de conteúdo conforme o status: taxa, próximos passos, código, conclusão.

11

Desafios Técnicos

Encadear pagamento, logística e documento sem o usuário se perder. O aceite dispara a geração do Pix da taxa numa Cloud Function; a validação (ou o webhook do Mercado Pago) libera o endereço e gera o código de confirmação; o código digitado pelo gerador muda a coleta para aprovada; e a finalização sobe o comprovante para o Storage, grava a quantidade real e monta o certificado em PDF — com o pacote pdf, sobre o template da Ciclou — antes de registrá-lo para o gerador.

12

Resultados

  • Aplicativo publicado e disponível na Google Play Store, com o site ciclou.app no ar
  • O ciclo inteiro dentro do app: pedido, propostas, aceite, taxa via Pix, código de chegada, comprovante, avaliação e certificado
  • Certificado de destinação em PDF gerado pelo próprio app ao finalizar a coleta
  • Uma base Flutter para os dois lados do marketplace — gerador e coletor

13

Aprendizados

  • Marketplace de dois lados é, antes de tudo, uma máquina de estados: pendente, em andamento, aprovado, finalizada — cada tela só existe para mover a coleta de um estado para o próximo
  • Dinheiro no meio muda o desenho: o endereço completo só aparece depois que a taxa foi paga, e o código de confirmação só existe depois do Pix aprovado
  • Firebase como backend: Firestore com listeners em tempo real para status e propostas, Storage para comprovantes e certificados, Functions para o que não pode rodar no celular (Pix, webhook, push)
  • Deploy na Google Play Store: configuração de release, assinatura e publicação

Gostou desse projeto?

Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.

WhatsAppEnviar mensagem

Outros projetos

Ver todos
Capa — VendaíPrévia em vídeo

SaaS

Vendaí

Sistema completo de ponto de venda para petshops, casas de ração, mercearias e lojas de bairro: PDV com leitor de código de barras, caixa, estoque, fiado, contas a pagar, PIX, 50+ relatórios e Recebimento Seguro — tudo funcionando sem internet, com sincronização para a nuvem e app de gestão no celular.

Capa — EA CentralPrévia em vídeo

Sistema Web

EA Central

Loja B2B de acessórios para celular: catálogo com 349 produtos e filtro por aparelho (293 modelos), preço progressivo por quantidade, carrinho com escolha de cores, frete real e checkout que abre o WhatsApp com o pedido pronto. Painel completo para o lojista, exportação Excel/PDF e medição Meta Pixel + Conversions API.

Capa — PetzaraPrévia em vídeo

SaaS

Petzara

Sistema completo de gestão para petshops: agenda com status em tempo real via Socket.io, clientes, pets, financeiro, colaboradores e assinatura mensal/anual via Stripe — PWA instalável no celular ou computador.