Cantant

React RecoilTypescriptTailwind Tanstack ·Live
Cantant
Cantant
Cantant

Project Summary

Key Features:

  • Add and manage inventory efficiently
  • Record and manage transactions, including sales and expenses
  • Generate receipts and invoices seamlessly
  • Manage customers and suppliers with ease
  • Track tasks and set business reminders with a built-in to-do system
  • Create and monitor budgets with real-time tracking
  • Access robust, easy-to-understand reports
  • Add and manage staff with customizable roles and permissions
  • Support for multiple businesses under a single account
  • Seamless payment integration with Stripe and Paddle

See screenshots below

Tech Stack:

React, Recoil, Typescript, Tailwind, Chart.js, Tanstack

Live Link: Cantant Web (full functionality requires account access)

Video Tutorial / Demo: Watch video here

GitHub: Private


Overview

Cantant is a business management platform for solo entrepreneurs and small businesses. I joined as the lead frontend engineer to build the desktop app from scratch, keeping the best of the mobile experience while improving scalability, usability, and performance.

What started as building screens quickly evolved into shaping the product: how users moved through it, how the architecture scaled, and how the engineering team collaborated. It became a project where I grew not just as a developer, but as someone who understands how product, design, and technology support real businesses.

Roles and Responsibilities

  • UI system from scratch: Designed reusable tables, forms, modals, and layouts. Built a predictable design-to-production pipeline from Figma to React components.
  • State management that scales: Introduced Recoil for predictable global state and reduced unnecessary re-renders.
  • Payments and critical flows: Integrated Paystack and Paddle for stable subscription and transaction flows with robust error handling.
  • Data that tells a story: Rebuilt analytics dashboards using chart.js with optimized data-fetching and caching for fast, interactive charts.
    Challenges & Solutions
  • Scaling mobile patterns to desktop: Redesigned layouts to feel intentional and usable on larger screens.
  • Inconsistent components: Built a unified UI system for reusability and consistency.
  • Messy global state: Implemented Recoil to simplify and stabilize complex flows.
  • Slow analytics: Optimized data queries and chart rendering for real-time insights.
  • Critical payments: Ensured reliability and smooth user experience across subscription and transaction flows.


Impact

  • Enabled thousands of businesses to manage their businesses efficiently with a reliable desktop platform.
  • Reduced development friction: new features shipped faster with fewer bugs.
  • Dashboard performance improved; charts became faster and more actionable.
  • Payment flows stabilized, resulting in a reduction of failed attempts and support tickets.
  • Frontend architecture became maintainable and scalable, easing onboarding for new engineers.


Screenshots