Investment Portfolio App


Our team saw a problem that we all had faced at some point in our lives. That problem is we did not have a simple, beautiful, easy-to-use, and fast mobile app that allows us to track multiple asset classes in a single place. Despite all the tools available to us developers, we have yet to see someone make a cohesive app to solve this problem as far as we know.

What it does

Using our mobile app, users are able to manage their assets by logging their cryptocurrency and stock transactions, and see their profit or loss over various time periods. To achieve this, our backend API connects to various third-party APIs to fetch current, accurate, and reliable price data.

Accomplishments that we're proud of

  • We created a beautiful main screen that showcases a user's assets, total net worth, and profit/loss over various periods of time for all assets.
  • We created a simple yet effective screen to showcase the top crypto currencies by market cap.
  • We put a lot of effort into implementing a very useful backend to support API calls to get accurate and current price data for all US stocks and cryptocurrencies.
  • We created a fully-fledged, full-stack mobile app in effectively just one day.
  • Using new technologies for the first time.

How we built it

We decided to utilize the following languages and technologies:



Other tools:

Challenges we ran into

  • One of our challenges was getting familiar with unfamiliar technologies, which was in-part due to our aspiration for tackling new problems and eagerness to explore new areas of computer science. Building this project was a tremendous learning experience for our entire team because we did a lot of collaborative research to find the best technologies for our situation and learn how to implement them into our project. We also utilized our prior knowledge as hobbyist developers to make our project the absolute best that it could be with the time that we had.
  • Another challenge was the initial team-building aspect for this project. Initially, we had difficulty forming a team of active participants in particular. However, we eventually did form a solid team of talented people (which includes Nader Fares, Qusai Fares, and Conroy Ricketts), and we made sure that this newly formed team did the best that we could with the little time we had left.
  • The scope of our project was relatively big for the little time that we had allotted to build our project. Thus, there are many things that we will eventually add to our project post-hackathon. Please refer to the last section of this page titled "What's next for Investment Portfolio".
  • Technical difficulties due to various internet outages for several team members. Luckily, to overcome this challenge, we were able to utilize git to build our projects locally and then push those changes online when we could.

What we learned

  • How to design a UI prototype with Figma and translate that design into a project.
  • Broader knowledge of the React Native framework.
  • How to work effectively in a very fast-paced, collaborative, and virtual environment.
  • How to work closely together as a team.
  • How to connect two separate GitHub repos together: frontend and backend.
  • Integration of third-party APIs for our backend.
  • How to effectively and quickly adapt to short-notice changes, which is mostly related to our frantic team-building situation pre-development.

Our team

  • Nader Fares
  • Qusai Fares
  • Conroy Ricketts

How to use the app

  1. Install Node.js.
  2. Clone the frontend repo.
  3. In a terminal install the project dependencies with the command "npm install".
  4. In a terminal, run the command "expo start" or "npm start" to run the project.
  5. Using the Expo Client, run the app on your favorite emulator or mobile device using the Expo Go app!
Please note that we did not have enough time to make a navigation bar or similar feature to enable you to switch between screens. If you wish to see a different screen, please follow these steps:
  1. Open the project in your favorite code editor or IDE.
  2. Navigate to the file src\App.tsx.
  3. As you can see on line 8 of App.tsx, the "Top Cryptos" screen is being rendered instead of the main screen (this is the current state of the repo as of November 14th).
  4. In order to render the main screen of the app, remove the comment on line 9 of App.tsx so that the "Assets" screen is rendered.
  5. Comment out the "TopCrypto" object on line 8.
  6. Now save the file and you should be able to see the main screen!
  7. Note: This process is briefly demoed in the video above.

What's next for Investment Portfolio

  • An interactive line graph that features profit and loss over several different periods of time.
  • Cohesive frontend to backend functionality and connectivity.
  • The incorporation of more API to allow a user to connect the app to his or her brokerage accounts, cryptocurrency exchanges, cryptocurrency wallets, etc. in order to track investments automatically and not require manual user input.
  • User authentication.
  • An even more polished user interface.
  • Heavy testing to discover any bugs that our team may have missed.
  • News feed for both stocks and cryptocurrencies.
  • The incorporation of more assets classes such as real estate, bonds, commodities, etc.
  • A built-in cryptocurrency wallet that is both secure and convenient.
  • A screen dedicated to the most valuable companies in the United States. In other words, a screen that lists the top stocks in the US, similar to our screen that showcases the top cryptocurrencies.
  • A screen dedicated to a history log of all user transactions.
  • A dedicated button, or perhaps a navigation bar, that allows the user to switch between the various screens of our app.

Built With

Share this project: