tushallohar/cryptoverse

This repository is a client-side React application built with Vite. Architecturally, it is a single-page crypto market/portfolio dashboard with a thin serverless API layer for proxying external services. The main runtime is the browser; the backend surface is limited to Vercel-hosted functions in api/.

The application shell is centered around src/main.jsx, src/app/routes.jsx, and src/layout/*. AppLayout, Header, and TickerBar provide the persistent frame, while route-level screens in src/pages/ and src/features/ fill the main content area. This suggests a shared chrome with many specialized analytics views rather than separate apps.

Routing is a key organizing boundary. src/app/routes.jsx maps a large set of pages such as market overview, coin detail, alerts, watchlist, portfolio, AI chat, arbitrage, backtesting, screener, heatmap, on-chain, and whale alerts. NotFoundPage handles unmatched routes, so the navigation layer is intentionally broad and feature-driven.

The app’s main business logic is split across feature components and reusable hooks. src/features/ contains higher-level screens like MarketPage and CoinDetailPage, while src/hooks/ contains the data-fetching and derived-state logic for live prices, market data, charting, alerts, page titles, and coin details. This keeps UI components relatively thin and pushes API and transformation logic into reusable modules.

External market data appears to come through utility clients in src/utils/, especially marketAPI.jsx and apiClient.jsx. Those utilities likely consume CoinGecko data directly or via the local proxy endpoints. The presence of api/coingecko-proxy.js indicates the repository uses a serverless proxy boundary to avoid browser-side CORS issues and to centralize outbound API access.

AI functionality is isolated as a separate subsystem. src/pages/AiChatPage.jsx talks to src/utils/geminiAPI.jsx, which in turn is backed by api/gemini-proxy.js. That creates a clean separation between the browser UI and the Gemini service, with the proxy acting as the trust boundary for any API keys or request shaping.

Client-side state is divided into shared context and persisted stores. src/context/ThemeContext.jsx and src/context/CurrencyContext.jsx manage app-wide preferences, while src/store/alertsStore.jsx, watchlistStore.jsx, and portfolioStore.jsx hold user-managed domain state. This points to a hybrid state model: React context for global settings and dedicated stores for domain data that likely needs persistence or cross-page access.

There is also a local persistence layer for chart data. src/utils/indexedDbCharts.jsx suggests chart history or time-series caches are stored in IndexedDB, which reduces repeat fetches and supports richer chart interactions. This is an important architectural boundary because it moves part of the data layer into the browser itself.

Visualization is a major subsystem. src/components/CandlestickChart.jsx, the various market pages, and utility hooks like useChart indicate charting and technical-analysis-style views are first-class. src/components/ui/Toast.jsx and src/components/ErrorBoundary.jsx provide shared UX infrastructure for transient feedback and fault isolation.

Styling and build tooling are standard but relevant to the architecture. The repo uses Tailwind CSS (tailwind.config.js, postcss.config.js) and Vite (vite.config.js) for fast SPA builds and development HMR. eslint.config.js defines code quality boundaries, while vercel.json ties the app to Vercel deployment and serverless function hosting.

Overall data flow is: user navigates a route, a page or feature component invokes a hook, the hook calls a utility/API client, the request may go through a local serverless proxy to an external service, and the result is normalized into shared state or rendered directly. User preferences and app-specific data then flow back through contexts/stores and, where needed, browser persistence such as IndexedDB.