Financial planning shouldn't be complicated, but it also shouldn't oversimplify. For the Santander 2026 AI React Front-end bootcamp, I built Atlas Money, a multi-step financial simulator that guides users through their real situation and delivers personalized, AI-backed guidance.

The Flow: Users input monthly income, fixed expenses, active loans, and their financial goal. The app generates a complete scenario (income minus expenses, debt timelines, monthly savings target) and opens a chat with an AI financial educator for real-time refinement.

Architecture & Accessibility

The interface is split into two layers: a reusable component library and feature-specific logic. Every element uses React Aria Components for full keyboard navigation, screen reader support, and proper ARIA labels. The design system runs on Tailwind CSS v4 tokens, ensuring consistency throughout.

The Form & Results

Each form step is focused and precise. The multi-step flow breaks a complex financial picture into bite-sized questions. Once complete, users see their financial snapshot: income, expenses, and monthly capacity toward their goa

Then comes the AI layer. The financial educator provides personalized guidance based on their numbers, not generic advice. Users can ask follow-ups, refine their goal, or save scenarios locally to compare different financial plans.