��# Sonar Cryptocurrency Dashboard
A modern, real-time cryptocurrency dashboard with beautiful UI and smooth animations, built with React and styled-components.
Features
- Real-time Transaction Updates: Watch cryptocurrency transactions as they happen with automatic updates
- Filtering Capabilities: Filter transactions by minimum value
- Statistical Insights: View detailed transaction statistics with interactive charts
- Cryptocurrency News: Stay updated with the latest news for top trading cryptocurrencies
- Responsive Design: Fully responsive design that works on desktop, tablet, and mobile
- Modern UI/UX: Clean, intuitive interface with smooth animations and transitions
Pages
- Dashboard: Monitor real-time transaction data with filtering capabilities
- Statistics: View detailed analytics with charts and tables
- News: Stay informed about market trends with cryptocurrency news
Technology Stack
- React
- React Router for navigation
- Styled-Components for styling
- Framer Motion for animations
- Chart.js for data visualization
Getting Started
- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm start
- Open http://localhost:3000 in your browser
Screenshots
- Dashboard with real-time transaction data
- Statistics page with charts and analysis
- News page with latest cryptocurrency articles
License
MIT
Supabase Integration
Server-only integration using Next.js App Router.
Environment variables (set in Vercel Project �! Settings �! Environment Variables):
Server client:
app/lib/supabaseAdmin.js server-only Supabase client.
API route:
GET /api/whales/latest returns latest 100 rows from public.whale_transactions with cache headers.
Server page:
/whales SSR page rendering the latest transactions.
Security:
- Never expose
SUPABASE_SERVICE_ROLE to the client.
- Prefer server components and API routes for data access.
Running tests
This repo uses two independent test suites:
- Vitest (unit/component) covers ORCA orchestration, API routes, and React components under jsdom.
npm test run the suite once.npm run test:watch re-run on change.npm run test:ui open the Vitest UI.npm run test:coverage produce a v8 coverage report (text + html + lcov).
- Signal-engine golden file regression
npm run test:engine runs scripts/test-signal-engine.mjs. It also runs automatically as the prebuild hook before next build.
Vitest is configured in vitest.config.ts. Test setup (jest-dom matchers, afterEach(cleanup), browser API stubs) lives in test/setup.ts.
