Stock Search

Motivation

Throughout college I only had a bit of exposure to web development. Given how versatile of a field it is, I decided to teach myself by building a stock backtesting website. After learning about the different JS frameworks, I decided to build the website with Svelte & Svelte Kit, due to their intuitiveness. The UI was constructed using a mix of Tailwind CSS and DaisyUI as well as the following elements Svelty Picker, Range Sliders, and Loading Spinners. In order to display the ticker data, I learned how to use Chart.js. Due to the large amount of data, the ticker data is stored on the cloud using MongoDB. When loading stock data, the frontend makes an API fetch request to the backend with the start and end dates selected by the user. The backend then fetches the corresponding data from the MongoDB database. Users also have the option to test out their own trading algos by using the 'Backtest' tab.

Tutorial

1. Select a start and end date using the calendar widget at the top
2. Press the refresh button to load the data from the server
3. On the right you will see all available companies (450+) and their data with a higher frequency than what Google or Yahoo offer
4. You can press on a company's name to plot it and use the plus sign to compare it with other companies
5. While plotting a company's prices, at the bottom right, the backtest tab allows you to test your own trading strategies on your selected symbols
6. You can search for specific companies using the search bar or the price and volume sliders at the top
7. If there's a company you like, add it to your favorites by pressing on the star; you can view your favorites with the toggle