I'm 15 and Built an AI Energy Dashboard with Next.js 15 + Groq
Hey Dev.to! 👋
I'm a 15-year-old student developer from South Korea.
I just finished my first real production project — FuelScope AI.
What is it?
An energy market intelligence dashboard that uses
Groq's Llama 3.3 70B to summarize real energy news in real time.
🔗 Live Demo: https://fuelscope-ai.vercel.app
What it does
- ⛽ Regional gas price cards
- 📈 Energy stock tickers (XOM, CVX, SHEL)
- 🤖 AI-summarized energy news (Llama 3.3 70B via Groq)
- 🗺️ Interactive Mapbox station map
- 📍 GPS nearest station finder
- 🎨 Apple-inspired clean design
Tech Stack
- Next.js 15 + TypeScript
- Tailwind CSS
- Groq API (Llama 3.3 70B) — FREE tier
- GNews API — FREE tier
- Mapbox GL JS
- Vercel deployment
What I learned
This was my first time building something with:
- Real API integrations
- AI summarization pipeline
- Production deployment on Vercel
- Apple design system principles
Honestly learned more in 4 days building this than months of tutorials.
Honest disclosure
Gas prices and stock data are mock values —
the README includes guides for swapping in real APIs
(EIA, Alpha Vantage, etc.).
The AI news summaries are 100% live though.
Template
I'm selling the template for $19 on Gumroad if anyone
wants to build on top of it:
👉https://LZF01.gumroad.com/l/djzoaj
Would love any feedback from the community! 🙏
Built with Next.js 15, Groq, GNews, Mapbox
Top comments (0)