Wonderland
  • README.md
  • Notebook
    • Crypto
      • Solana
        • Troubleshooting
          • BPF SDK path does not exist
    • Language
      • Rust
        • Reference
          • Capturing the Environment with Closures
          • Understanding &mut &mut Reference
      • C++
        • Reference
          • Code for MS rand() and srand() in VC++ 6.0
  • Textbook
    • Serials
      • A Real-Time Cryptocurrency Ticker Dashboard
        • 0 - Some Preparation
    • Frontend
      • A Simple Progress Bar
      • A React Ribbon Component
      • An Easy to Use React DnD Sortable Component
      • Sticky Header, Sticky Footer and Fluid Content
      • How To Set Same Height As Width In CSS
  • dictionary
    • Alphabet
      • MySQL
      • FFmpeg
    • Algorithm
      • Diary
        • 2022
          • 07
            • 2022-07-02
            • 2022-07-01
          • 06
            • 2022-06-30
            • 2022-06-29
            • 2022-06-28
            • 2022-06-27
            • 2022-06-26
            • 2022-06-25
            • 2022-06-24
            • 2022-06-23
            • 2022-06-22
            • 2022-06-21
            • 2022-06-20
            • 2022-06-19
            • 2022-06-18
            • 2022-06-17
            • 2022-06-16
            • 2022-06-15
            • 2022-06-14
            • 2022-06-13
            • 2022-06-12
            • 2022-06-11
            • 2022-06-10
            • 2022-06-09
            • 2022-06-08
            • 2022-06-07
            • 2022-06-06
            • 2022-06-05
            • 2022-06-04
            • 2022-06-03
            • 2022-06-02
            • 2022-06-01
          • 05
            • 2022-05-31
            • 2022-05-30
            • 2022-05-29
            • 2022-05-28
            • 2022-05-27
            • 2022-05-26
            • 2022-05-25
            • 2022-05-24
            • 2022-05-23
            • 2022-05-22
            • 2022-05-21
            • 2022-05-20
            • 2022-05-19
            • 2022-05-18
            • 2022-05-17
            • 2022-05-16
            • 2022-05-15
    • Troubleshooting
      • A Weird Python Command Not Found Problem
Powered by GitBook
On this page
  1. Textbook
  2. Serials

A Real-Time Cryptocurrency Ticker Dashboard

Today is March 30, 2022, and I hope laziness won't stop me from completing the first edition of this project in mid-2022...

Last updated 3 years ago

I've just picked up basic front-end skills and I've developed a strong interest in cryptocurrencies. So I want to start with a simple project to get exposure to cryptocurrency and go deeper into front-end skills.

For these reasons, and you also saw my title above, I wanna to create a cryptocurrency ticker dashboad.

I think this a complete software project, so first of all, we should clarify the following points:

  1. What is the core target?

  2. The design and feature of the dashboard?

  3. Program languages and frameworks selection?

  4. Data source?

  5. How to deploy?

  6. How to test?

What is the core target?

Here are some screenshots of "Huobi", a global cryptocurrency leader:

Market List

I want to create a website and an app just like the screenshots above. My target will have two step:

  1. Create a real-time cryptocurrency ticker dashboard.

  2. Base on step 1, build a crypto trading simulator.

The design and features of the dashboard?

In the early project, I will use the design just like "Huobi", maybe in step 2 I have to design something new for my project.

Let's talk about features, I splited the above pics with several red box.

The project will be mainly made up of two pages:

  1. The index page

  2. The detail page of a crypto

The index page displays some summary infomation of cryptos:

  1. Several main cryptos

  2. More cryptos as a list

The detail page of a crypto display all infos of its market:

  1. Summary

  2. Charts

  3. Orderbook & Market Trades

  4. Other cryptos as a list

  5. Exchange (Trading Simulator), and this will be built in step 2

Program languages and frameworks selection?

Ha... This is my favourite part, maybe coding is the key to the future...

This part will be updated whenever something new used during the project.

For the frontend, I will choose these:

  • Language: TypeScript

Now the backend, the following are my choice:

  • Language: Golang, Node.js

How to deploy?

Since micro service is easy to use, I will deply my services on k8s, and I will use some SaaS or PaaS service to simplify this part. Besides, the target of this part is to use as less $ as possible.

This part will be updated after which platform to use is decided.

How to test?

This part is just the opposite of the above two parts, since test is boring and will take a long time to check every possible problem.

In order to make the service stable, this part is also very important, so maybe unit test is necessay during the project. The detail should be considered before testing.

Realtime Market Data

Framework:

Tools:

Famework:

Next.js
Tailwind CSS
go-kratos