招財狗 Money dog

Dig for treasure in the stock market,
and find a new way to get RICH.

Demo

• Website URL：招財狗 Money dog
• Test account：123@mail.com Password：123123
• Test account：123123@mail.com Password：123123
• README(Chinese).md
• The UI of Money dog was inspired by 財報狗 Statement dog.

Money dog is a website which can visualize data by using listed corporations financial statements, easily distinguishing its patterns, trends and correlations.

Users search stock id or company's name, to browse stock's price in half a year, PE ratio, Revenue Growth Rate (YoY) in each month, EPS in each quarter and basic company information.
With bar chart, line chart to observe corporation business management in the long term.

Table of Content

• Main Features
• Frontend Technique
  • React
  • SVG (without third party library)
  • Third Party Library
    • Framer Motion
    • React Slick
  • RWD
• Backend Technique (Firebase Cloud Services)
  • Firebase(version 9)
  • Social Login
  • Web Crawler
  • FireKit
• Contact

Main Features

• Realtime search：Users search companies by stock Id or company's name.
• Build charts with SVG from scratch without third party libraries.
  • Candlestick chart：Show stock price in half a year, 5MA(moving average), 10MA, 20MA, trading volume and transaction.
  • Bar chart：Each quarter EPS in the past three years.
  • Line chart with dots：Show each month PE Ratio and YoY in the past three years.
  • Line chart：Show each month averge price in the past three years.
  • Basic information：Compony and industry introduction.
  • Stock market：Includes TAIEX and OTC general trend.
• Tracking list：Users can add stock in the tracking list, when login-users check My List, it will show all information of stock price.

Frontend Technique

React

• Handle the SPA with React Router (version 6)
  • Outlet, useParams, useLocation, Navigate, useNavigate, Link, Routes, Route
• Hooks API：useContext, useReducer, useState, useEffect
• Extracting a Custom Hook
  • useAuthContext：user state
  • useLogin：login
  • useLogout：logout
  • useSignup：signup
  • useCollection：get data from firestore database
  • useFirestore：add/delete data from firestore database
  • useTrackingList：add/delete users tracking items from firestore database
• Context：AuthContext
• Structure

SVG (without third party library)

• Candlestick chart、TradingView chart
  • svg-rect, svg-line

• Bar chart
  • svg-rect, svg-line, svg-text

• Line chart
  • svg-path, svg-line, svg-circle, svg-text

• Line chart with dots
  • svg-circle, svg-line, svg-text

Third Party Library

Framer Motion

• Enmerge

• Enlarge

• Move

• Drag

• SVG Animation

React Slick

• Auto slider

RWD

• Desktop
• Tablet
• Mobile phone

Backend Technique (Firebase Cloud Services)

Firebase (version 9)

• Authentication
• Firestore Database
• Hoisting
• Functions
  • basicInfoAPI
  • dailyPriceAPI
  • dailyPEratioAPI

Social login

• Support Google sign in.
• Support Facebook sign in.

Web Crawler

• Source
  • 台灣證券交易所(TWSE)
  • 櫃檯買賣中心(TPEx)
  • 財報狗(Statement Dog)
• Code
  • Node.js
  • Python
  • Express

FireKit

• more than 2000 data bulk import files

Contact

• Yu-Chien,Chiu
• mail：yuikuta0618@gmail.com
• LinkedIn：Chiu,Yu-Chien