This applications serves to help people understand the logistics of the stock market, without having to invest capital and run the risk of losing money.
There are many people today who don't know much, or anything, about the stock market. Many are scared to use it because they could lose money, or because it seems too difficult to understand. However, it is vital in today's economy to understand the stock market and how to make educated guesses for a secure tomorrow. This applications helps users understand the different types of stocks and ETFs they can buy, and what all the data about them means. Not only can users learn about each stock and ETF, but can also use fake, or paper, money to experiment with the market itself. This hands-on approach will help everyone, especially youth, to invest more time into the stock market for a brighter tomorrow.
Here is a rough sketch of the application itself in the home page.
And here is how the users connect with the backend server and the stock market API.
- Secure, encrypted login
- Ability to buy/sell stocks from NYSE and NASDAQ markets
- Displays owned stocks and their profit
- Teaches how to understand the information from a stock
- Alerts users if one of their stocks is losing money
The following is how I will use the required technologies for this website
- HTML - Use correct HTML structure for applicaton, with 4 pages. One for the home screen, one for trading (Trade), another for logging in (Log in), and lastly one for stock market information (Learn)
- CSS - Application styling that allows the website to look good on different devices with different aspect ratios (phone vs. computer)
- React - Provides login, buying/selling stocks, displays current stock data.
- Web Service - Backend service with endpoints for:
- Retrieving stock information
- Buying stocks
- Selling stocks
- Showing market information
- Database/login - Stores users information, such as logins, stocks, and profit. All passwords will be encrypted with BCrypt
- WebSocket - Realtime data from the stock market (changes in market prices)
The following is the structure of the HTML used in the website
- 4 HTML pages: Home, Trade, Learn, and Login
- Header/Footer: header and footer HTMl files are in layouts folder (loaded by JS)
- Text: Stocks are represented by a textual description, including different important aspects
- Images: A favicon image is used for the website, as well as historic stock pictures
- DB/Login: Input boxes for ticker symbols, user login, as well as display what stocks the user has.
- WebSocket: The market price of a stock, alongside current price of all the user's stocks are displayed in realtime.
The following describes what has been achieved using CSS
- Bootstrap 5: Uses the newest Bootstrap 5 and flexboxes for better user interaction.
- Header, Footer, Main content, Sections
- Navigation Elements: Includes a header that has hightlighted your current page, with hyperlinks to go to each page.
- Responsive to Window Sizing: Header/footer disapear if the window is too small, alongsize resizing text on the learn page
- Application Elements: The elements fill up the entire page, without leaving whitespace, with good contrast and seperation between sections
- Application Text Content: The forms are consistent, however as of now they do not have custom error messages for invalid submitions
- Application Images: The favicon image is used to link to the root page. Additionally, there are images to help reader understand stocks on the learn page.
The following describes what has been done using React, Vite, and Routers
- Bundled and Transpiled: Done.
- Components: Login/signup, Logout, buy/sell are all components with mocks for login/WebSocket (all currently use localStorage)
- Login: Allows login, which grants access to the user's portfolio and trade pages.
- Database: Using arrays in index.js, a count is kept of the user's positions and amount of shares. NOTE: This wil be replaced by mongo databases.
- Application logic: Buying/selling accurately displays user's positions, with errors if the order cannot be completed, and redirection if the user is not authorized to view a certain page.
- Router: Routing between pages is done with the BrowserRouter, Router, and NavLink components
- Hooks: Using
useState: each users' stocks are displayed and for the use of logins.
The following shows what has been done using Node.js, Express, and API calls
- Node.js/Express HTTP Service - Completed.
- Static Middleware for frotend - Completed.
- Calls to third party endpoints - Using a stock trader API, buying/selling orders and market information are correctly displayed, and prevents users from inputing invalid information.
- Backend service endpoints - Placeholders to login that stores current users on the server (currently not encrypted with BCrypt), with endpoints for buying/selling
- Frontend calls service endpoints - Using the fetch function (coupled with async or React.useEffect), this is accomplished.
For this deliverable logins, buying, and selling have been updated using MongoDB
- MongoDB Atlas Database - Created.
- Stores data in MongoDB - Yes. Stocks and user information.
- User Registration - Creates new accounts, and uses
bcryptto hash the passwords - Existing Users - Uses
bcryptandMongoDBto check if a user already exists. - Use MongoDB to Store Credentials - Stores both users, and their stocks
- Restricts Functionality - If a user is not signed in, or doesn't own a particular stock, they will be denied access into the website or from selling that particular stock.
This deliverable has included the following
- Backend listens for WebSocket connections - Done.
- Frontend makes WebSocket connection - Done.
- Data sent over WebSocket connection - Done
- WebSocket data displayed - All current stock information is shown in "realtime". Due to the free API I use for realtime stock information, there is a low daily API call limit and montly data usage. I initally had it update every 8 minutes (to satisfy the 250 daily call limits), but ran into bandwidth issues, so it has been slowed down to update every hour.