Career Swipe

landing page
swipe page
battle page
results page

Inspiration

I genuinely had no idea what I wanted to do after school. Every career quiz I tried was like 50 questions long and I never finished any of them. I thought if I could just see careers the same way I scroll through stuff on my phone, maybe I'd actually get through it. That's basically where CareerSwipe came from.

What it does

You swipe through career cards like a feed. Like it, skip it, or super like it. After 5 swipes you can already see your top matches. The more you swipe, the better it gets. At the end you get a Career DNA chart showing what you actually value (creativity, stability, income, etc.), your top career matches ranked by how well they fit your patterns, and an AI written day in the life for each one that's personalized to your specific swipe history. There's also a Battle mode where you pick which career wins in a head to head comparison before seeing the actual stats.

How we built it

Next.js for the frontend, Tailwind CSS for styling, Framer Motion for the swipe animations. The recommendation engine is custom built. It tracks which tags you gravitate toward across all your swipes and builds a preference profile, then scores every career in the database against that profile. For the AI part I used the Groq API with Llama 3.3 70B to generate personalized day in the life previews based on your profile. Everything runs in the browser with localStorage so there's no backend or login needed. Deployed on Vercel.

Challenges we ran into

Getting the swipe gesture to feel natural on both mobile and desktop took way longer than I expected. The recommendation engine also went through a few versions before the matches actually made sense. Early on it was giving really generic results because the scoring wasn't weighted properly. The other thing was the AI prompt, getting it to write something that felt personal to your profile instead of just a generic job description took a lot of iteration.

Accomplishments that we're proud of

The Career DNA radar chart came out really well. I also think the blind mode is a cool idea, you can turn off the career title and just react to the actual job description, and then it reveals what you liked at the end. The AI day in the life actually surprised me with how different it is for different swipe profiles.

What we learned

I learned a lot about how recommendation systems actually work. Building one from scratch made me understand why the data model matters so much. I also learned how to write prompts that get useful output instead of generic stuff, which is harder than it sounds.

What's next for Career Swipe

Adding more careers to the database, right now it's 60. I also want to add a feature where you can save your results and share a link to your career profile. Maybe a school version where teachers can see aggregate data on what careers their students are interested in.