Inspiration

The inspiration for ClariFi came from two major insights:

• User frustration: An analysis of 283 user reviews of existing budgeting apps revealed critical bugs, such as alphabetical sorting of amounts and broken CSS in search, along with missing features like transaction dates and French support.
• The Quebec market gap: Forbes Advisor Canada’s top 10 budgeting apps for 2026 are all American, billed in USD, and lack local context. Quebec’s 8.5 million residents are largely underserved by these apps, which often fail to recognize Canadian financial institutions and local expenses.

What It Does

ClariFi is a bilingual (French/English) AI-powered budgeting web app designed specifically for the Quebec market. Its core functionality includes:

• AI Budget Coach: An intelligent coach that reads transaction data, answers questions in both languages, and takes direct actions such as creating goals or adding transactions.
• Quebec-first design: Uses CAD as the default currency and includes Quebec-specific categories like STM, Hydro-Québec, RAMQ, and Provigo.
• Gamified savings: Uses XP, streaks, badges, and a leaderboard to make budgeting more rewarding.
• Financial tracking: Includes a comprehensive dashboard with spending evolution charts, recurring bill management, and CSV/PDF export capabilities.

How We Built It

The app was built using a modern, full-stack TypeScript environment:

• Frontend: Next.js 16 (App Router), React 19, and Tailwind CSS v4
• UI components: shadcn/ui, animated with Framer Motion and canvas-confetti
• State management: Zustand with persistence for local-first data storage
• AI integration: Powered by CopilotKit and OpenAI (gpt-5-nano), enabling the AI to both read and modify application state
• Data and APIs: Bank of Canada Valet API for real-time CAD exchange rates and recharts for financial visualizations

Challenges We Ran Into

• Technical legacy fixes: Solved common budgeting app bugs like alphabetical sorting of numbers (where $1,000 appears before $5) and incorrect category math that combined income and expenses.
• Bilingual complexity: Built a seamless i18n experience that detects localized browser settings such as fr-CA and translates financial categories accurately.
• AI agency: Moved beyond simple chatbot Q&A to create an AI that can proactively suggest and execute actions directly within the user’s budget.

Accomplishments That We're Proud Of

• CAD-native implementation: Built an app that treats the Canadian dollar as a first-class currency with no USD conversion headaches.
• State-aware AI: Integrated CopilotKit so the AI coach understands what the user is viewing and responds with real numbers.
• Premium UX: Created a polished, dark-mode-ready interface with high-quality charts, smooth animations, and a satisfying gamification loop.

What We Learned

• Local context matters: A budgeting app is not just about math; it must reflect the specific bills and habits of a local community, from Hydro to STM.
• The value of actionable AI: Users get far more value from an AI that can do the work, such as categorizing transactions or setting goals, rather than only giving advice.
• Local-first resilience: Building with a local-first mindset, including localStorage fallback, keeps the app usable even without a complex backend.

What's Next for ClariFi

• Pro tier expansion: Add advanced AI features such as auto-categorization of complex descriptions, subscription audits to flag unused charges, and debt payoff calculators using avalanche or snowball strategies.
• Go-to-market: Launch on Product Hunt with a Montreal-specific angle and partner with Quebec student associations such as UQAM, Concordia, and McGill.
• Deeper insights: Develop a net worth tracker with 5-year projections and receipt storage features.

Built With

• api
• copilotkit
• next.js
• openai
• react
• tailwindcss
• zustland