CRYPCOIN
A real-time cryptocurrency market app built with Next.js. It streams live prices from Binance and draws interactive charts with TradingView Lightweight Charts.
Overview
CRYPCOIN is a dynamic web application designed to provide users with real-time cryptocurrency market data using the Binance WebSocket API. Built for traders and crypto enthusiasts, it offers a responsive and intuitive interface to monitor market trends and make informed decisions.
The markets page tracks around 20 popular coins against USDT, with prices updating live. Each coin has its own page with a live chart powered by TradingView Lightweight Charts, a choice of six chart styles and eleven time intervals, plus a short description of the coin. This project showcases real-time data streaming, front-end development and financial data visualisation.
Key Features
📈 Live Markets
- Around 20 coins including BTC, ETH, SOL and XRP
- Prices that update in real time
- 24-hour price change and market stats
🕯️ Interactive Charts
- Six styles: candlestick, bar, line, area, baseline and histogram
- Eleven intervals, from 1 minute to 1 month
- New candles drawn live as trades happen
🪙 Coin Pages
- A dedicated page for every trading pair
- Short explainer for each coin
- Times shown in the visitor’s local time zone
How It’s Built
- Frontend: Next.js App Router with React and Tailwind CSS. Each trading pair is served by a single dynamic route.
- Historical data: When a chart opens, the app loads up to 1,000 past candles from the Binance REST API, so there’s history on screen straight away.
- Live data: Binance WebSocket streams then push new candles and 24-hour ticker updates, which update the charts and prices without refreshing the page.
- Charts: TradingView Lightweight Charts renders all six chart types, with resize observers to keep them responsive on any screen size.
- Hosting: Deployed on Vercel with Vercel Analytics.
Tech Stack
Next.js · React · Tailwind CSS · Binance WebSocket & REST API · TradingView Lightweight Charts · Vercel
