Finance Friend

Home
Login
Chat Sidebar
Graph
Character Selection

Inspiration

The increasing need for accessible and personalized financial advice, especially for younger generations who are often underserved by traditional financial institutions.
The potential of AI to democratize financial planning by providing customized guidance and support, regardless of a user's income or financial literacy level.
The desire to make financial management more engaging and interactive, moving beyond static spreadsheets and complex financial jargon through 3D visualization and gamified elements.
Existing gaps in the market for financial tools that combine AI-driven insights with user-friendly interfaces and personalized experiences.

What it does

Financial Friend empowers users to take control of their financial futures by providing:

A personalized AI financial advisor that can be customized with unique personalities and communication styles, making financial advice more relatable and engaging.
Interactive dashboard that provide insights into their financial health based on expenses presented in an easy-to-understand format.
AI-driven recommendations and insights to help users make informed decisions about budgeting, saving, investing, and debt management.

How we built it

Frontend: The user interface was built with React, leveraging component-based architecture for modularity and reusability. Three.js was used for rendering the 3D character of the AI advisor, while Framer Motion provided smooth animations and transitions. Axios facilitated API communication with the backend, and Chart.js was used for rendering interactive financial graphs.
Backend: The server-side logic was developed with Node.js and Express.js, providing a RESTful API for the frontend. MongoDB was used as the primary database for storing user data, financial information, and AI model configurations. JSON Web Tokens (JWT) were implemented for secure authentication and authorization.
AI/ML: Custom AI models were trained using financial datasets and natural language processing techniques to provide personalized financial advice. The OpenAI API was integrated for natural language understanding and generation, enabling the AI advisor to engage in meaningful conversations with users. Google Cloud Vision API was used for image analysis, and Google Cloud Storage provided scalable file storage.
3D Character Generation: Meshy was used to generate and customize 3D models of the AI advisor, allowing users to create unique and engaging virtual assistants.

Challenges we ran into

Integrating the 3D character with the AI advisor: Ensuring seamless communication and interaction between the 3D character and the AI backend required careful synchronization and optimization.
Optimizing the performance of the application: Rendering complex 3D models and financial graphs while maintaining a smooth user experience was a significant challenge.
Ensuring the security of user data: Protecting sensitive financial information required implementing robust security measures and adhering to industry best practices.
Balancing complexity with usability: Designing a user-friendly interface that provides access to advanced financial tools without overwhelming users was a key consideration.
CORS Issues: We encountered Cross-Origin Resource Sharing (CORS) issues when integrating with third-party APIs, particularly when fetching 3D models from Meshy. To resolve this, we implemented a proxy middleware in our backend to handle the requests and set the appropriate CORS headers.
Asynchronous Data Handling: Managing asynchronous data flow between the frontend and backend, especially when dealing with external APIs, required careful handling of promises and async/await. We used useEffect hooks and state management techniques to ensure data consistency and prevent race conditions.
3D Model Optimization: Optimizing 3D models for web rendering was a challenge. We addressed this by using efficient model formats (like GLB), compressing textures, and implementing level-of-detail (LOD) techniques to improve performance on different devices.
AI Integration: Integrating the OpenAI API for natural language processing and AI interactions required careful prompt engineering and error handling. We implemented rate limiting and fallback mechanisms to ensure a smooth user experience even when the API was under heavy load.
Authentication and Authorization: Implementing secure authentication and authorization using JWTs required careful attention to detail. We followed best practices for storing and handling tokens, and we implemented role-based access control to protect sensitive API endpoints.
Responsive Design: Ensuring a responsive design that works well on different screen sizes and devices was a challenge. We used CSS media queries and flexible layouts to create a consistent user experience across all platforms.
Graph Rendering with Chart.js: We faced challenges rendering financial graphs using Chart.js, particularly with performance and responsiveness on different devices. We addressed this by optimizing data structures, implementing lazy loading, and fine-tuning chart configurations for better performance.

Accomplishments that we're proud of

Successfully integrating AI, 3D visualization, and financial management tools into a single, cohesive application.
Creating a personalized and engaging user experience that makes financial management more accessible and enjoyable.
Developing a secure and scalable platform that can handle a large number of users and protect their sensitive financial data.
Overcoming the technical challenges of integrating multiple third-party APIs and services, including OpenAI, Meshy, and Google Cloud.
Building a fully functional prototype that demonstrates the potential of AI-driven financial advice and personalized financial planning.
Implementing a responsive design that provides a consistent user experience across different devices and screen sizes.

What we learned

The importance of careful planning and architecture when building complex full-stack applications, especially when integrating multiple third-party services.
The value of using component-based development and modular design principles to improve code maintainability and reusability.
The power of AI to provide personalized and engaging user experiences, but also the importance of responsible AI development and ethical considerations.
The importance of continuous testing and optimization to ensure performance, security, and usability.
Effective teamwork and communication strategies for collaborating on a complex project with a distributed team.
The importance of balancing innovation with practicality and focusing on delivering a Minimum Viable Product (MVP) that meets the core needs of users.

What's next for Finance Friend

Adding support for more financial institutions and data sources, enabling users to seamlessly integrate their existing accounts and track their financial activity in real-time.
Expanding the AI advisor's capabilities to provide more personalized and proactive guidance, including investment recommendations, tax planning strategies, and retirement planning advice.
Developing new features for portfolio management and investment analysis, such as risk assessment tools, portfolio optimization algorithms, and automated trading capabilities.
Improving the user interface and user experience based on user feedback, making the application even more intuitive and user-friendly.
Exploring new technologies and techniques for 3D visualization and AI interaction, such as virtual reality (VR) and augmented reality (AR) interfaces.
Implementing machine learning models to predict financial trends and provide users with proactive insights.
Adding support for multiple languages and currencies to expand the application's reach to a global audience.
Developing a mobile app version of Financial Friend for iOS and Android devices.