Build an AI Career Compass App with Next.js, MongoDB, Hostinger & Google Gemini

Description

https://www.hostinger.com/albertai Building an AI-powered career planning app can feel complex, but this tutorial walks you through it step-by-step with Next.js, TypeScript, Clerk Auth, Gemini AI, and MongoDB. In this beginner-friendly 2026 guide, you’ll learn how to build **Career Compass AI** from scratch: an app that onboards users, generates a personalized 12-month career roadmap, tracks task progress, and includes an AI career assistant (“Jake”) for real-time guidance. By the end, you’ll understand how to combine modern frontend architecture, authentication, AI APIs, and persistent user state into one production-style application. What You’ll Learn Core Concepts & Setup - Next.js App Router fundamentals and project structure - TypeScript essentials for building maintainable full-stack apps - Shadcn + Tailwind CSS UI setup for clean, modern interfaces Authentication & User Flow - How to integrate Clerk for sign-up/sign-in - Protected routes and user-specific experiences - Building onboarding forms to capture career goals and constraints AI-Powered Features - Generating personalized 12-month career plans with Gemini - Designing structured prompts for consistent JSON responses - Building “Jake” (AI assistant) for contextual follow-up coaching Data Persistence & State - Saving and restoring user app state with MongoDB - Creating robust API routes (`/api/plan`, `/api/chat`, `/api/state`) - Handling API failures gracefully with fallback logic UX & Product Thinking - Monthly roadmap + task tracking workflow - Progress indicators and actionable career milestones - Designing an app that’s practical, motivating, and scalable 🛠️ Technical Stack: - ⚙️ Next.js 16 (App Router) - ⚙️ TypeScript - ⚙️ React 19 - ⚙️ Clerk Authentication - ⚙️ Gemini API (`@google/genai`) - ⚙️ MongoDB - ⚙️ Tailwind CSS + Shadcn UI - ⚙️ Lucide Icons 📚 Materials/References: - GitHub Repo: https://github.com/mendsalbert/career-compass-ai - Clerk Docs: https://clerk.com/docs - Gemini API Docs: https://ai.google.dev/ - Next.js Docs: https://nextjs.org/docs 👋 Social Media: https://twitter.com/mendsalbert https://linkedin.com/in/mends-albert 💼 Business inquiries: albert.k.mends@gmail.com #Nextjs #TypeScript #Clerk #GeminiAI #MongoDB #AIApps #SaaS #WebDevelopment #FullStackDevelopment #Programming #Coding #CareerCompassAI #AppRouter #React #Shadcn #TailwindCSS #SoftwareEngineering #BuildInPublic #TechTutorial #BeginnerFriendly ⏰ Timestamps: 00:00:00 - 00:02:17 Intro + Demo 00:02:17 - 00:05:27 Project overview (Career Compass AI) 00:05:27 - 00:07:55 Setup (Next.js + TypeScript + Shadcn) 00:07:55 - 00:15:55 Clerk authentication (Sign up / Sign in) 00:15:55 - 00:30:57 Onboarding flow and UX 00:30:57 - 00:47:05 Gemini AI plan generation (`/api/plan`) + AI chat assistant Jake (`/api/chat`) 00:47:05 - 00:53:09 MongoDB state persistence (`/api/state`) 00:53:09 - 01:04:02 Task tracking and progress UI 01:04:02 - hosting + Final demo + wrap up