Visit: https://virtual-stocks-sha.vercel.app
Demo: https://youtu.be/X02m-iZ_EXA
Backend Repo: Java with Spring
Report Bug

Table of Contents

1. About The Project
   • Project Overview
   • Built With
   • Workflow
   • Database Schema
2. Usage

About The Project

Project Overview

• Play with virtual stocks:

  • Users on registering get a $1000 credit using which they can purchase stocks.
  • Learn basic stock trading without using real money.

• Portfolio summary:

  • Get an overview of the entire portfolio, including individual profit/loss and overall profit/loss.

• Explore stocks:

  • Search for the stocks: Enter some keywords and get the suggestions.
  • Analyze the past stock trend: the value of the stock on each day, week and month.

Built With

This web app is developed using the following:

• Frontend (with some API route handling through Server Actions): Next.js (based on React)
• Backend: Spring Boot (with Spring Security)
• Database: MySQL
• Deployment:
  • For Backend and Database: Railway
  • For Frontend: Vercel
• APIs:
  • Stock search results, company details, latest quotes: Finnhub
  • Past trends: Alpha Vantage
• Additional libraries/packages used: Java JWT, Tailwind, Recharts, Hero Icons

Workflow

Authentication

• Spring Security handles the authentication flow.
• Exposed the following endpoints for handling authentication: /register, /authenticate, /logout
• On registering, the details of the user (name, email, password (encrypted), balance) are stored in a MySQL database.
• During authentication (Log in), the server verifies the credentials and returns a JSON Web Token (JWT) as a Cookie.
• This cookie has the following properties:
  • httpOnly: Can't be accessed by JavaScript
  • secure: Only sent to the server with an encrypted request over the HTTPS protocol
  • SameSite=None: To allow cookies in cross-site requests (since the backend and frontend are deployed on different domains).
  • Expiry: 1 day
• In all subsequence calls to the server, the browser automatically attaches this Cookie.
• For every request on the server, we extract the subject (user) from the Cookie and fetch/store the data from/to the database accordingly.
• On log out, the server resets the cookie on the client side by sending a cookie with the same properties but expiring immediately.
• Encoded/Decoded value of Cookie on jwt.io:

Explore stocks

• The usage of external APIs for stock data (Finnhub and Alpha Vantage) is handled by Server Actions in Next.js.
• Using the following external APIs:
  • Stock search results: https://finnhub.io/docs/api/symbol-search
  • Company details: https://finnhub.io/docs/api/company-profile2
  • Price: https://finnhub.io/docs/api/quote
  • Past daily, weekly, monthly time series data: https://www.alphavantage.co/documentation
• Plotting the past trends using AreaChart from Recharts: https://recharts.org/en-US/api/AreaChart

Purchase/Sell stocks

• User enters the quantity of the stock to purchase/sell.
• On submission, we send the updated stocks[] and balance of the user to the server endpoint /updateStocksAndBalance which then stores it in the database.

Stocks Portfolio

• As soon the user logs in, we fetch user details (name, email, balance, stocks) using the /user endpoint in the layout file of the dashboard.
• For each stock in the portfolio, we fetch the current price using the external API.
• Then calculate individual and overall profit/loss and display them accordingly.

Database Schema

_user: contains user information

_user_seq: internal table created by spring

user_stocks: contains stocks of the users

Usage

The live version of this web app is deployed at: https://virtual-stocks-sha.vercel.app

To set up locally, follow these steps:

Setup database

1. Install Docker: https://docs.docker.com/desktop

2. Install mysqlsh: https://dev.mysql.com

3. Launch MySQL as Docker Container

   docker run --detach --env MYSQL_ROOT_PASSWORD=dummypassword --env MYSQL_USER=stocks-db-user --env MYSQL_PASSWORD=dummypassword --env MYSQL_DATABASE=stocks-db --name stocks-api-mysql --publish 3306:3306 mysql:8-oracle

4. Run stocks-api-mysql container from Docker Desktop.

5. Connect to the database from the terminal.

   mysqlsh
   \connect stocks-db-user@localhost:3306
   \sql
   use stocks-db
   show tables;

Setup backend

1. Clone the repo

   git clone https://github.com/shakib1729/stocks-api.git

2. Create .env.properties in the root directory (change JWT_SECRET_KEY for your usage):

   JWT_SECRET_KEY=824ADC45D2D8A818A32E7AEE5FF34B322F10E64E0A8C2Z87C12AF74ABD8X2D9E
   CORS_ORIGIN=http://localhost:3000
   ENVIRONMENT=DEV
   DB_HOST=localhost
   DB_PORT=3306
   DB_NAME=stocks-db
   DB_USERNAME=stocks-db-user
   DB_PASSWORD=dummypassword
   

3. Run stock-api as a Java Application from Eclipse.

Setup frontend

1. Clone the repo

   git clone https://github.com/shakib1729/virtual-stocks.git

2. Install NPM packages

   npm install

3. Create .env.local in the root directory:

   NEXT_PUBLIC_API_URL = 'http://localhost:8080/api/v1'
   FINNHUB_API_KEY=YOUR_FINNHUB_API_KEY
   ALPHAVANTAGE_API_KEY=YOUR_ALPHAVANTAGE_API_KEY
   

4. Run the project

   npm run dev