CardCatalyst

Video link: https://vimeo.com/1182441824/72bb3e6a25

Inspiration

The inspiration for CardCatalyst originated from observing the unnecessary complexity in the consumer credit market. Most individuals possess a variety of credit cards but fail to utilize them strategically, leading to significant missed opportunities for rewards and financial yield. We wanted to build a tool that removes the guesswork from personal finance by using data-driven insights to ensure every transaction is optimized.

What it does

CardCatalyst is an AI-driven financial advisor that analyzes a user's transaction history to recommend the optimal credit card for their specific spending habits. The application takes raw purchase data, categorizes it, and cross-references it with a database of card benefits to identify which product would have yielded the highest return. It provides a clear, professional dashboard where users can see their "perfect match" and a detailed reasoning for the selection.

How we built it

Frontend: We used Vercel v0 to rapidly prototype and deploy a mobile-first user interface. Backend: The logic is handled by Next.js, utilizing Server Actions to process data securely. AI Core: We integrated Google Gemini via the Google Gen AI SDK to perform the heavy lifting of transaction analysis and categorization. Data Strategy: We implemented a Retrieval-Augmented Generation (RAG) approach, feeding the model both the user's ledger and a structured database of credit card perks to ensure mathematical accuracy. The selection logic is grounded in a quantitative assessment of total value ($R$) across a card portfolio ($C$):

[ R_C = \sum_{i=1}^{n} (S_i \cdot M_{C,i}) + P_C ]

Where: \begin{itemize} \item $S_i$ represents the user's spending volume in category $i$. \item $M_{C,i}$ is the specific reward multiplier assigned to card $C$ for that category. \item $P_C$ accounts for fixed annual benefits, such as travel credits or statement rebates. \end{itemize}

Challenges we ran into

The primary technical hurdle was the ambiguity of merchant data. Identifying whether a vendor like "Uber" should be classified as Travel or Dining (UberEats) required significant prompt engineering to ensure the AI correctly applied reward multipliers. Additionally, managing the transition from the v0 sandbox to a local VS Code environment presented challenges in dependency management and UI component initialization under a strict 24-hour deadline.

Accomplishments that we're proud of

We am particularly proud of the seamless integration between the generative AI and the frontend. Despite the inherent latency of Large Language Models, we successfully designed an interactive loading state that communicates the "thinking" process to the user, turning a technical constraint into an engaging UX feature. Furthermore, we am proud of the application's ability to take unstructured bank data and transform it into a high-confidence financial strategy.

What we learned

This project provided a deep dive into the practical application of LLMs in Fintech. We learned how to constrain generative models to produce strictly structured JSON outputs, which is vital for building stable web products. We also gained experience in the full software lifecycle, from AI-assisted design to production-ready deployment on Vercel.

What's next for CardCatalyst

The next step for CardCatalyst is to move beyond mock data by integrating with financial APIs like Plaid to pull real-time, authenticated transaction histories. We also plan to implement a multi-card "Wallet View," which would notify users in real-time via their mobile device which card to use the moment they enter a specific geofenced merchant location.

Built With

• api
• css
• gemini
• next.js
• python
• react
• retrieval-augmented
• tailwind
• typescript