We wanted to figure out a way to educate people about the potential impacts of not investing in their future early on.

What it does

Allows users to have a casual, but yet educational mobile experience where the users learn about what potential financial investments can do for them years down the road.

How we built it

We built FineLine with ReactJS and NextJS. We used Tailwind CSS for styling and framer-motion for animations. We also deployed this to Vercel. So this project had little to no infrastructure required for deployment.

Challenges we ran into

App cohesion. Since the experience we were developing was a mobile experience, we wanted 4 different features to be available to the user. While these 4 features worked well, it was hard to relate each of the features to each-other.

Accomplishments that we're proud of

This was our first time designing and implementing a mobile experience with animations. Some of our team were not experienced with the useState() react feature so that took some time to get used to for popup modals. We also used FlexBox a lot for this project. Some of the members on our team were not familiar with FlexBox so this project had a fair bit of a learning curve.

What we learned

Designing mobile applications is not for the faint of heart. Much more though goes into UI and UX. It is best to draw the UI out and talk about what would be best for UX before actually implementing it. That way you have a clear picture of what you are supposed to be making instead of refactoring code after the feature has already been implemented.

What's next for FineLine

We might implement an API that allows users to connect their brokerages to the app so that we can perform an analysis of their account and see if they can meet their goals in life.

Built With

Share this project: