Learn the highs and lows of market trading in this interactive web game that utilizes virtual currency to give you experience buying and selling stocks.
MVP:
- Sign in/user athentication
- Working virtual market
- Definitions/Thesaurus
- Intro tutorial:
- Should have tooltips and seperate page articles
- Portfolio overview
- Stock lookup
- Transaction history
- Tutorial Topics:
- Beating the Market and betas
- Metrics (P/E ratio, Volume, Market Cap etc)
- Associated fees
Stretch Goals:
- Leader board(s)
- Demo mode (no account needed to explore app)
- Different Difficulty/investor knowledge levels
- Optimized for mobile devices
- Support for bonds
- Tutorials for bonds
- Support for Mutual/Index Funds
- Tutorials for funds
- Support for shorting
- Tutorials for shorting
- Tutorials for candle stick patterns
Tech Stack:
-
Firebase for data storage, authentication, and functions
-
Adobe XD for wireframes
- Tutorial here
-
React.js for front end
For icons:
- https://material.io/resources/icons/?style=baseline
- https://materialdesignicons.com/
- https://www.flaticon.com/
- https://www.pexels.com/
- https://commons.wikimedia.org/wiki/Category:Images
- https://unsplash.com/images/stock
APIs & Libraries
- For the market data: Yahoo Finance API
- For Portfolio overview's graphs and charts: Chart.js
- Redux.js for state management
- Unirest for HTTP request and API's
- Material ui React components (useful for front end) link here
Softerware to Install
-
- We will be using node.js and the npm manager to download other tools and also to run along side the react.js front end
-
- React.js will make up the front end of the app and needs to be installed. You will also find the "create-react-app" repository incredibly usefull when starting your first react.js project
-
- This is a backend as a service provided by Google that the project will use for database, authentication, and backend functionality purposes. You will need to globally install Firebase to your machine through Node.js' npm feature.
-
Unirest
- A HTTP request library built for Node.js. We will be using unirest to connect with any needed API's.
- Unirest installation and use is covered here in a github repo and also here in rapidAPI's official documentation. Installation is done via npm
-
Axios a javascript library to make https requests use is for the front end react.js app to communicate with back end's api served through firebase functions
-
React Developer Tools : an optional chrome extension that helps a ton with debugging a react project
Additional Resources
***The first 4 of these are incredibly helpful youtube videos to further explain topics. Especially The javascript videos as Firebase makes extensive use of promises and asynchronous functions in their services.
Estimated Timeline:
Week 1:
- Research and set up React.js project along with Firebase (everyone)
- wire frame pages with Figma or Adobe XD or just sketch it out (frontend)
- start coding up login and authentication (backend)
Week 2:
- code up front end for buy/sell pages (frontend)
- finish coding up login (backend)
- set up database in Firestore (backend)
Week 3:
- code up all get routes (backend)
- code up home page and transaction history pages
Week 4:
- code up post routes (backend)
- set up dictionary and terms(front end)
Week 5:
- get API integrated in backend and the virutal market logic for backend done (backend)
- Create tutorial pages
Week 6:
- continue immplementing tutorials (Front and backend)
- integrate back end and front end
Week 7:
- integrate back end and front end
Week 8:
- presentation prep
Week 9:
- presentation prep
Week 10:
- presentation week