SwalletPro

Your wallet. Your world. Connected.

Comment

🪙 Inspiration

  1. We wanted to make finance truly accessible — not just visually but interactively. Our goal was to ensure that color-blind users, those with reading difficulties, or anyone preferring voice interaction could still manage shared finances easily.

  2. The hackathon brief challenged us to merge AI narration with fintech tools. This led to our integration of ElevenLabs Text-to-Speech (TTS) for audio guidance and narration.

  3. We designed the app for real-world use cases like roommates splitting rent or club leads managing shared funds — scenarios that inspired us to make every control intuitive and every feature inclusive.

  4. Our seed data was designed to model realistic financial trip and group scenarios, making demos authentic and showing how SwalletPro could eventually connect to real banking APIs in the future.

💡 What It Does

  1. Group Finance Dashboard: Lets users create groups, add members, and manage shared transactions transparently.

  2. Voice Narration & Commands: Uses ElevenLabs TTS and browser speech recognition to guide users through actions like “Add new expense” or “Show my balances.”

3.Inclusive Themes: Includes a color-blind-safe theme, adjustable font sizes, and keyboard navigation.

  1. Secure Authentication: Powered by Auth0, handling sign-up, login, and user session management.

  2. AI Translation (coming soon): Planned Gemini integration for full-screen, context-aware multilingual switching.

  3. PWA Ready: Works offline and can be installed as a mobile app with instant dashboard access.

💡 How We Built It

  1. Frontend: Built with Vite + React Router and Auth0 hooks, structured around a modular AppLayout shell with shared theme tokens and reusable cards (swallet-pro-frontend/src/main.jsx).

  2. Voice Layer: Integrated ElevenLabs TTS and a custom speech recognition loop for conversational dashboard assistance (Dashboard.jsx:54).

  3. Backend: Designed Fastify routes with an authentication hook that maps Auth0 email → local token, and Postgres pool helpers for all endpoints (server.js:224).

  4. Database: Populated Postgres with realistic seeds for accounts, groups, ledgers, approvals, and notifications (seed.js:60) to ensure demo readiness.

  5. API Wrapper: Centralized fetch logic, automatic auth header injection, and per-feature helpers for a clean UI experience (src/api.js).

⚙️ Challenges We Ran Into

  1. Cloudflare Domain Verification: Managing verification within the limited 24-hour hackathon window.

  2. Auth0 & Fastify Integration: Aligning JWT sessions between frontend and backend.

  3. ElevenLabs API Security: Ensuring TTS API keys were safely managed and calls were throttled to avoid rate limits.

  4. Accessibility Balancing: Maintaining a professional UI while integrating accessibility layers like high-contrast themes and audio cues.

  5. Real-time Feedback: Designing the speech system to recover gracefully from recognition or API failures.

🏆 Accomplishments We’re Proud Of

  1. Built a fully functional, demo-ready full-stack PWA within 18 hours.

  2. Created a cohesive Group Command Center experience through shared design tokens and responsive layout.

  3. Delivered voice-assisted finance management with smooth text-to-speech and speech recognition.

  4. Successfully implemented inclusive design principles — color-blind themes, narration, and voice input — without sacrificing performance.

  5. Established a scalable backend foundation for future AI and fintech integrations.

📚 What We Learned

  1. CRUD-heavy dashboards require robust error handling, retries, and optimistic UI updates.

  2. Conversational interfaces must have fallback modes — visual alerts, logs, and transcripts keep the system valuable even when voice fails.

  3. Optimizing AI API usage (like ElevenLabs and Gemini) for real-time, context-aware performance is key to seamless UX.

  4. Multi-stack collaboration under hackathon constraints taught us to prioritize clean code, fast iteration, and team clarity.

🚀 What’s Next for SwalletPro

🤖 AI Budgeting Assistant: Personalized recommendations to help users save and plan.

💱 Multi-Currency & QR Payments: Support for diverse regions and real-time exchange tracking.

🔒 Enhanced TTS Security: Implement tokenized access for speech requests and data privacy audits.

📱 SwalletPro Mobile Launch: Bring our PWA experience to Google Play and the App Store.

🌍 Expanded Language Support: Integrate Gemini for instant, dynamic translation across entire screens.

Built With

Share this project:

Updates