FinXP is a high-performance, responsive web application designed to democratize financial literacy. Built with Next.js (App Router), React, and Tailwind CSS (v4), the app simplifies complex jargon into relatable insights using real-world localized examples and Google's cutting-edge Gemini AI.
Democratizing personal finance knowledge by rapidly demystifying abstractions like Compound Interest, Asset Allocation, and Zero-Based Budgeting.
- Instant Concept Search: Centralized, high-speed filtering across all concept cards scanning titles, definitions, and 💡 Actionable Tips in real-time.
- Contextual Gemini AI Tutor: In-card modal simplification. Users can tap "Simplify for me" to get an ultra-short, jargon-free breakdown powered by Google Gemini (2.5-flash).
- Conversational Assistant: A persistent, floating AI expert specialized in saving, budgeting, and investing for the Indian economy (₹).
- Crash-Resilient UI: Integrated Error Boundaries ensure the app remains stable even if a single component fails.
- Security Headers: Strict Implementation of CSP, HSTS, X-Frame-Options, and Referrer-Policies in
next.config.ts. - API Defense: All endpoints (
/api/gemini,/api/assistant) feature robust Input Validation, character length caps, and server-side secret management. - Sanitization: User inputs are sanitized and truncated before being embedded into AI prompts to prevent injection attacks.
- Client-Side Memoization: Core UI components are wrapped in
React.memo(), and expensive filters useuseMemo/useCallbackto achieve near-zero redundant renders. - Lazy Loading & TTI: The AI Assistant is dynamically imported with
ssr: falseto keep the initial page weight low and optimize Time to Interactive (TTI). - Google Optimize: Pre-connects to Google APIs and uses
display: "swap"for fonts to eliminate Cumulative Layout Shift (CLS).
- Full TDD: 48 tests across 10 suites covering every API route and UI component.
- Coverage Levels: Maintained strictly at 100% across Statements, Branches, Functions, and Lines.
- Corner Cases: Tested against network failures, missing API keys, empty states, and Error Boundary recovery.
- WCAG 2.1 Compliance: Skip-to-content links, semantic landmarks (
footer,nav,main), and full ARIA support (aria-live,aria-modal). - Keyboard Mastery: Fully operable via keyboard (Enter/Space on cards, Esc to close modals, focus-trapping).
| Service | implementation Detail |
|---|---|
| Google Gemini AI | Advanced prompt engineering using the @google/genai SDK for both on-demand tutor and global assistant. |
| Firebase SDK | Integrated Firebase client SDK for secure, scalable cloud connectivity. |
| Google Analytics (GA4) | Dual-integration via both Firebase Analytics and gtag.js for deep user behavior tracking. |
| Google Tag Manager | Scalable tag management injected for server-side event tracking. |
| Google Fonts | Inter (Variable) served via next/font for high-performance typography. |
| Cloud Run | Optimized multi-stage Dockerfile with standalone output for Google Cloud deployment. |
npm install- Configure
.env.localusing the keys below:
# Required for AI Features
GEMINI_API_KEY="your_key_here"
# Optional for Analytics
NEXT_PUBLIC_GA_ID="your_gtag_id"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="your_project_id"
# ... other firebase varsnpm run dev— Launch dev servernpm run build— Optimized production buildnpm run test:coverage— Run full test suite with coverage report
- Localization: Focused on the Indian market (₹) for more relatable financial examples.
- Resilience: Assumed a "fail-soft" strategy where Firebase and Gemini features gracefully disable if keys are missing rather than crashing the app.