🧠 Joey Developer Dashboard (Vercel + API Integration)

📍 Purpose

This dashboard is a web-based interface built using Next.js (or Astro) and hosted on Vercel. It acts as the control center for Joey’s stock intelligence, allowing you to:

• View, verify, and debug live stock data from Yahoo Finance and SEC EDGAR
• Manage API endpoints your Flutter app will connect to
• Experiment with Joey’s GPT stock summaries before they’re sent to users
• Train and test Joey’s tone and logic using real OpenAI GPT API
• See what Joey sees — in a clean, visual way
• Monitor online users and their portfolio trends (aggregated, anonymized)
• Track system usage, token consumption, and user interactions with GPT

---

✅ Why This Is a Great Idea

Benefit	Explanation
🧪 Test before going live	View raw data and debug in-browser before sending to app
🎯 Centralize logic	API routes + frontend live in one Vercel project
🛠 Easier dev workflow	Visual dashboard is faster than app-only testing
🧠 Joey's brain HQ	GPT summaries, insights, and picks — all editable here
🗣️ Train Joey’s AI voice	Craft, preview, and fine-tune how Joey responds to users
📈 See user trends	Gain insight into what stocks users are buying and watching
📊 Analyze usage	Track Joey's prompt-response logs and OpenAI token usage

---

📐 Product Requirements Document (PRD)

✅ Objective

To build a developer/admin dashboard that enables real-time viewing, testing, monitoring, and configuration of the Joey AI stock assistant ecosystem.

🧩 Features to Build

Feature	Type	Description
Quote Viewer	Page	Query live stock data by ticker using yfinance
Pro Picks Viewer	Page	Load and visualize SEC 13F filings by CIK number
Discover Preview	Page	Show AI-generated weekly stock recommendations
Joey Agent Playground	Page	Test and fine-tune GPT prompts for Joey
Prompt Template Manager	Page	Create/edit/save GPT system prompt templates
Prompt Logs Viewer	Page	Log history of GPT prompts/responses with rating buttons
Market Scanner	Page	Live feed of top movers, high-volume stocks, and trends
User Monitor	Page	Show anonymous user activity and trending holdings
Analytics Dashboard	Page	Show API call count, token usage, top stocks/questions
Admin Tools	Page	Manual cache clear, data push, and error viewer
Admin Users	Page	View and manage user accounts, assign Pro roles
API Endpoints	Backend	RESTful routes for data and AI integration
Supabase Integration	DB Layer	Store and retrieve all user, log, and trend data

🛠 Tech Stack

Layer	Tech
Frontend	Next.js (preferred), TailwindCSS, TypeScript
Backend APIs	Node.js API routes in Next.js (or separate Python if needed)
Hosting	Vercel (frontend + API routes)
GPT Service	OpenAI API (GPT-3.5 or GPT-4)
Database	Supabase (PostgreSQL) + Edge Functions if needed

🧑‍💻 Dev Notes

• Secure pages with basic admin auth or Supabase auth
• Store OpenAI keys securely in .env.local and Vercel
• Use serverless functions for all API routes to simplify maintenance
• Token tracking and logs should include timestamps, user context, and feedback
• Flutter app must be able to consume all API endpoints via HTTPS

---

🧱 Recommended Structure

joey-dashboard/
├── pages/
│   ├── index.tsx             → Dashboard UI homepage
│   ├── discover.tsx          → Preview Joey's AI picks
│   ├── pro-picks.tsx         → View SEC 13F holdings
│   ├── joey-agent.tsx        → 🧠 Test and train Joey’s AI responses
│   ├── users.tsx             → 📊 View online users & portfolio insights
│   ├── scanner.tsx           → 🔍 Real-time stock feed & trending stocks
│   ├── prompt-logs.tsx       → 🗃 View prompt-response history with feedback
│   ├── templates.tsx         → 🧩 Prompt template manager
│   ├── analytics.tsx         → 📈 Dashboard usage and token tracking
│   ├── admin/users.tsx       → 🔐 Manage user accounts and Pro access
│   ├── api/
│   │   ├── quote.ts          → Pull data from yfinance
│   │   ├── batch-quote.ts    → Multiple stock fetch
│   │   ├── pro-picks.ts      → SEC filings parser
│   │   ├── summary.ts        → GPT stock explainer
│   │   ├── users.ts          → Return active users + stocks (from Supabase)
│   │   ├── logs.ts           → Joey prompt history storage
│   │   ├── templates.ts      → Load/save Joey prompts
│   │   ├── stats.ts          → Token + app usage stats
├── components/               → Cards, charts, tables, AI prompt input
├── styles/                   → Dashboard styling
├── lib/                      → Supabase and fetch helpers
├── .env.local                → API keys, tokens
└── vercel.json               → Vercel config

Let me know if you want the dev to also get a UI/UX checklist, milestone tracker, or starter template.