Inspiration
As a student, I often think about a simple question. Can I buy something I want and still have enough money until my next scholarship payment?
Answering that question means considering everyday meals, transport, subscriptions, and upcoming bills. I wanted to build a tool that makes those decisions easier to understand.
That idea became Penny, an adaptive money workspace with an AI assistant called pennybot.
What it does
Penny brings spending patterns, budget pressure, subscriptions, and payment suggestions into one workspace.
Its Adaptive Home rearranges cards based on the selected user's spending habits and priorities. A student, a family, and a freelancer each see a different set of relevant insights.
Users can explore transactions, review budget warnings, identify potentially unused subscriptions, and ask pennybot questions such as “What about my coffee spending?”
The home screen keeps insights brief. The assistant helps users explore the details behind them.
Penny also integrates PayPal Sandbox Orders. Users review a prepared payment, approve it through PayPal, and explicitly complete it in Penny. Completed payments appear in the payment history.
The demo uses synthetic financial histories for three personas. PayPal Sandbox payments use test funds and go to the configured demo merchant.
How I built it
I built Penny with Next.js, React, TypeScript, and Tailwind CSS. Framer Motion supports the adaptive card transitions, and AG Grid provides transaction searching, filtering, sorting, and pagination.
The server calculates financial totals and ranks insights using deterministic rules. Monetary calculations use integer cents.
An optional language model helps classify transaction descriptions and select relevant facts for chat responses. Responses are validated with Zod, and rule-based fallbacks keep the core experience available without an LLM API key.
Payment processing uses the PayPal Sandbox REST API, including order creation, approval, capture, and signature-verified completion webhooks. Persistent records use atomic file writes and filesystem locking.
Challenges I faced
One challenge was making the adaptive dashboard feel useful. Card priorities needed to reflect meaningful changes in spending, while routine refreshes needed to feel calm and predictable.
Another challenge was keeping financial explanations consistent with the underlying data. I addressed this by calculating amounts on the server and giving the assistant a defined set of computed facts to work with.
Payment reliability required particular care. Retries, return-page reloads, and repeated webhook deliveries all needed consistent outcomes. I used stable idempotency identifiers, explicit capture confirmation, server-side order validation, and deduplication of payment records.
What I learned
I learned how much work sits between a payment button and a reliable payment flow. Approval, capture, verification, persistence, and retries each have their own role.
I also learned that an AI financial assistant needs clear boundaries between language understanding and financial calculations. Server-computed facts make its explanations easier to inspect and test.
Building Penny helped me connect frontend interaction design, backend data handling, and payment integration into one application.
What I am proud of
I am proud of bringing the adaptive dashboard, spending analysis, conversational assistant, and Sandbox payment flow together in a working demo.
The three personas make the experience easy to explore. They show how the same application can respond to different financial routines and priorities.
What's next
The next step is purchase planning around the user's next income date. A student could ask for headphones, and Penny would estimate an affordable budget after accounting for typical meals, transport, upcoming obligations, and a chosen reserve.
I also plan to add debt tracking and repayment schedules, subscription price-change alerts, expected refund tracking, and scenarios for delayed freelance income.
An experimental voice interface would let users describe a payment request aloud, review the recognized details, and continue through the payment confirmation flow.
These additions would give Penny more context for helping people make everyday money decisions.
Built With
- ag
- api
- community
- css
- framer
- grid
- motion
- next.js
- node.js
- paypal
- react
- render
- rest
- tailwind
- typescript
- zod
