The latest articles on DEV Community by Hiroto Yoshida (@hiroto_yoshida_f8440a4a54). https://dev.to/hiroto_yoshida_f8440a4a54 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3959261%2F3de410ed-954c-4e69-a19e-26c64176a137.jpg https://dev.to/hiroto_yoshida_f8440a4a54 en Hiroto Yoshida Sat, 30 May 2026 00:39:38 +0000 https://dev.to/hiroto_yoshida_f8440a4a54/im-15-built-my-first-real-project-in-4-days-and-put-it-on-gumroad-3ihc https://dev.to/hiroto_yoshida_f8440a4a54/im-15-built-my-first-real-project-in-4-days-and-put-it-on-gumroad-3ihc <h1> I'm 15 and Built an AI Energy Dashboard with Next.js 15 + Groq </h1> <p>Hey Dev.to! 👋</p> <p>I'm a 15-year-old student developer from South Korea. <br> I just finished my first real production project — FuelScope AI.</p> <h2> What is it? </h2> <p>An energy market intelligence dashboard that uses <br> Groq's Llama 3.3 70B to summarize real energy news in real time.</p> <p>🔗 <strong>Live Demo: <a href="https://fuelscope-ai.vercel.app" rel="noopener noreferrer">https://fuelscope-ai.vercel.app</a></strong></p> <h2> What it does </h2> <ul> <li>⛽ Regional gas price cards</li> <li>📈 Energy stock tickers (XOM, CVX, SHEL)</li> <li>🤖 AI-summarized energy news (Llama 3.3 70B via Groq)</li> <li>🗺️ Interactive Mapbox station map</li> <li>📍 GPS nearest station finder</li> <li>🎨 Apple-inspired clean design</li> </ul> <h2> Tech Stack </h2> <ul> <li> <strong>Next.js 15</strong> + TypeScript</li> <li><strong>Tailwind CSS</strong></li> <li> <strong>Groq API</strong> (Llama 3.3 70B) — FREE tier</li> <li> <strong>GNews API</strong> — FREE tier</li> <li><strong>Mapbox GL JS</strong></li> <li> <strong>Vercel</strong> deployment</li> </ul> <h2> What I learned </h2> <p>This was my first time building something with:</p> <ul> <li>Real API integrations</li> <li>AI summarization pipeline</li> <li>Production deployment on Vercel</li> <li>Apple design system principles</li> </ul> <p>Honestly learned more in 4 days building this than months of tutorials.</p> <h2> Honest disclosure </h2> <p>Gas prices and stock data are mock values — <br> the README includes guides for swapping in real APIs <br> (EIA, Alpha Vantage, etc.). <br> The AI news summaries are 100% live though.</p> <h2> Template </h2> <p>I'm selling the template for $19 on Gumroad if anyone <br> wants to build on top of it:<br> 👉<a href="https://LZF01.gumroad.com/l/djzoaj" rel="noopener noreferrer">https://LZF01.gumroad.com/l/djzoaj</a></p> <p>Would love any feedback from the community! 🙏</p> <p><em>Built with Next.js 15, Groq, GNews, Mapbox</em></p> ai beginners nextjs showdev