cat cactusia.ma
06 / 19
Cactusia
A Moroccan online shop for cacti and their pots: pick a plant, try it in every pot colour, order.
- role
- full-stack developer, with @tchisama
- year
- 2021-23
- access
- -rwxr-xr-x (open source)
- problem
- A Moroccan cactus shop sells each plant in a choice of pots. Customers wanted to see the pairing before ordering; the owners needed to follow every order to the door.
- approach
- Plants and pots as separate layers, so every combination exists without a photo of each; delivery priced per city; a Firebase back office for the orders.
- outcome
- My first client project, built with @tchisama: the shop and its dashboard on Firebase, deployed from GitHub.
TL;DR
// overview
My first client project, built with @tchisama. Customers preview each plant in each pot colour before they buy, and prices factor in delivery fees and quantity discounts. The order flow is localized and confirms the cart before anything is sent.
Behind the shop, a real-time Firebase dashboard tracks every order from confirmed to delivered or cancelled, with comments on each one, revenue totals, and the stock of plants and pots.
// try every pot
Each cactus and each pot is its own image, with a shadow layer under them. The viewer stacks them, so a new pot colour shows up under every plant at once. On the home page it shuffles a new pair every four seconds.
// the order flow
Delivery is priced by city, quantity discounts apply, and the cart is confirmed before anything is sent. While an order is being submitted the button freezes, so nobody orders twice.
// the back office
Orders sit in a data grid whose status column runs from confirmed to delivered or cancelled. Each order takes comments, revenue adds itself up, the table exports to Excel, and a helper drafts the WhatsApp message that confirms an order with the customer.
The shop imports handyscript, my own JavaScript helpers library, so the library got tested on a real storefront.
// stack
- react
- firebase
- tailwind
- mui
- zustand
- vite