-
-
the starting window (light mode)
-
game mode (light mode)
-
quiz category (dark mode)
-
pick difficulty level (dark mode)
-
quiz question example (dark mode)
-
explaining the correct answer and the origin of the slang (dark mode)
-
giving out the badge and roast based on the final score (dark mode)
-
slang scenario question example (dark mode)
-
slang situation result + final roast (dark mode)
Inspiration
I noticed that slang is one of the most culturally loaded forms of communication — it signals where you're from, what communities you belong to, and how chronically online you are. As an international student myself, I have always been intrigued by the slang culture here and how much it reflects the communities around me. I wanted to build something that felt alive, personalized, and genuinely fun to play with friends. The idea of getting roasted by AI for not knowing what "ratio'd" means was too good to pass up.
What it does
Tapped In! is an AI-powered slang fluency game with two modes. In Quiz Mode, players choose a slang category and difficulty level, then answer 5 dynamically generated multiple-choice questions — no two games are ever the same. Players can use a hint to see the slang used in context, refresh a word they don't recognize, and get a detailed explanation when they get something wrong. In Slang Situation Mode, players pick a theme like School, Dating, or Gaming, then navigate a 3-round AI-generated conversation scenario where they are tested on slang meaning, tone, and how to respond. Claude scores every answer, explains what a 10/10 response looks like, and delivers a brutal personalized roast at the end. Players earn a badge — FOB, LOCAL, or HIM/HER — based on their total score.
How I built it
I built Tapped In! using Next.js 14 as my full-stack framework, with React on the frontend and Next.js API routes as my serverless backend. All AI features are powered by Claude Haiku 4.5 through the Anthropic API — including question generation, hint generation, answer scoring, slang explanations, and end-game roasts. I used browser localStorage for score persistence and deployed on Vercel. Nothing in the app is hardcoded — every question, scenario, score, and roast is generated in real time by Claude.
Challenges I ran into
The biggest challenge was getting Claude to return consistent JSON every time across many different prompt types. I solved this by using regex to extract JSON from responses and adding strict formatting instructions to every prompt. I also struggled with Claude defaulting to safe middle scores around 7/10 for everything — I fixed this by writing explicit scoring rubrics with score ranges and instructions to vary scores based on answer quality. CORS was another early blocker when I tried calling the API directly from the browser, which I resolved by routing all API calls through Next.js server-side API routes.
Accomplishments that I'm proud of
I am proud that every single feature in the app is genuinely AI-driven — there is no static content anywhere. The Slang Situation mode especially came together well, with Claude maintaining narrative continuity across 3 connected scenes and generating contextually relevant scoring and feedback. I am also proud of the UCSD Triton-themed light mode and the overall polish of the UI, given the time constraints.
What I learned
I learned how to structure prompts for consistent structured outputs, how to handle AI unpredictability gracefully with fallbacks, and how to build a full-stack AI app from scratch under time pressure. I also learned that prompt engineering is genuinely its own skill — small changes to how you phrase instructions to Claude make a huge difference in output quality.
What's next for Tapped In!
I want to polish up the existing features and position Tapped In! as a genuinely useful tool for international students to pick up slang naturally and get to know the culture around them — making the learning feel fun rather than forced. I also want to add a real-time multiplayer mode where friends compete on the same slang round simultaneously, a user-submitted slang validator where Claude judges whether your made-up slang could pass as real, a global leaderboard with a cloud database, more slang categories, and a mobile app version.
Built With
- anthropic-claude-api
- claude-haiku-4.5
- css
- javascript
- next.js
- node.js
- react
- vercel
Log in or sign up for Devpost to join the conversation.