Neko Singa — App

Frontend dashboard for Neko Singa — real-time crypto market intelligence powered by social sentiment. Built as a direct response to the Full-Stack Engineer (Frontend-Leaning) role at Elfa AI.

Live (Production): app-nekosinga.vercel.app API Backend: api-nekosinga.vercel.app — live and responding

---

Current Status

Environment	Status	Notes
Local (localhost:3001)	✅ Working	Full data load — trending tokens, news feed, wallet connect button
Production (app-nekosinga.vercel.app)	✅ Working	Backend deployment issues resolved — see below

What it looks like when connected:

The dashboard renders trending tokens ranked by social mindshare, real-time percentage changes, mini sparkline charts, and a live news/mentions feed on the right panel — all pulling real data from the Elfa API via the backend.

---

Production Incident History

Production was blocked for a while by issues on the api side, not this repo. Documenting it here since it directly explains why the "Production" row above went from broken to working, and because the debugging path is worth keeping on record.

1. CORS — resolved

The frontend and backend are deployed as separate projects on Vercel (app-nekosinga.vercel.app and api-nekosinga.vercel.app), on different subdomains, so the browser enforces CORS.

• FRONTEND_URL in the api project was initially set with a trailing slash (https://app-nekosinga.vercel.app/). Browsers send the Origin header without a trailing slash, so the check failed silently even though the configured value looked correct.
• Vercel runtime logs for api showed zero incoming requests during the failure window, confirming the browser was blocking at the CORS preflight (OPTIONS) stage, before requests ever reached the server.
• Fixed by correcting the env var, and by explicitly handling OPTIONS preflight requests in src/index.ts (app.options('/{*path}', cors(corsOptions))) rather than relying on default behavior.

2. API deployment failures — resolved

Once CORS was fixed, the api deployment itself turned out to have two further issues blocking it from running at all in production (build crash from an unstable TypeScript preview version, then a CommonJS/ESM module mismatch with the kysely query builder). Full root-cause breakdown and fixes are documented in the api README.

Net effect for this repo: no frontend code changes were required. Once api-nekosinga.vercel.app was actually serving requests correctly, this app's existing data-fetching logic worked in production exactly as it already did locally.

---

Tech Stack

Layer	Technology	Purpose
Framework	Next.js + TypeScript	UI & routing
Styling	Tailwind CSS	Design system, brand palette
Auth / Wallet	@privy-io/react-auth	Multi-method login (wallet, email, Google, Twitter)
On-chain Data	wagmi + viem	Read on-chain data after wallet connect
State / Fetch	@tanstack/react-query	Data fetching & caching
Chart	lightweight-charts	Price/candlestick charts
Data Source	nekosinga/api	Trending tokens, sentiment, news

---

Design

Dark theme with orange accent (#F97316) derived directly from the Neko Singa brand logo. Inspired by the Elfa product UI — data-dense layout, token rankings with sparklines, and a live news panel on the right. See design.md for full color tokens and component patterns.

---

What's Next (v1 Remaining)

• Fix production CORS — resolved, see Production Incident History above
• Token detail page — click any token row → candlestick chart + sentiment/mentions toggle (via lightweight-charts + /api/market/sentiment/:token)
• Wallet connect flow — "Connect Wallet" button in UI, Privy integration in progress
• Token icons via CoinGecko — replace current fallback badges with real icons via /api/market/icon/:symbol (proxy + 24h Redis cache)

---

What's Out of Scope (v1)

• AI Chat — Elfa's AI Chat endpoint (elfa.chat) requires their Grow plan ($290/mo). Planned as v2 milestone — architecture is scaffolded, just needs a plan upgrade to activate. See the api README for full context.
• Live order book / trade execution — requires a WebSocket connection to Hyperliquid exchange, out of scope for this build.
• TradingView Advanced Charts — the full charting library requires a formal approval process. Using lightweight-charts (open-source, same publisher) as the practical alternative.

---

Related Repos

Part of the nekosinga polyrepo:

• api — Express backend, Elfa SDK, Postgres, Redis
• web — landing page
• docs — documentation