Financial App

I lead the majority of the front-end development efforts for a financial advising tool while contributing to React component creation, UI modification, API fetching, data updates through Firebase, responsive layout, and more.

  • UI/UX, React, Typescript, HTML/CSS, SCSS

Project Overview:

After receiving a few static mockups, my teammate and I set out to build a full-stack application that would enable financial advisors to help their clients match their investment portfolio with their personal values.

My realm of responsibility spanned from writing the entirety of the HTML/CSS, modifying and creating React components, pulling API data and rendering them within the app, making UX/UI decisions, troubleshooting bugs after launch, and writing UX copy.

Form Elements

This sign-up screen needed a radio selection to choose which plan to subscribe to. My solution was a radio selection UI in which I designed and developed utilzing CSS & React. I also ensured that the data being sent on form submit was aligned with how the back-end request needed to be formatted.

After designing this modal, I incorporated Framer's React package to introduce a fade transition upon render.

This select menu component was a team effort. While I handled the UI design and CSS styling, my teammate developed the multi-select functionality. Once this was complete, I added some nice hover and active states with icons and a tag counter that updates on the top level with each selected parameter.

This select component with a keyword filtering option was given to me to style after my teammate handled the functional work. Here are the before and after screenshots:

This reports screen was given to me to improve the UI and to add pagination. After implementing CSS which matched the theme of the existing application, I found and implemented a React pagination plugin which allowed us to utilize our select menu components for further sorting. The final screen is a beautiful reports UI that feels native to our application even though it is relying on a few third-party libraries. I also developed the keyword filter component at the top of the screen.

The original design of the Portfolio view (first screenshot) was a simple concept that needed to grow in scope over time. It was up to me to ensure that the design and implementation of this UI could handle the additional data points and collapse gracefully when viewed on smaller screens.

After production, QA, and launch:

Expanded portfolio which utilizes an API call to pull in relevant data for each portfolio holding:

Portfolio view on a tablet screen:

Final Thoughts

Over the course of 8 months, my teammate and I developed and launched this application, leading to the success of this new product. The application has garnered sucess and paid subscriptions over time.

Through this project, I was introduced to and became familiar with many new technologies, including the Firebase API, React Router, useRef, Typescript, SCSS, and more.