Crypto Exchange Dashboard

Bilingual README — English | فارسی

A RTL-first crypto trading dashboard built with React. Includes authentication, live market data, portfolio views, and a Binance-inspired markets table — styled with a purple / white design system.

Demo walkthrough: login, dashboard pages (overview, markets, portfolio, watchlist), and theme switching.

---

Table of contents

English

• Demo
• Overview
• Features
• Tech stack
• Getting started
• Demo credentials
• Project structure
• Module boundaries
• Dashboard routes
• External APIs
• Scripts
• Production notes

فارسی

• پیش‌نمایش
• معرفی
• ویژگی‌ها
• تکنولوژی‌ها
• شروع کار
• حساب دمو
• ساختار پروژه
• مرز ماژول‌ها
• مسیرهای داشبورد
• APIهای خارجی
• اسکریپت‌ها
• نکات production

---

Demo

The GIF above is generated from public/GIF.mov (screen recording). To regenerate after updating the video:

npm run demo:gif

---

Overview

This repository is a frontend-only dashboard for exploring crypto market data. It is intended as a portfolio / learning project with production-like patterns: feature-based folders, shared UI primitives, TanStack Query for server state, and typed API layers.

Out of scope (by design): real trading, wallets, KYC, or a custom backend.

---

Features

Area	Description
Auth	Login via DummyJSON; accessToken + refreshToken persisted to localStorage and cookies; session restore on refresh
Theming	Dark (default) and light mode; brand purple oklch(62.7% 0.265 303.9) with inverted surfaces in light mode
Dashboard	Overview, Markets, Portfolio, Watchlist — client-side hash routing (#overview, …)
Markets	Top coins from CoinGecko; debounced search, sort controls, pagination; fixed-column tables
Portfolio	Demo holdings (BTC, ETH, SOL) valued with live prices
Watchlist	Static mock data (no network)
i18n layout	Persian UI, RTL (dir="rtl"), Vazirmatn font

---

Tech stack

Layer	Choice
UI	React 19, TypeScript 6
Styling	Tailwind CSS 4 (@theme + CSS variables)
Bundler	Vite 8
Server state	TanStack Query v5
Auth API	DummyJSON Auth
Market API	CoinGecko API v3 (free tier, no key required at low volume)

---

Getting started

Prerequisites

• Node.js 20+
• npm 9+

Install & run

git clone <repository-url>
cd crypto-exchange-dashboard
npm install
npm run dev

Open http://localhost:5173.

Build

npm run build    # tsc + vite build → dist/
npm run preview  # serve production build locally
npm run lint     # ESLint

---

Demo credentials

DummyJSON test user (any user from their catalog also works):

Field	Value
Username	emilys
Password	emilyspass

User list: dummyjson.com/users

---

Project structure

src/
├── App.tsx              # Auth gate: login vs dashboard
├── main.tsx             # Providers: theme → auth → react-query
├── index.css            # Design tokens (dark / light)
│
├── shared/              # Cross-feature code only
│   ├── components/      # AppLoading, TablePagination, …
│   ├── hooks/           # useDebounce
│   ├── lib/             # queryClient, table cell styles
│   └── providers/       # QueryProvider
│
└── features/
    ├── auth/            # Login, tokens, validation, errors
    ├── theme/           # ThemeProvider, ThemeToggle
    ├── market/          # CoinGecko client, queries, types
    └── dashboard/       # Layout, pages, market table UI

Path alias: @/* → src/* (see vite.config.ts and tsconfig.app.json).

---

Module boundaries

1. features/<name>/ — Everything specific to one domain (pages, hooks, API wrappers for that domain).
2. shared/ — Reused by two or more features (debounce, pagination, query client, table styles).
3. Public exports — Each feature exposes its surface through features/<name>/index.ts. Import from other features only via that file, not deep paths.
4. App.tsx — Composition root only; no business logic.

Example:

// ✅ Good
import { LoginPage, useAuth } from '@/features/auth'
import { useDebounce } from '@/shared/hooks/use-debounce'

// ❌ Avoid
import { LoginForm } from '@/features/auth/components/LoginForm'

---

Dashboard routes

Hash-based navigation (no react-router dependency):

Hash	Page
#overview	Summary stats, top 10 coins, portfolio card, watchlist preview
#markets	Full market table with search / sort / pagination
#portfolio	Holdings, allocation bars, detail table
#watchlist	Mock coin cards

---

External APIs

Authentication — DummyJSON

Method	Endpoint	Purpose
POST	/auth/login	Issue tokens
POST	/auth/refresh	Rotate tokens
GET	/auth/me	Current user profile

Market data — CoinGecko

Endpoint	Used for
/global	Market cap, volume, BTC dominance
/coins/markets	Ranked coin list
/simple/price	Login sidebar price preview

Rate limits: CoinGecko free tier is suitable for development; add caching and error handling before any public deployment.

---

Scripts

Command	Description
npm run dev	Start Vite dev server with HMR
npm run build	Typecheck + production build
npm run preview	Preview dist/ locally
npm run demo:gif	Convert public/GIF.mov → public/demo.gif
npm run lint	Run ESLint

---

Production notes

• DummyJSON and client-side tokens are not production-grade auth.
• Do not ship API secrets in the frontend; use a backend proxy for paid APIs if needed.
• Replace mock watchlist / demo portfolio with real user data when a backend exists.
• Consider react-router (or similar) if URL structure and deep linking become requirements.

---

License

Private project ("private": true in package.json).

---

فارسی

داشبورد معاملات رمزارز با UI فارسی، تم روشن/تاریک، احراز هویت و داده بازار.

ورود، صفحات داشبورد (نمای کلی، بازارها، پرتفوی، دیده‌بان) و تغییر تم.

---

پیش‌نمایش

فایل GIF از ضبط صفحه public/GIF.mov ساخته شده است. برای ساخت مجدد:

npm run demo:gif

---

معرفی

این مخزن یک فرانت‌اند مستقل برای نمایش داده بازار رمزارز است. ساختار آن شبیه پروژه‌های حرفه‌ای است: پوشه‌های feature-based، لایه shared، TanStack Query و API تایپ‌شده.

خارج از scope: معامله واقعی، کیف پول، KYC یا بک‌اند اختصاصی.

---

ویژگی‌ها

بخش	توضیح
احراز هویت	ورود با DummyJSON؛ ذخیره accessToken و refreshToken در localStorage و cookie؛ بازیابی نشست بعد از رفرش
تم	تاریک (پیش‌فرض) و روشن؛ بنفش برند با جابه‌جایی سفید/بنفش در تم روشن
داشبورد	نمای کلی، بازارها، پرتفوی، دیده‌بان — مسیریابی با hash
بازارها	CoinGecko؛ جستجوی debounce، مرتب‌سازی، صفحه‌بندی؛ جدول با ستون‌های هم‌تراز
پرتفوی	دارایی نمونه (BTC, ETH, SOL) با قیمت زنده
دیده‌بان	داده Mock (بدون درخواست شبکه)
رابط	فارسی، RTL، فونت Vazirmatn

---

تکنولوژی‌ها

لایه	انتخاب
UI	React 19, TypeScript 6
استایل	Tailwind CSS 4
Build	Vite 8
State سرور	TanStack Query v5
Auth	DummyJSON
بازار	CoinGecko

---

شروع کار

پیش‌نیاز

• Node.js 20+
• npm 9+

نصب و اجرا

git clone <repository-url>
cd crypto-exchange-dashboard
npm install
npm run dev

آدرس: http://localhost:5173

Build

npm run build
npm run preview
npm run lint

---

حساب دمو

فیلد	مقدار
نام کاربری	emilys
رمز عبور	emilyspass

لیست کاربران: dummyjson.com/users

---

ساختار پروژه

src/
├── App.tsx
├── main.tsx
├── index.css
├── shared/              # فقط کدهای مشترک بین featureها
└── features/
    ├── auth/
    ├── theme/
    ├── market/
    └── dashboard/

میانبر مسیر: @/ → src/

---

مرز ماژول‌ها

1. features/<name>/ — منطق و UI همان حوزه.
2. shared/ — چیزهایی که حداقل دو feature استفاده می‌کنند.
3. خروجی عمومی — هر feature فقط از index.ts خود export می‌شود؛ از بیرون همان را import کنید، نه مسیر عمیق.
4. App.tsx — فقط ترکیب صفحات.

// ✅ درست
import { LoginPage, useAuth } from '@/features/auth'

// ❌ نه
import { LoginForm } from '@/features/auth/components/LoginForm'

---

مسیرهای داشبورد

Hash	صفحه
#overview	نمای کلی
#markets	بازارها
#portfolio	پرتفوی
#watchlist	دیده‌بان (Mock)

---

APIهای خارجی

DummyJSON: login، refresh، me

CoinGecko: global، markets، simple/price

برای production به بک‌اند واقعی و auth امن نیاز دارید.

---

اسکریپت‌ها

دستور	کار
npm run dev	سرور توسعه
npm run build	build تولید
npm run preview	پیش‌نمایش build
npm run lint	ESLint
npm run demo:gif	تبدیل GIF.mov به demo.gif

---

نکات production

• توکن سمت کلاینت و DummyJSON فقط برای دمو مناسب است.
• کلید API را در فرانت قرار ندهید.
• دیده‌بان Mock و پرتفوی نمونه را با داده واقعی جایگزین کنید.

---

مجوز

پروژه خصوصی.