A simple stock dashboard that fetches live quotes and displays them in a responsive Tailwind table. Built with React and served by Bun with a small API proxy.
Core features:
- Fetches and displays stocks in a table (symbol, price, change %).
- Responsive Tailwind styling.
- Loading and error states.
- Search and sortable columns.
Optional enhancements can be added (charts, etc.).
- Install dependencies:
bun install- Configure environment:
Create a .env file (or set env var when deploying) with your TwelveData API key. Falls back to the public demo key if not provided.
# .env
API_KEY=your_twelvedata_api_key- Start development server:
bun devThis serves the app at the URL Bun prints (e.g., http://localhost:3000) and enables HMR.
- Production run:
bun start- Build static assets (if needed):
bun run build.tsThe Bun server exposes a proxy endpoint to avoid exposing your API key in the browser and to handle CORS:
- GET
/api/stocks?symbols=AAPL,MSFT,GOOGLreturns an array of{ symbol, price, change_percent, updated }.
It uses TwelveData under the hood with process.env.API_KEY || 'demo'.
This repo includes vercel.json and serverless functions in api/. Frontend is built to dist and deployed as static assets; API lives under /api/*.
Steps:
- Install Vercel CLI and login:
npm i -g vercel && vercel login - Set env var:
vercel env add API_KEY(paste your TwelveData key). You can also set it in the dashboard. - Deploy:
vercel --prod
Vercel will run bun install && bun run build.ts and serve dist/ as the site with SPA fallback, plus /api/stocks and /api/series serverless endpoints.
- Netlify/Render/Fly: You can run
bun startfor a long-lived server instead of serverless; or deploy static files and move APIs to provider functions. - GitHub Pages: Not suitable for serverless API unless you switch to demo-only client-side fetches or host the API separately.
- Loading spinner while fetching data.
- Error handling and user message when API fails.
- Search filter and sortable columns.