Real-time market data, interactive charts, and simple portfolio tracking — all in one lightweight Vue 3 web app.
Uses RESTful & reactive API: https://github.com/jericrealubit/stock-dashboard-be
- 🔍 Symbol Search – fetch live quotes for any ticker.
- 🕰️ Intraday & Historical Charts – powered by ECharts.
- ⚡ Blazing Fast – Vue 3 + Vite 6 + ES modules.
| Desktop | Mobile |
|---|---|
 |
 |
| Layer | Package / Version |
|---|---|
| Front-end Framework | Vue 3 (vue@^3.5.13) |
| Build Tool | Vite 6 (vite@^6.2.4) |
| State Management | Pinia 3 (pinia@^3.0.2) |
| Charts | ECharts 5 (echarts@^5.6.0, vue-echarts@^7.0.3) |
| HTTP Client | Axios 1 (axios@^1.9.0) |
| CSS Framework | Tailwind CSS 4 (tailwindcss@^4.1.4) |
| Mock API / Fixtures | json-server 1 (json-server@^1.0.0-beta.3) |
| Dev Experience | @vitejs/plugin-vue, vite-plugin-vue-devtools |
| Formatting / Lint | Prettier 3 |
(Versions pulled directly from package.json.)
https://www.loom.com/share/ab5c62a03dde401281f7cb5196d4b9a4
- Node.js ≥ 18 (LTS recommended)
npm≥ 9 /pnpm≥ 8 /yarn≥ 1.22- (Optional) API key(s) from your chosen market-data providers.
📂 Project Structure
├─ public/ # Static assets
├─ src/
│ ├─ assets/ # Images / icons
│ ├─ components/ # Re-usable UI blocks
│ ├─ layouts/ # App shells
│ ├─ pages/ # Route components (Vue Router)
│ ├─ stores/ # Pinia stores
│ ├─ services/ # API helpers (Axios)
│ ├─ styles/ # Tailwind base / utilities
│ ├─ router/ # Vue-Router config
│ └─ main.ts # App entry point
├─ mock-api/ # json-server db & routes
├─ tests/ # Vitest / Cypress etc.
├─ .env.example
└─ vite.config.ts
# 1) Clone
git clone https://github.com/jericrealubit/stock-dashboard.git
cd stock-dashboard
# 2) Install dependencies
npm install # or pnpm install / yarn install
# 3) Create environment variables
cp .env.example .env # then fill in API_KEY=...
# 4) Start dev server
npm run dev
# 5) Visit http://localhost:3000