Inspiration

The inspiration behind SkillMentor AI came from the idea of making learning more personalized, accessible, and engaging. Many people struggle with where to start when learning a new skill, and I wanted to create a platform that removes those barriers by combining structured onboarding, AI-powered tutorials, and resources in one place.

What I Learned

While building this project, I learned how powerful AI can be when combined with web development frameworks. I also deepened my knowledge of Next.js, Supabase, and state management with Zustand. Most importantly, I learned how to use Kiro to structure AI-driven conversations, code generation, and onboarding flows.

How I Built It

The project is a Progressive Web App built with:

Frontend: Next.js 14 (App Router) + TailwindCSS + shadcn/ui + Material UI

State Management: Zustand

Backend/Database: Supabase (PostgreSQL, Auth, Realtime)

AI: Google Gemini 1.5 Flash, integrated through Kiro for AI tutorials and onboarding flows

Form Handling: React Hook Form + Zod validation

Other: PWA support with offline readiness and mobile installability

The development process started with designing the user flow: onboarding, AI tutorial, resources, and user profiles. Then, using Kiro, I structured conversations and prompts to guide the AI tutorial generation and onboarding experience.

Challenges

One major challenge was integrating AI. At first, I planned to use OpenAI, but due to the cost, I had to find an alternative. I switched to Google Gemini 1.5 Flash, which worked very well and allowed me to continue building without financial limitations. Another challenge was ensuring smooth onboarding and creating a simple yet effective user interface that worked seamlessly as a PWA.

Built With

Next.js 14

TailwindCSS

shadcn/ui

Material UI

Zustand

Supabase (PostgreSQL, Auth, Realtime)

Google Gemini 1.5 Flash

React Hook Form + Zod

Kiro

Built With

• gemini
• github
• next.js
• shadcn/ui
• supabase
• tailwindcss
• vercel
• zod
• zustand