Saltar al contenido
Lucas Batista
AppEn producción2024

Ciclou

App Flutter en Google Play que conecta a quienes desechan aceite de cocina con recolectores — de la propuesta al certificado de destino final

Ver proyecto en vivoGoogle Play5 flujos en video
FlutterDartReact 19 (site)ViteTailwind CSSFirebase Cloud Functions
Funciona enAndroidSitio ciclou.app
perfiles en la misma app: generador y recolector
2
Cloud Functions: Pix, webhook, push y limpieza
12
tramos de tarifa por volumen, de R$ 7,50 a R$ 20
6
volumen mínimo por solicitud
20 L

01

Visión General

Ciclou organiza una recolección que suele hacerse por teléfono y sin ningún registro. El generador indica cuántos litros tiene, hasta cuándo acepta propuestas y en qué días y horarios se puede retirar el aceite. Los recolectores ven los pedidos abiertos, envían un precio por litro y un plazo, y el generador elige. Desde la aceptación, la app guía el resto: el recolector paga la tarifa de la plataforma con un Pix generado por Mercado Pago, confirma sus datos y avisa que va en camino; al llegar, el generador ingresa el código de confirmación; después del retiro, el recolector registra la cantidad real y envía el comprobante de pago al generador, quien lo revisa, califica al recolector y recibe el certificado de destino final en PDF. Todo funciona sobre Firebase — Auth, Firestore en tiempo real, Storage, Cloud Functions y notificaciones push — y el sitio ciclou.app, hecho en React, presenta el producto y lleva a la Play Store.

Mi rol

Desarrollador Front-End y Mobile — responsable de la interfaz en Flutter, los flujos de usuario y la integración con Firebase. Proyecto desarrollado en conjunto con Rafael Almeida (back-end y diseño).

Categoría

App

Año

2024

Estado

En producción

Plataformas

AndroidSitio ciclou.app

La app en Flutter habla directamente con Firebase. Lo que no puede correr en el celular — generar y validar el Pix, recibir el webhook de Mercado Pago, enviar push — queda en las Cloud Functions. El sitio en React presenta el producto y lleva a la Play Store.

App Flutter

generador y recolector

Firestore en tiempo realpdf (certificado)Syncfusion PDF ViewerNotificaciones locales

Firebase

Auth, Firestore y Storage

Recolecciones y propuestasNotificacionesComprobantesCertificados

Cloud Functions

12 funciones en Node.js

Pix de la tarifaWebhook de Mercado PagoPush por eventoLimpieza de pedidos vencidos

Sitio ciclou.app

React 19 + Vite

Tailwind CSSframer-motionPáginas para restaurantes y recolectoresBlog

Sincronización: La dirección completa del generador solo se libera al recolector después de pagada la tarifa de la plataforma.

02

El Problema

Los restaurantes, condominios y escuelas necesitan dar el destino correcto al aceite de fritura, y muchos deben comprobarlo. Pero encontrar un recolector depende del boca a boca, el precio se acuerda por mensajes, nadie registra cuánto se retiró realmente y el comprobante de desecho casi nunca existe.

03 — La Solución

Un marketplace de recolección en Flutter con dos perfiles sobre la misma base: el generador hace el pedido y elige entre las propuestas; el recolector encuentra pedidos, propone precio y plazo y conduce la recolección paso a paso. Pago de la tarifa mediante Pix, código de confirmación al llegar, comprobante de pago para el generador y certificado de destino final generado al finalizar la recolección.

04

Por dentro del producto

La app real funcionando con datos ficticios en el Firebase Emulator, grabada en dos celulares al mismo tiempo: a la izquierda el generador, a la derecha el recolector. El Pix es de demostración — ninguna pantalla es un mockup.

01

Pedido

El restaurante pide, el recolector propone, el restaurante elige

Mariana indica 45 litros y da una hora para recibir propuestas; los días de retiro, el horario y la clave Pix ya vienen de su perfil. Diego abre la app, ve el pedido en la lista de solicitudes nuevas y envía R$ 2,40 por litro con seis horas para recolectar. Del otro lado, la tarjeta del pedido pasa a mostrar la propuesta — y al aceptarla, la recolección cambia a en curso.

  • Mínimo de 20 litros y plazo de 15 min a 2 h para propuestas
  • Total y tarifa de la plataforma calculados mientras el recolector escribe
  • Propuestas comparadas lado a lado, con aceptar y rechazar
02

Recolección

Tarifa por Pix, aviso de salida y código al llegar

El recolector abre el proceso de recolección y encuentra el Pix de la tarifa. Una vez pagado, la app libera la dirección y los datos para pagar al generador; él confirma CPF y RG — nombre, vehículo y placa vienen del perfil — y toca Voy en camino. Aparece el código de confirmación; el generador lo ingresa en su propio celular y la recolección pasa a aprobada.

  • Pix generado por una Cloud Function en Mercado Pago
  • Dirección completa solo después de pagada la tarifa
  • Código de confirmación para autorizar el retiro
03

Cierre

Comprobante, calificación y certificado de destino final

De regreso, el recolector registra los 47 litros que realmente se retiraron y adjunta el comprobante del Pix hecho al generador. La app finaliza la recolección y genera el certificado de destino final en PDF. Mariana abre el comprobante, lo marca como válido, da cinco estrellas y encuentra el certificado nuevo en la lista, listo para ver.

  • Cantidad real registrada al final de la recolección
  • Comprobante revisado por el generador: válido o inválido
  • Certificado en PDF armado en la app sobre la plantilla de Ciclou
04

Seguimiento

Impacto, estadísticas e historial para los dos lados

El generador sigue cuántos litros ya destinó, cuánta agua dejó de contaminarse y cuánto CO₂ se evitó, además del historial con el estado de cada comprobante. El recolector tiene sus propias estadísticas, el historial de recolecciones y el espacio para las licencias ambientales.

  • Agua preservada y CO₂ evitado calculados a partir de los litros
  • Historial con recolector, cantidad y comprobante
  • Documentos del recolector: IBAMA, licencia, permiso y AVCB
05

Sitio web

ciclou.app: el producto explicado para quien genera y para quien recolecta

El sitio en React presenta el ciclo en cuatro pasos, habla con hogares, restaurantes, recolectores y empresas, muestra las funciones con pantallas de la app y explica por qué importa el desecho correcto. Páginas propias para restaurantes y recolectores, blog y preguntas frecuentes completan la parte de SEO.

  • Secciones interactivas de funciones y del ciclo en acción
  • Páginas para restaurantes, recolectores y temas de búsqueda
  • Términos de uso y política de privacidad
Sitio web

05

5 flujos en video

Cada video muestra una tarea completa, de principio a fin. Haz clic para verlo con controles.

06

Funcionalidades Principales

01

Dos perfiles en la misma app

Registro en cuatro pasos para generador o recolector, con validación de CPF/CNPJ y dirección completada a partir del CEP (código postal). Después de iniciar sesión, el perfil define el panel: pedidos e impacto para el generador; solicitudes, recolecciones y estadísticas para el recolector.

02

Pedido con plazo para propuestas

El generador indica la cantidad (mínimo de 20 litros), el plazo para recibir propuestas (de 15 min a 2 h), los días y el horario de retiro y la clave Pix para recibir el pago por el aceite.

03

Propuestas y aceptación

Los recolectores envían precio por litro y tiempo máximo de recolección, con el total y la tarifa de la plataforma calculados al instante. El generador compara las propuestas lado a lado y las acepta o rechaza.

04

Tarifa por Pix y código de llegada

Aceptada la propuesta, una Cloud Function genera el Pix de la tarifa en Mercado Pago. Pagada la tarifa, el recolector ve la dirección completa, confirma sus datos y avisa que va en camino; al llegar, el generador ingresa el código de confirmación.

05

Comprobante, calificación y certificado

El recolector registra la cantidad real y envía el comprobante de pago al generador. La app genera el certificado de destino final en PDF, y el generador revisa el comprobante y califica al recolector.

06

Notificaciones e impacto

Notificaciones dentro de la app y push por Firebase en cada propuesta, aceptación, llegada y recolección finalizada. Paneles de impacto con litros recolectados, agua preservada y CO₂ evitado.

07

Pantallas del sistema

Capturas reales del producto, organizadas por módulo. Haz clic en cualquier pantalla para ampliarla.

Dos paneles: pedidos e impacto para el generador, solicitudes nuevas para el recolector
El pedido del generador, el detalle en el celular del recolector y la propuesta con la tarifa calculada
Propuestas comparadas lado a lado y las recolecciones activas del recolector
Pix de la tarifa, datos para pagar al generador y el código de confirmación
Código ingresado por el generador, cantidad real y comprobante del Pix
Recolección finalizada, comprobante revisado y calificación del recolector
El certificado en PDF que la app arma al finalizar la recolección
Los certificados del generador y la visualización del PDF en la app
Impacto del generador, estadísticas del recolector y notificaciones
Historial del generador, detalle de la recolección e historial del recolector
Inicio de sesión, registro en cuatro pasos y licencias del recolector
El inicio del sitio, con el llamado a la Play Store

08

En el celular

Las pantallas de la app de los dos lados: primero el generador, después el recolector. Los datos son ficticios — el Restaurante Sabor da Vila, Mariana y el recolector Diego, de Recicla Verde, fueron creados solo para la demostración.

Generador · Iniciar sesión
Generador · Registro
Generador · Inicio
Generador · Nueva solicitud
Generador · Horario y Pix
Generador · Propuestas
Generador · Código
Generador · Comprobante
Generador · Calificación
Generador · Certificados
Generador · Certificado en PDF
Generador · Impacto
Generador · Historial
Generador · Detalle de la recolección
Generador · Notificaciones
Generador · Perfil
Recolector · Inicio
Recolector · Solicitud
Recolector · Propuesta
Recolector · Recolecciones activas
Recolector · Tarifa por Pix
Recolector · Próximos pasos
Recolector · Código
Recolector · Finalización
Recolector · Comprobante
Recolector · Finalizada
Recolector · Estadísticas
Recolector · Historial
Recolector · Documentos
Recolector · Perfil

09

Tecnologías

Front-end

FlutterDartReact 19 (site)ViteTailwind CSS

Back-end

Firebase Cloud FunctionsNode.js

Base de datos

Cloud FirestoreFirebase Storage

Despliegue

Google Play StoreFirebase

Integraciones

Mercado Pago (Pix)Firebase AuthenticationFirebase Cloud MessagingViaCEP

Bibliotecas

pdfsyncfusion_flutter_pdfviewerflutter_local_notificationsapp_linksshare_plusframer-motion

10

Decisiones de Diseño

Verde de reciclaje en las barras y los botones, tarjetas blancas redondeadas sobre gris claro y acciones grandes en la parte superior de cada panel. El generador ve primero lo que está abierto — cada pedido con su estado en color, cronómetro del plazo y número de propuestas. El recolector ve primero las solicitudes nuevas, con volumen, barrio y el tiempo que falta para el plazo. El proceso de recolección es una sola pantalla que cambia de contenido según el estado: tarifa, próximos pasos, código, finalización.

11

Desafíos Técnicos

Encadenar pago, logística y documento sin que el usuario se pierda. La aceptación dispara la generación del Pix de la tarifa en una Cloud Function; la validación (o el webhook de Mercado Pago) libera la dirección y genera el código de confirmación; el código ingresado por el generador pasa la recolección a aprobada; y la finalización sube el comprobante a Storage, guarda la cantidad real y arma el certificado en PDF — con el paquete pdf, sobre la plantilla de Ciclou — antes de registrarlo para el generador.

12

Resultados

  • App publicada y disponible en Google Play Store, con el sitio ciclou.app en línea
  • El ciclo completo dentro de la app: pedido, propuestas, aceptación, tarifa por Pix, código de llegada, comprobante, calificación y certificado
  • Certificado de destino final en PDF generado por la propia app al finalizar la recolección
  • Una sola base en Flutter para los dos lados del marketplace — generador y recolector

13

Aprendizajes

  • Un marketplace de dos lados es, ante todo, una máquina de estados: pendiente, en curso, aprobada, finalizada — cada pantalla existe solo para llevar la recolección de un estado al siguiente
  • Tener dinero de por medio cambia el diseño: la dirección completa solo aparece después de pagada la tarifa, y el código de confirmación solo existe después de aprobado el Pix
  • Firebase como backend: Firestore con listeners en tiempo real para estados y propuestas, Storage para comprobantes y certificados, Functions para lo que no puede correr en el celular (Pix, webhook, push)
  • Despliegue en Google Play Store: configuración de release, firma y publicación

¿Te gustó este proyecto?

¿Tienes una idea parecida o quieres construir algo diferente? Hablemos.

WhatsAppEnviar mensaje

Otros proyectos

Ver todos
Portada — VendaíVista previa en video

SaaS

Vendaí

Sistema completo de punto de venta para pet shops, tiendas de alimento para animales, almacenes y comercios de barrio: POS con lector de código de barras, caja, inventario, fiado (venta a crédito), cuentas por pagar, PIX (el sistema de pagos instantáneos de Brasil), más de 50 informes y Recepción Segura — todo funcionando sin internet, con sincronización a la nube y una app de gestión en el celular.

Portada — EA CentralVista previa en video

Sistema web

EA Central

Tienda B2B de accesorios para celulares: catálogo con 349 productos y filtro por dispositivo (293 modelos), precio progresivo por cantidad, carrito con elección de colores, flete real y un checkout que abre WhatsApp con el pedido listo. Panel completo para el comerciante, exportación a Excel/PDF y medición con Meta Pixel + Conversions API.

Portada — PetzaraVista previa en video

SaaS

Petzara

Sistema completo de gestión para petshops: agenda con estado en tiempo real mediante Socket.io, clientes, mascotas, finanzas, colaboradores y suscripción mensual/anual con Stripe — PWA instalable en el celular o en la computadora.