StockSense 📈

A stock trading simulation app designed for newcomers to practice and learn about stock trading risk free.

To visit the deployed site, click here!

To see a video of the site in action, click here!

This app was built by Lee Sheppard and Lvan Ni

Features

• Default Homepage

  When users first arrive to the app, they are able to view a defualt watchlist of predetermined stocks, showing their current price and percentage change from the day before and are also able to search for stocks on the New York Stock Exchange as well as the NASDAQ.

• User Authentication

  Users are able to both sign in and register via Google and GitHub via NextAuth. If the user is a returning user, then their data will be returned from MongoDB, else if the user is a first timer, an instance will be generated in the database and then the user will be logged in. If the user registers with github and later signs back in with Google, no problems!

• User Homepage

  One the user has logged in, they will be taken to the User Homepage where they will be able to:

  • Track open trades
  • View current portfolio profit/loss
  • View current portfolio balance
  • View cash balance
  • View the total amount they have invested

• Stock Search

  Users are able to search for stocks via the Searchbar on the default and user homepage. As they type, they will see search suggestions of stocks from the NYSE and NASDAQ. If they click on any of the results, they will be taken to the stock chart.

• Stock Charts

  Implemented via ApexCharts, users are able to see the stock data in the form of a candlestick chart for timeframes:

  • 1 Day
  • 1 Week
  • 1 Month
  • 3 Months
  • 1 Year

  Here, if the user is logged in, they will be able to buy the stock, and if they already own some, here they can sell them as well.

• Real-time Data

  The data for all the stocks available is supplied by Twelve Data. Each page reload generates a new API call making sure that the users will have the real time price when they are using the app.

Tech Stack

• Next.js
• MongoDB
• Twelve Data API
• ApexChart
• NextAuth
• Material UI

User Stories Map

Release	User Login	Stock Availability	Graphing Tools	Learning	Buy/Sell Stocks	Graph Style	Other
MVP	Google & Github	NYSE & NASDAQ		Trends	Whole Shares	Candlestick
V2	Username & Password		Line Tool, RSI, EMA	Graphing Tool Guides	Fractional Shares	Line	Stock News
V3		Subscription Based Markets		New User Onboarding

Lighthouse Performance

  Default Homepage

  User Homepage

  Stock Chart

Wireframes

  Lo-Fi Wireframes

• Default Homepage

• Sign In

• User Homepage

• Stock Chart

• Buy/Sell Pages

  Hi-Fi Wireframes

• Default Homepage

• Sign In

• User Homepage

• Buy/Sell Page

• Stock Chart