Stock Trading App

HTML

CSS

JavaScript

TypeScript

Python

Flask

NodeJS

MongoDB

Angular

Google Cloud

Summary

This project was created for my Web Technologies class at USC Viterbi School of Engineering. The purpose was to become familiar building interactive and functional web applications. The project had three iterations: a simple web-app built with HTML, CSS, JavaScript and Python, then a more advanced web-app created with Angular and ExpressJS, and finally an iOS app created in native Swift.

The web-app we were creating would have many features seen in a stock trading service. Including viewing current stock prices, creating a watchlist, viewing articles, and compiling data into graphs. the data used for this project was sourced from the Polygon.io and Finnhub.io api's. The interactive charts were created using Highcharts.

Simple Web App

The first iteration of the project had a frontend created using HTML, CSS, and Javascript and a backend coded in Python and Flask. The Flask backend sourced its data from the Polygon.io and Finnhub.io api's and the frontend displayed the data using Highcharts.io.

Features:

  • View current price.
  • View trading price and volume charts.
  • View recent articles.

Angular Web-App

The second iteration of the project improved on the first with its appearance and functionality. I used the Angular framework to create the frontend which was connected to a new backend coded using ExpressJS.

This project made me more familiar using web api's and setting up backend services with multiple functions and endpoints. The backend required for this project expanded on the functionality from the first iteration, adding more endpoints, another api service, and a connection to a MongoDB database. MongoDB was used to store the user's favorites/watchlist as well as their portfolio balance and stocks.

Features:

  • View current price.
  • View trading price and volume charts.
  • View recent articles.
  • Share articles on Facebook and X/Twitter.
  • Save stocks to a watchlist.
  • Buy/Sell stocks using simulated money.
  • More charts and data.

iOS App

After creating a web-app, I recreated the project again as a native iOS app using SwiftUI. The frontend uses many native features in Swift for navigation and state. Notifications and popups use custom-implemented components. The mobile app is connected to the same NodeJS backend as the web-app. Buying, selling, and favoriting stocks is shared across the mobile and web projects.

Features:

  • View current price.
  • View trading price and volume charts.
  • View recent articles.
  • Share articles on Facebook and X/Twitter.
  • Save stocks to a watchlist.
  • Buy/Sell stocks using simulated money.
  • More charts and data.
  • Cross-compatible with the web-app.