Project Description

Wealth Smart is a full stack web application built with TypeScript, React, Express, Prisma, and PostgreSQL. The app allows users to signup, login, keep track of securities in a watchlist, and perform simulated paper trading with the U.S stock market - each newly created account will start off with a total cash balance of USD100,000.

User Story with Snippets

Signup and Login

New user sign up and login to the main page of the App

Main page dashboard

Main page upon successful login, user will be able to view the largest companies by market cap and top gainers/losers (of the day) of the U.S market. Data presented is real-time and obtained from Financial Modeling Prep API

Symbol Page

Clicking the ticker will lead user to the Symbol page where the one year candlestick chart is presented using highcharts; user can decide on the price and quantity to buy/sell for specific ticker

Search bar

User can search for specific security by ticker or security name using the Search bar, and the Search bar is accessible throughout the App

Simulating buy/sell order

User is able to execute buy or sell order at individual Symbol page, and user will not be able to oversell the security if existing holding quantity is lower than sell request quantity

Portfolio Page

Upon successfully executing a buy order, user existing holdings will be presented in the Portfolio page

Trading History Page

User is able to view their trade records in the Trading History page

Watchlist Page

User can add or delete ticker from their watchlist

Technical Used

Project is built with the following technologies:

• TypeScript
• React
• React Bootstrap
• Fontawesome
• highcharts
• PostgreSQL
• Prisma
• ExpressJS
• JWT
• bcrypt
• Axios

Planning and Development Process

• Client

  • Signup and Login pages set up with JWT authentication
  • Home page and main dashboard (TopMarketCap & TopGainersLosers)
  • Navigation Bar
  • Symbol Page:
    • Chart component plotting daily candlesticks over one year period
    • Paper trading form logic to allow buy/sell order execution
    • Symbol quote information
    • Add to/remove from watchlist logic
  • Portfolio Page:
    • User portfolio table
    • User account values (Total Cash Balance, Total Securities Value, Total Accumulated Profit/Loss)
  • Trade History Page
  • Watchlist Page
    • Remove from watchlist button & logic
  • Search bar logic
    • Ping API to fetch results and redirect user to Symbol Page upon clicking ticker
  • Pagination (TopMarketCap, PortfolioPage, TradeHistoryPage, WatchlistPage)
  • Loader in App.tsx

• Server

  • POST Endpoints
    • Signup (password hashing with bcrypt)
    • Login (JWT authentication)
    • Trading (handle paper trading orders)
    • Portfolio creation when user execute buy order for the first time for new ticker
    • Add to watchlist
    • Account value balances of user created upon initial sign up
  • GET Endpoints
    • checkAuth (for protecting routes in frontend)
    • Get user porfolio records
    • Get user trading history
    • Get user watchlist
  • PUT Endpoints
    • Update user portfolio records when user execute buy or sell order
    • Update user account value balances when a buy or sell order is executed
  • DELETE Endpoints
    • Delete user portfolio records when quantity sold equals current quantity holding
    • Delete from watchlist
  • Prisma and PostgreSQL database setup
    • Models

API Used

• Financial Modeling Prep API

Contact

DM me on LinkedIn to request for a demo!

License

This project is licensed under the terms of the MIT License.

(back to top)