Skip to content
Lucas Batista
AppLive2024

Ciclou

Flutter app on Google Play that connects people who dispose of cooking oil with collectors — from proposal to disposal certificate

View live projectGoogle Play5 video walkthroughs
FlutterDartReact 19 (site)ViteTailwind CSSFirebase Cloud Functions
Runs onAndroidciclou.app website
profiles in the same app: generator and collector
2
Cloud Functions: Pix, webhook, push, and cleanup
12
fee tiers by volume, from R$ 7,50 to R$ 20
6
minimum volume per request
20 L

01

Overview

Ciclou organizes a pickup that usually happens over the phone with no record. The generator says how many liters they have, until when they accept proposals, and on which days and times the oil can be picked up. Collectors see the open requests, send a price per liter and a deadline, and the generator chooses. Once a proposal is accepted, the app guides the rest: the collector pays the platform fee through a Pix generated by Mercado Pago, confirms their details, and lets the generator know they are on the way; on arrival, the generator enters the confirmation code; after the pickup, the collector records the actual quantity and sends the payment receipt to the generator, who checks it, rates the collector, and receives the disposal certificate as a PDF. Everything runs on Firebase — Auth, real-time Firestore, Storage, Cloud Functions, and push notifications — and the ciclou.app website, built in React, presents the product and leads to the Play Store.

My role

Front-End & Mobile Developer — responsible for the Flutter interface, user flows, and Firebase integration. Project developed in partnership with Rafael Almeida (back-end and design).

Category

App

Year

2024

Status

Live

Platforms

Androidciclou.app website

The Flutter app talks directly to Firebase. What can't run on the phone — generating and validating the Pix, receiving the Mercado Pago webhook, sending push — lives in Cloud Functions. The React website presents the product and leads to the Play Store.

Flutter app

generator and collector

Real-time Firestorepdf (certificate)Syncfusion PDF ViewerLocal notifications

Firebase

Auth, Firestore, and Storage

Pickups and proposalsNotificationsReceiptsCertificates

Cloud Functions

12 functions in Node.js

Fee PixMercado Pago webhookPush per eventCleanup of expired requests

ciclou.app website

React 19 + Vite

Tailwind CSSframer-motionPages for restaurants and collectorsBlog

Sync: The generator's full address is only released to the collector after the platform fee is paid.

02

The Problem

Restaurants, condos, and schools need to dispose of frying oil properly, and many have to prove it. But finding a collector happens by word of mouth, the price is agreed over messages, nobody records how much was actually picked up, and proof of disposal rarely exists.

03 — The Solution

A collection marketplace in Flutter with two profiles on the same codebase: the generator makes a request and chooses among proposals; the collector finds requests, proposes a price and deadline, and runs the pickup step by step. Fee payment via Pix, a confirmation code on arrival, a payment receipt for the generator, and a disposal certificate generated when the pickup is completed.

04

Inside the product

The real app running with fictional data on the Firebase Emulator, recorded on two phones at the same time: the generator on the left, the collector on the right. The Pix is a demo — no screen is a mockup.

01

Request

The restaurant requests, the collector proposes, the restaurant chooses

Mariana enters 45 liters and gives one hour to receive proposals; pickup days, time, and Pix key already come from her profile. Diego opens the app, sees the request in the list of new requests, and sends R$ 2,40 per liter with six hours to collect. On the other side, the request card now shows the proposal — and accepting it moves the pickup to in progress.

  • Minimum of 20 liters and a 15 min to 2 h deadline for proposals
  • Total and platform fee calculated as the collector types
  • Proposals compared side by side, with accept and decline
02

Pickup

Fee via Pix, departure notice, and code on arrival

The collector opens the pickup process and finds the fee Pix. Once paid, the app unlocks the address and the details for paying the generator; the collector confirms CPF and RG — name, vehicle, and license plate come from the profile — and taps On My Way. The confirmation code appears; the generator enters the code on their own phone and the pickup becomes approved.

  • Pix generated by a Cloud Function on Mercado Pago
  • Full address only after the fee is paid
  • Confirmation code to authorize the pickup
03

Closing

Receipt, rating, and disposal certificate

On the way back, the collector records the 47 liters that were actually picked up and attaches the receipt of the Pix sent to the generator. The app completes the pickup and generates the disposal certificate as a PDF. Mariana opens the receipt, marks it as valid, gives five stars, and finds the new certificate in the list, ready to view.

  • Actual quantity recorded at the end of the pickup
  • Receipt checked by the generator: valid or invalid
  • PDF certificate built in the app on top of the Ciclou template
04

Tracking

Impact, statistics, and history for both sides

The generator tracks how many liters they have already disposed of, how much water was kept from being contaminated, and how much CO₂ was avoided, plus the history with the status of each receipt. The collector has their own statistics, pickup history, and a place for environmental licenses.

  • Water preserved and CO₂ avoided calculated from the liters
  • History with collector, quantity, and receipt
  • Collector documents: IBAMA, license, permit, and AVCB
05

Website

ciclou.app: the product explained for those who generate and those who collect

The React website presents the cycle in four steps, speaks to households, restaurants, collectors, and businesses, shows the features with app screens, and explains why proper disposal matters. Dedicated pages for restaurants and collectors, a blog, and an FAQ round out the SEO side.

  • Interactive sections for features and the cycle in action
  • Pages for restaurants, collectors, and search topics
  • Terms of use and privacy policy
Website

05

5 video walkthroughs

Each video shows a complete task, end to end. Click to watch with controls.

06

Key Features

01

Two profiles in one app

Four-step sign-up for generator or collector, with CPF/CNPJ validation and address autofilled from the CEP (postal code). After login, the profile determines the dashboard: requests and impact for the generator; requests, pickups, and statistics for the collector.

02

Request with a proposal deadline

The generator enters the quantity (minimum of 20 liters), the deadline for receiving proposals (15 min to 2 h), pickup days and times, and the Pix key to be paid for the oil.

03

Proposals and acceptance

Collectors send a price per liter and a maximum pickup time, with the total and the platform fee calculated instantly. The generator compares proposals side by side and accepts or declines.

04

Fee via Pix and arrival code

Once the proposal is accepted, a Cloud Function generates the fee Pix on Mercado Pago. After the fee is paid, the collector sees the full address, confirms their details, and lets the generator know they are on the way; on arrival, the generator enters the confirmation code.

05

Receipt, rating, and certificate

The collector records the actual quantity and sends the payment receipt to the generator. The app generates the disposal certificate as a PDF, and the generator checks the receipt and rates the collector.

06

Notifications and impact

In-app notifications and Firebase push for every proposal, acceptance, arrival, and completed pickup. Impact dashboards with liters collected, water preserved, and CO₂ avoided.

07

Product screens

Real screenshots of the product, organized by module. Click any screen to enlarge it.

Two dashboards: requests and impact for the generator, new requests for the collector
The generator's request, the detail on the collector's phone, and the proposal with the fee calculated
Proposals compared side by side and the collector's active pickups
Fee Pix, details for paying the generator, and the confirmation code
Code entered by the generator, actual quantity, and Pix receipt
Pickup completed, receipt checked, and collector rating
The PDF certificate the app builds when the pickup is completed
The generator's certificates and the in-app PDF viewer
Generator impact, collector statistics, and notifications
Generator history, pickup detail, and collector history
Login, four-step sign-up, and collector licenses
The website's home, with the call to action for the Play Store

08

On mobile

The app screens for both sides: generator first, then collector. The data is fictional — Restaurante Sabor da Vila, Mariana, and the collector Diego, from Recicla Verde, were created just for the demo.

Generator · Sign in
Generator · Sign-up
Generator · Home
Generator · New request
Generator · Time and Pix
Generator · Proposals
Generator · Code
Generator · Receipt
Generator · Rating
Generator · Certificates
Generator · PDF certificate
Generator · Impact
Generator · History
Generator · Pickup detail
Generator · Notifications
Generator · Profile
Collector · Home
Collector · Request
Collector · Proposal
Collector · Active pickups
Collector · Fee via Pix
Collector · Next steps
Collector · Code
Collector · Completion
Collector · Receipt
Collector · Completed
Collector · Statistics
Collector · History
Collector · Documents
Collector · Profile

09

Technologies

Front-end

FlutterDartReact 19 (site)ViteTailwind CSS

Back-end

Firebase Cloud FunctionsNode.js

Database

Cloud FirestoreFirebase Storage

Deployment

Google Play StoreFirebase

Integrations

Mercado Pago (Pix)Firebase AuthenticationFirebase Cloud MessagingViaCEP

Libraries

pdfsyncfusion_flutter_pdfviewerflutter_local_notificationsapp_linksshare_plusframer-motion

10

Design Decisions

Recycling green on bars and buttons, rounded white cards on light gray, and large actions at the top of each dashboard. The generator first sees what is open — each request with a color-coded status, a deadline timer, and the number of proposals. The collector first sees new requests, with volume, neighborhood, and the time left until the deadline. The pickup process is a single screen that changes its content according to the status: fee, next steps, code, completion.

11

Technical Challenges

Chaining payment, logistics, and documents without the user getting lost. Acceptance triggers the generation of the fee Pix in a Cloud Function; validation (or the Mercado Pago webhook) unlocks the address and generates the confirmation code; the code entered by the generator moves the pickup to approved; and completion uploads the receipt to Storage, records the actual quantity, and builds the PDF certificate — with the pdf package, on top of the Ciclou template — before registering it for the generator.

12

Results

  • App published and available on the Google Play Store, with the ciclou.app website live
  • The entire cycle inside the app: request, proposals, acceptance, fee via Pix, arrival code, receipt, rating, and certificate
  • Disposal certificate generated as a PDF by the app itself when the pickup is completed
  • A single Flutter codebase for both sides of the marketplace — generator and collector

13

Learnings

  • A two-sided marketplace is, above all, a state machine: pending, in progress, approved, completed — every screen exists only to move the pickup from one state to the next
  • Money in the middle changes the design: the full address only appears after the fee is paid, and the confirmation code only exists after the Pix is approved
  • Firebase as the backend: Firestore with real-time listeners for status and proposals, Storage for receipts and certificates, Functions for what can't run on the phone (Pix, webhook, push)
  • Deploying to the Google Play Store: release configuration, signing, and publishing

Liked this project?

Have a similar idea or want to build something different? Let's talk.

WhatsAppSend a message

More projects

View all
Cover — VendaíVideo preview

SaaS

Vendaí

A complete point-of-sale system for pet shops, feed stores, grocery stores, and neighborhood shops: POS with barcode scanner, cash register, inventory, customer tabs (fiado), accounts payable, PIX (Brazil's instant payment system), 50+ reports, and Secure Receiving — all working without internet, with cloud sync and a mobile management app.

Cover — EA CentralVideo preview

Web system

EA Central

B2B store for mobile phone accessories: a catalog of 349 products with filtering by device (293 models), progressive pricing by quantity, a cart with color selection, real shipping rates, and a checkout that opens WhatsApp with the order ready to send. Full admin panel for the store owner, Excel/PDF export, and Meta Pixel + Conversions API tracking.

Cover — PetzaraVideo preview

SaaS

Petzara

A complete management system for pet shops: a schedule with real-time status via Socket.io, clients, pets, finances, team members, and monthly/annual subscriptions via Stripe — an installable PWA for phone or computer.