https://github.com/jayeshlab/vue3-crypto-dashboard
Cryptocurrency Dashboard made with Vue 3
https://github.com/jayeshlab/vue3-crypto-dashboard
amcharts5 binance binance-api bootstrap5 chart cryptocurrency dashboard pinia svg vue vue-crypto-dashboard vue-router4 vue3-composition-api vue3-typescript websocket
Last synced: 8 months ago
JSON representation
Cryptocurrency Dashboard made with Vue 3
- Host: GitHub
- URL: https://github.com/jayeshlab/vue3-crypto-dashboard
- Owner: JayeshLab
- Created: 2025-01-12T11:27:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T18:58:28.000Z (over 1 year ago)
- Last Synced: 2025-04-02T23:11:29.549Z (about 1 year ago)
- Topics: amcharts5, binance, binance-api, bootstrap5, chart, cryptocurrency, dashboard, pinia, svg, vue, vue-crypto-dashboard, vue-router4, vue3-composition-api, vue3-typescript, websocket
- Language: Vue
- Homepage: https://vue3-crypto-dashboard.vercel.app/
- Size: 426 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 3 Crypto Dashboard
A Cryptocurrency Dashboard build with Vue 3 in Vite, PWA enabled, Binance Websocket API for realtime price, amChart5 for displaying historical charts, SVG Sparkline Chart and Latest News feed from Cryptocompare site.
Demo: [https://vue3-crypto-dashboard.vercel.app/](https://vue3-crypto-dashboard.vercel.app/)
## Tech Stacks
- [Vite](https://vite.dev/)
- [Vue 3](https://vuejs.org/guide/introduction.html)
- [Pinia](https://pinia.vuejs.org/)
- [Vue Router 4](https://router.vuejs.org/)
- [Typescript](https://www.typescriptlang.org/)
- [Sass](http://sass-lang.com/)
- [Bootstrap 5](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Binance Websocket Stream](https://github.com/binance-exchange/binance-official-api-docs/blob/master/web-socket-streams.md)
- [amcharts5](https://www.amcharts.com/)
- [Cryptocompare News Api](https://min-api.cryptocompare.com/)
- [Custom Sparkline chart](https://github.com/JayeshLab/vue3-crypto-dashboard/blob/main/src/components/SparkLine.vue)
- [Custom Searchable Dropdown](https://github.com/JayeshLab/vue3-crypto-dashboard/blob/main/src/components/SearchableDropdown.vue)
- [Custom Binance Websocket Api](https://github.com/JayeshLab/vue3-crypto-dashboard/blob/main/src/services/api.ts)
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```