-
-
-
-
A window resize warning and recreate the chart
Inspiration
What inspired me to do this project is by one day, my business teacher run a stock competition where every student have about 100,000 starting dollar and after 30 days to see who have the most dollar earning either in the U.S.A stock market or the canadian stock market. We do that using google sheet which is a very unconvenitent way. There is a website called investopedia which offer stock simulators, but this is only for canadian stock market. This inspired me to try to do this market simulator. Also, I am a big fan of stock market. The two stock websites i used is either financialmodelingprep or Yahoo, but for me personally as a newbie in stock market and only cares about the price (exclude either useful index for professional investors), it is not pretty user-friendly to me, so I would like to design a very simple and conventient stock market website.
What it does
user could search the stock by either stock symbol or company name. Then access the price by 1 day/ 7days /1month / 2month / 3month / 6 month/ 1 year / 2 years / 5years/ 10 years / all.
User could add their favorite stock to my watchlist (the data will store on the broswer and could access next time open the page). The watchlist result result will be appear in the top result of search engine.
How we built it
Use chart.js, javascript, css, html Two stock API
Challenges we ran into
How to load the data in fast speed is pretty big challange is pretty a big challange for my application. I have wroten versions of how my application going to deal with the data in order to form the chart as quickly as possible after retrieving data from the API. Also, how the search engine should search, binary or linear search is also a challange. More importantly, the onhover and mousedown event is very hard to make using chart.js. The offical documentation doesn't have too much useful information for advanced chart. Also, time is so valuable for me as working solo, I spend almost the whole weekend in front my computer, but due to the overconfidence about my programming speed, I doesn't finish the separate UI (but storing it, add/remove stock,stick to the top of the search engine is worked) for watch list and the stock simulator.
Accomplishments that we're proud of
The chart and animations looks good. The search engine almost has no laggy to load the data. And more and more to discover here
What we learned
Most important thing::: Write the code be as faster as you could or find a teammate!!!!
What's next for Stock application
Add market simulator Add more broswer support (currenly only tested on chrome and firefox Add mobile web version be more responsive design by the resoluation (currently window resoluation < 1000px, the UI will not be good enough) optimize the speed and using an JSON library to transfer data faster Build the sever to host the data Full screen option for the stock chart Network detection And more and more :)
Log in or sign up for Devpost to join the conversation.