Crypto Dashboard

I built this to track crypto prices, manage my portfolio, and set alerts.
It’s a full‑stack app: React frontend (TypeScript) + Node.js backend with MySQL.

What works

• Live prices – top 100 coins, updates every 30 seconds (CoinGecko API).
• Chart – historical area chart (1D to 1Y) with real data.
• Portfolio – add buy/sell transactions, see P&L in real time.
• Alerts – set “above” or “below” price targets. Backend checks every 15 seconds.
• Watchlist – star your favourite coins.
• Google login – optional, uses Passport.js OAuth.
• Dark glass UI – Tailwind + a few custom classes.

Tech stack (simple version)

Backend

• Node.js + Express
• MySQL (raw queries with mysql2)
• JWT + bcrypt for auth
• Passport.js (Google OAuth)
• node‑cron for background jobs
• Axios for CoinGecko

Frontend

• React + TypeScript
• Tailwind CSS
• Recharts
• Axios + React Router

Running it locally

1. Clone & install backend

git clone https://github.com/yourname/crypto-dashboard.git
cd crypto-dashboard/backend
cp .env.example .env   # edit DB credentials & JWT secret
npm install
npm run dev

Backend runs on http://localhost:5000.

2. Set up database

• Create MySQL database (e.g. crypto_dashboard).
• Run the schema: backend/database.sql (included in repo).
• The backend will auto‑fill top 100 coins on first price fetch.

3. Frontend

cd ../frontend
npm install
npm start

Open http://localhost:3000.

4. Google login

• Create OAuth creds in Google Cloud Console (Web application).
• Set redirect URI: http://localhost:5000/api/auth/google/callback
• Add your Client ID & Secret to backend/.env.
• Add your email as a test user on the OAuth consent screen.

API endpoints (the ones you’ll use most)

Method	Endpoint	What it does
POST	/api/auth/register	Create account
POST	/api/auth/login	Get JWT token
GET	/api/crypto/overview	Live market data (top 10 + global stats)
GET	/api/crypto/history/:coinId	OHLCV for charts
GET	/api/portfolio	Your holdings with current P&L
POST	/api/portfolio/transaction	Add buy/sell
GET	/api/alerts	List your alerts
POST	/api/alerts	Create an alert
DELETE	/api/alerts/:alertId	Remove alert

A Postman collection is in postman_collection.json.

Stuff I might add later

• News feed – endpoint is ready, just needs a free CryptoPanic key.
• Admin dashboard – role column exists but no special routes yet.
• WebSockets – would replace the 30‑second polling.
• Portfolio charts – allocation pie, historical value.

License

MIT – do whatever you want with it.