/StockBrain

Primary LanguageJavaScript

StockBrain

StockBrain is a practical and easy-to-use investment tool that provides candlestick charts, risk-reward ratio calculators, market information, and notes-keeping features, allowing you to quickly grasp market dynamics, capture trading ideas in real-time, and achieve higher returns.

DEMO

  • Website URL：StockBrain

  • Test Account：

    • E-mail：test@test.com
    • Password：test1234

Table of Content

Main Features

  • Draw Candlestick Chart using SVG without Using Third Party Library

    - Draw Candlestick Chart using SVG without using third party library.

    - Candlestick Chart with a crosshair that moves synchronously with the mouse.

    - Candlestick Chart with 5-day, 10-day, and 20-day moving averages, which can be displayed or hidden by clicking the button.

    - Hover over the candlestick with the mouse will display the corresponding stock price information.

    draw-candlestick-chart-with-svg-without-using-third-party-library

  • Search Bar with Search Filter

    User can input stock id or stock name to search, and the filtered search results will be displayed in real time.

    search-bar-with-search-filter

  • Tracking List

    User can use the "+" icon to add stock to the tracking list, click on the list item to query the candlestick chart info, or click the trash can icon to remove the item.

  • Notes Keeping

    User can capture trading ideas or keep notes with 4 background color options. Saved notes are editable and also can be deleted.

  • Real-Time Calculator

    - The calculation results can be displayed in real-time. By clicking the "Save" button, user can save a trading plan.

    - User can also click on a single trading plan in trading plan section to query the candlestick chart info.

    - By clicking on the stock code or risk-reward ratio column , user can sort the trading plan.

  • Member Center

    User can change their nickname, password, or upload a photo.

  • Data Validation

    - Prevent special character input by using regular expressions for validation and monitoring the onPaste event to block the input of special characters.

    - Validate registration, login input fields, and nickname/password modification input fields using regular expressions.

Frontend Technique

  • React (version 18)

    • React Router
      • BrowserRouter, Routes, Route, useLocation, Link, useParams, useNavigate
    • React Hook
      • useState, useEffect, useRef
    • Custom Hook
      • useAuth：Manage user login status.
      • useLogIn：Handle user login, including login with email and password, or with Google.
      • useSignUp：Handle user sign up.
      • useFirestoreQuery：Query and return data in Firebase Firestore.
      • useUpdateDoc：Update document in Firebase Firestore.
      • useDeleteDoc：Delete document in Firebase Firestore.

  • SVG (without third party library)

    • SVG Path：Draw candlestick and trading volume using <path> element.
    • SVG Polyline：Draw 5-day, 10-day, and 20-day moving average using <polyline> element.
    • SVG Rect：Draw charts border using <rect> element.
    • SVG Line：Draw horizontal and vertical lines in chart using <line> element.
    • SVG Text：Draw text using <text> element to display information such as price, trading volume, and dates in chart.

  • CSS Modules

    Prevent the issue of styles interfering with each other.

  • Third Party Library

  • RWD

    Create responsive layout using CSS Grid.


Backend Technique

  • Firebase (version 9)
    • Authentication：Support email/password authentication and social media login authentication (such as Google).
    • Firestore Database：Support data storage, read and write rules setting, and query indexes creating.
    • Storage：Support member image storage.
    • Hosting：Support custom domain name and website deployment.

Develop Tools

  • Webpack (version 5)：Bundle JavaScript files, CSS files, images, and other resources. Resolve issues such as browser compatibility and code compression.
  • Babel (version 9)：Compile the code.
  • npm：Install, manage, and update packages.

Data Resource

Version Control

  • Git
  • GitHub

Contact