🚀 First PR Concierge

You open a popular repo. There are 847 open issues. You filter by "good first issue." Still 143 issues. You read the first one and immediately feel like you need a PhD. You close the tab. You tell yourself maybe tomorrow.

Sound familiar? That cycle ends today.

First PR Concierge bridges the gap between a confusing GitHub issue list and a confident developer. It's your personal AI matchmaker for open source contributions.

🔗 Live App: first-pr-concierge.vercel.app

How it works in 60 seconds:

1. Paste your GitHub profile URL
2. Watch as we analyze your skills in real-time
3. Browse your perfectly matched issues
4. Click any issue → get an AI-generated roadmap
5. Get your personalized pep talk → ship your PR! 🎉

Frontend    → Next.js 15 (App Router) + TypeScript
Styling     → Tailwind CSS v4 + shadcn/ui + Framer Motion
AI          → Google Gemini 1.5 Flash
Data        → GitHub REST API v3
Hosting     → Vercel

• Node.js 18+
• A GitHub account
• A Google AI Studio account (free)

git clone https://github.com/yourusername/first-pr-concierge.git
cd first-pr-concierge

npm install

cp .env.example .env.local

Open .env.local and fill in your keys:

# GitHub Token (optional but recommended for higher rate limits)
# Get yours at: https://github.com/settings/tokens
GITHUB_TOKEN=your_github_pat_here

# Gemini AI API Key (required for AI features — it's FREE!)
# Get yours at: https://aistudio.google.com/app/apikey
GEMINI_API_KEY=your_gemini_key_here

npm run dev

Open http://localhost:3000 🎉

first-pr-concierge/
├── app/
│   ├── page.tsx                    # 🏠 Landing page with animated hero
│   ├── layout.tsx                  # Root layout with metadata
│   ├── globals.css                 # Custom styles + animations
│   ├── analyze/[username]/
│   │   └── page.tsx               # 🔬 Analysis + issue matching page
│   └── api/
│       ├── github/route.ts        # GitHub profile + language analysis
│       ├── issues/route.ts        # Good First Issue fetching + matching
│       ├── demystify/route.ts     # 🧠 AI Issue De-mystifier (Gemini)
│       └── pep-talk/route.ts      # 💜 AI Encouragement Engine (Gemini)
├── components/
│   ├── AnimatedBackground.tsx     # Canvas star field + orb effects
│   ├── ProfileInput.tsx           # GitHub URL input with validation
│   ├── ProfileCard.tsx            # User profile display card
│   ├── SkillBars.tsx              # Animated language skill bars
│   ├── IssueCard.tsx              # Individual issue card
│   ├── RoadmapModal.tsx           # AI roadmap modal dialog
│   ├── PepTalkModal.tsx           # Encouragement engine modal
│   └── LoadingState.tsx           # Skeleton loading state
└── lib/
    └── utils.ts                   # Shared utilities + helpers

When you click an issue, we send the issue title, body, and your skill profile to Gemini 1.5 Flash. It returns:

1. 📁 Where to Look — Specific folders and files in the repository
2. ⚙️ What to Change — The exact logic or component that needs modification
3. 🧪 How to Test — Commands to verify your changes work

Before you hit "Contribute," our AI generates a personalized pep talk using your:

• GitHub username
• Top languages
• Repository count & stars
• Skill level assessment

The result? A custom message that makes you feel seen, capable, and excited to code.

• Animated star field — Canvas-based particle system
• Glassmorphism cards — Frosted glass effect with backdrop blur
• Framer Motion animations — Smooth page transitions and stagger effects
• Responsive design — Works beautifully on mobile and desktop
• Dark-first — No eye strain, just vibes

npm install -g vercel
vercel --prod

Add your environment variables in the Vercel dashboard under Settings → Environment Variables.

This project was built with ❤️ for developers who want to contribute but don't know where to start. We welcome contributions!

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request 🎉

MIT License — see LICENSE for details.

• GitHub REST API for powering issue discovery
• Google Gemini AI for the AI magic
• shadcn/ui for beautiful, accessible components
• Framer Motion for silky animations
• Every open source maintainer who added "good first issue" to make our lives easier 💜