Input Page
Results Dashboard

About the project

Inspiration

Making important life decisions - career moves, financial choices, relationships - is stressful. We often get stuck in overthinking, bias, or analysis paralysis. Decision GPT was born from the idea that AI can help cut through the noise: not to decide for you, but to give you a structured, balanced breakdown so you can see the full picture before committing.

What it does

Decision GPT is a web app where you describe a dilemma and get back a full AI-powered analysis:

Decision Overview — a neutral summary of your situation
Pros & Cons — weighted lists of upsides and downsides
Risk Matrix — each risk tagged as high, medium, or low
Bias Detection — identifies potential cognitive biases in how you framed the problem (dismissible)
Time Horizons — short-term (6–12 months) and long-term (1–5 years) impact
Strategic Alternatives — numbered alternative paths to consider
Devil's Advocate — critical counter-arguments to challenge your assumptions
Final Recommendation — a graded recommendation with a confidence bar

All presented in a dark Neon Tokyo interface with hot pink accents, neon glow effects, and smooth animations.

How we built it

Frontend: Next.js 16 with the App Router, React 19, TypeScript
Styling: Tailwind CSS v4 with a custom Neon Tokyo theme (dark background #0a0a0f, primary #ff2d78, Sora font)
Animations: Framer Motion for page transitions and loading states
AI: Mistral AI API (mistral-large-latest) with a structured system prompt that forces JSON output
Icons: Material Symbols (psychology, auto_awesome, check, close, warning, etc.)
Deployment: Serverless on Netlify with environment-variable-based API key management
Design: Input page uses sharp 4px corners, results page has rounded 1rem cards, fixed navbar with psychology icon, no copy/share buttons

The API route at app/api/analyze/route.ts acts as a thin proxy: it receives the user's decision + metadata, sends a carefully engineered prompt to Mistral, and streams back a structured JSON response that maps directly to the result cards.

Challenges we ran into

Prompt engineering: Getting Mistral to consistently return valid, well-structured JSON with all 9 sections was the hardest part. The system prompt needed explicit formatting rules and fallback instructions.
State management: Handling the form → loading → results flow with AnimatePresence required careful coordination between framer-motion exit animations and React state resets.
Responsive design on a dark theme: Neon glow effects and colored borders that look great on desktop can break or clip on mobile. Every card had to be tested at 320px width and adjusted with responsive padding.
Next.js 16 quirks: The dev indicator, font loading, and some v4 Tailwind behaviors differed from older Next.js versions. Had to check node_modules/next/dist/docs/ for breaking changes.

Accomplishments that we're proud of

A cohesive, polished visual theme that looks genuinely cyberpunk/Neon Tokyo — consistent down to the favicon SVG
The typewriter loop on the heading (before the user asked to remove it, it was smooth)
All 9 result sections render with zero layout shift, even with partial API responses
The bias alert is dismissible, making it feel like a real UI pattern rather than a static warning
Build passes with zero errors, TypeScript strict mode clean

What we learned

How to structure AI prompts for reliable structured JSON output
Tailwind CSS v4's @theme system for custom design tokens
Framer Motion's AnimatePresence with mode="wait" for seamless page transitions
Netlify's Next.js plugin handles API routes automatically — no functions config needed
Reading framework documentation (Next.js docs in node_modules) is faster than guessing when APIs change