Project · Founding Frontend Engineer
DiscontinuedCyclei
Reusable Packaging Pickup Service
Cyclei pairs curbside collection of reusable containers with regular waste pickup. Customers sign up, pay a one-time activation fee, buy from partner businesses offering reusable packaging, fill a Cyclei bag, and clip it to their recycling bin handle on trash day. A fresh return bag is delivered to their door, and the account shows returned reusables plus deposits or rewards.
As the founding frontend engineer, Donray built the customer-facing web app: multi-step onboarding with address validation and Stripe setup intents, a dashboard with an impact tracker counting single-use containers saved and a wallet balance card, bag tracking across collected, sorted, and lost states, cart checkout with coupons and invoices, wallet payouts with pending, paid, and failed statuses, and account management with pickup pause and resume.
The app is Vue 3.5 with Vite 7 and TypeScript, using Apollo Client GraphQL against a Django backend, vee-validate forms with a custom input component library, and a published Vue component library for the UI system. Vitest unit tests and ESLint/Stylelint gates run in CI. The service has since been discontinued.
Features
- Multi-step onboarding: email, address validation, confirmation, Stripe payment
- Dashboard with impact tracker (single-use containers saved) and wallet balance
- Bag tracking across collected, sorted, lost, assigned, and delivered states
- Cart checkout with activation fees, coupon codes, and invoices
- Wallet payouts with pending, paid, and failed statuses
- Account management: settings, addresses, pickup pause and resume
- Staff admin section with route management and QR-code bag scanning
Frequently asked questions
How did Cyclei's pickup service work?
Customers signed up for curbside collection, paid a one-time activation fee, bought from partner businesses offering reusable packaging, filled a Cyclei bag, and clipped it to their recycling bin handle on trash day. A fresh return bag was then delivered to their door.
How did customers track their environmental impact?
The dashboard showed a running count of single-use containers saved, alongside a wallet balance reflecting deposits and rewards earned from returned containers.
Could customers cash out their rewards?
Yes. The payout section let users request payouts of their wallet balance to a chosen destination, with request statuses of pending, paid, or failed.
What was the app built with?
Vue 3 and Vite with TypeScript, GraphQL via Apollo Client, Stripe for payments, vee-validate forms, and a published Vue component library, with Vitest unit tests and ESLint/Stylelint gates.
Is Cyclei still operating?
No, the service has been discontinued.