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.