Built StoxIQ
StoxIQ is a beginner-friendly guide to stocks and the market, built for the US, UK, and Africa. Its tagline is "Your Market. Your Knowledge." The idea is to learn how investing works before putting in your first dollar.
How it works You go through short lessons in a curriculum and take quizzes to check what you learned. A brokerage directory shows where to start investing in your region, with minimums shown as "From about $X, verify on official site". A glossary explains jargon with simple analogies. There's no sign-in. Your progress is saved in your browser (localStorage). A currency setting switches between USD, GBP, and NGN.
How to navigate Landing page: the intro and entry point. Start here. Learn: the lesson reader with quizzes. Work through it in order. Brokerages: pick your region (US, UK, or Nigeria) to see platforms and their regulators. Glossary: look up any term you hit while learning. Settings: change the currency and light/dark mode. The theme toggle is also in the header.
Tech stack
- Claude
- Vercel
Links
Prompt
You're a full-stack developer. I want you to build this educational stock market web app for beginners from scratch.
PROJECT:
StoxIQ is a beginner-friendly guide to stocks and the market, built for users in the US, UK, and Africa (Nigeria first). Tagline: "Master the market before you invest your first dollar." Users learn through short lessons and quizzes, look up jargon, and find regulated brokerages for their region. There is no sign-in. Progress is saved in the browser.
TECH STACK:
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- shadcn/ui (Radix)
- Supabase (for lesson, brokerage, and glossary content only)
- Vercel (deployment)
CORE FEATURES:
1. Curriculum with a lesson reader and a quiz at the end of each lesson
2. Regional brokerage directory with tabs for US, UK, and Nigeria
3. Jargon glossary with a plain-language analogy for each term
4. Progress tracking in localStorage (lessons completed, quiz scores)
5. Settings: currency display (USD / GBP / NGN) and light/dark theme
UI/UX:
- Dark, clean, Apple-style design as the default, with a real light mode
- Theme toggle in the header
- Logo: a crossing "X" mark
- Compact footer
- Smooth, subtle animations that don't slow the app down
- Mobile-first and responsive
PAGES:
1. Landing page
2. Learn (curriculum list + lesson reader with quizzes)
3. Brokerages
4. Glossary
5. Settings
FUNCTIONAL REQUIREMENTS:
- Lessons are shown in order, and completed ones are marked
- Each quiz gives instant feedback and saves the score locally
- Brokerage cards show: name, real company logo (with a letter-tile fallback if the logo fails to load), a regulator/broker-partner line, and the minimum as "From about $X, verify on official site"
- Do not use star ratings on brokerages
- The region tab is labeled "Nigeria", not "West Africa"
- The currency setting converts the displayed minimums
- Glossary has search and shows each term with its analogy
- Seed the database with starter lessons, quizzes, brokerages, and glossary terms
- Supabase tables use Ro1 like · 1 view