> For the complete documentation index, see [llms.txt](https://a.b.cr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a.b.cr/textbook/serials/a-real-time-cryptocurrency-ticker-dashboard.md).

# 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...

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](https://img.content.cc/a/2022/03/30/21-12-38-585-7c635c48510ae9cdd637532afdb28f7d-4663e7.png)

![Realtime Market Data](https://img.content.cc/a/2022/03/30/21-15-43-451-dcc9f82e32e1d0575238f4118982cc04-6cec84.png)

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

![](https://img.content.cc/a/2022/03/31/21-33-33-589-0282ed3e7747ff8a66fcedf934db4157-9c1713.png)

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

![](https://img.content.cc/a/2022/03/31/21-38-52-992-05fdfcae7f0066e3dba242411105c292-71da3a.png)

#### 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
* Framework: [Next.js](https://nextjs.org)
* Tools: [Tailwind CSS](https://tailwindcss.com)

Now the backend, the following are my choice:

* Language: Golang, Node.js
* Famework: [go-kratos](https://go-kratos.dev)

#### 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.*