Project Info
This project did not submit a demo video on Devpost.
Inspiration
As teammates, we're doing off-season internships, and one thing we agreed on is that it's sooooo tough to both break the ice and find engaging activities during team meetings. And what we got out of that was......27 hours of planning, **96 different ideas from ChatGPT (yeah, even this failed), and one, incredibly fun all-nighter. Inspired by Pictogram, Hangman, and even tools like Figma and Excalidraw, we knew something fun and interactive that could be a go-to for “water-cooler” moments would be awesome to try out during a hackathon. We also saw the need for this in our school clubs, so we decided to build a game that brings people together with a fun and competitive edge!
What it does
Skribbl.ai is a competitive drawing game where two players compete to replicate an image given through a prompt, all on a shared virtual whiteboard. Elevated with real-time video, voice, and chat, players can communicate and collaborate while racing against time to impress the AI judge, which scores the drawings based on accuracy.
How we built it
We used several key technologies: 100ms for real-time video and voice features. tribute to Nexus ChromaDB to handle data storage for user interactions. tldraw and tldraw sync for real-time collaborative white-boarding primitives. React and TypeScript to power the frontend. NextAuth for user authentication and session management. Despite starting at 9 pm on the Saturday before the hackathon's end, we managed to pivot from our original idea (voice-powered music production) and complete this project in record time.
Challenges we ran into
Our original idea of voice-powered music production wasn't compatible with the sponsor Hume's technology, forcing us to pivot. The tight deadline, constant pivoting, and beyond late start added additional pressure, but we powered through to deliver a fully functional app by the end of the hackathon. The Metreon WiFi, especially when building a network-heavy application, lead to many hotspots and remote work.
Accomplishments we're proud of
We’re incredibly proud of how quickly we pivoted and built a polished app with video, voice, chat, and whiteboard integration in a matter of hours. Finishing the project under such time constraints felt like a huge accomplishment. Yeah, we may not have the crazy large feature set, be we do the one thing we planned to do, really well–at least, we think.
What we learned
We learned how to adapt quickly when things don’t go as planned, and we gained valuable experience integrating real-time video and collaboration features with technologies like 100ms, ChromaDB, and tldraw. We also experience in perseverance and pushing through idea droughts. Since we're working, adjusting "back" to the hackathon mindset definitely takes time.
What's next
for Skribbl.ai We’re super stoked to continue improving Skribbl.ai after CalHacks. We surprisingly—especially given our execution, see potential for the app to be used in virtual team-building exercises, school clubs, and social hangouts. Stuff like: Multiplayer modes: Expand to support larger groups and team-based drawing challenges. Advanced AI judging: Improve the AI to evaluate drawings based on creativity, style, and time taken, not just accuracy. Custom game modes: Allow users to create custom challenges, themes, and rules for personalized gameplay. Leaderboard and achievements: Introduce a ranking system, badges, and awards for top players. Mobile app: Develop a mobile-friendly version to make the game accessible across different devices. Interactive spectators: Let spectators participate in the game through voting or live commenting during matches. Real-time drawing hints: Implement features where players can give or receive subtle hints during gameplay without breaking the challenge. Custom avatars and themes: Offer players options to personalize their in-game experience with unique avatars, themes, and board designs. All this stuff seems super exciting to build, and we're glad to have a baseline to expand off of. Well, that's it for skribbl.ai, thanks for reading! Note for GoDaddy: The promo-code we tried to apply MLHCAL24 was not working on the website. We tried the second best thing, in Vercel. ; )
Inspiration
As teammates, we're doing off-season internships, and one thing we agreed on is that it's sooooo tough to both break the ice and find engaging activities during team meetings.
And what we got out of that was......27 hours of planning, **96 different ideas from ChatGPT (yeah, even this failed), and one, incredibly fun all-nighter.
Inspired by Pictogram, Hangman, and even tools like Figma and Excalidraw, we knew something fun and interactive that could be a go-to for “water-cooler” moments would be awesome to try out during a hackathon. We also saw the need for this in our school clubs, so we decided to build a game that brings people together with a fun and competitive edge!
What it does
Skribbl.ai is a competitive drawing game where two players compete to replicate an image given through a prompt, all on a shared virtual whiteboard.
Elevated with real-time video, voice, and chat, players can communicate and collaborate while racing against time to impress the AI judge, which scores the drawings based on accuracy.
How we built it
We used several key technologies:
- 100ms for real-time video and voice features.
- ChromaDB to handle data storage for user interactions.
- tldraw and tldraw sync for real-time collaborative white-boarding primitives.
- React and TypeScript to power the frontend.
- NextAuth for user authentication and session management.
Despite starting at 9 pm on the Saturday before the hackathon's end, we managed to pivot from our original idea (voice-powered music production) and complete this project in record time.
Challenges we ran into
- Our original idea of voice-powered music production wasn't compatible with the sponsor Hume's technology, forcing us to pivot.
- The tight deadline, constant pivoting, and beyond late start added additional pressure, but we powered through to deliver a fully functional app by the end of the hackathon.
- The Metreon WiFi, especially when building a network-heavy application, led to many hotspots and remote work.
Accomplishments that we're proud of
We’re incredibly proud of how quickly we pivoted and built a polished app with video, voice, chat, and whiteboard integration in a matter of hours. Finishing the project under such time constraints felt like a huge accomplishment. Yeah, we may not have the crazy large feature set, but we do the one thing we planned to do, really well–at least, we think.
What we learned
We learned how to adapt quickly when things don’t go as planned, and we gained valuable experience integrating real-time video and collaboration features with technologies like 100ms, ChromaDB, and tldraw. We also learned perseverance and pushing through idea droughts. Since we're working, adjusting "back" to the hackathon mindset definitely takes time.
What's next for Skribbl.ai
We’re super stoked to continue improving Skribbl.ai after CalHacks. We surprisingly—especially given our execution, see potential for the app to be used in virtual team-building exercises, school clubs, and social hangouts. Stuff like:
- Multiplayer modes: Expand to support larger groups and team-based drawing challenges.
- Advanced AI judging: Improve the AI to evaluate drawings based on creativity, style, and time taken, not just accuracy.
- Custom game modes: Allow users to create custom challenges, themes, and rules for personalized gameplay.
- Leaderboard and achievements: Introduce a ranking system, badges, and awards for top players.
- Mobile app: Develop a mobile-friendly version to make the game accessible across different devices.
- Interactive spectators: Let spectators participate in the game through voting or live commenting during matches.
- Real-time drawing hints: Implement features where players can give or receive subtle hints during gameplay without breaking the challenge.
- Custom avatars and themes: Offer players options to personalize their in-game experience with unique avatars, themes, and board designs.
All this stuff seems super exciting to build, and we're glad to have a baseline to expand off of.
Well, that's it for skribbl.ai, thanks for reading!
Built With
- 100ms
- ChromaDB
- Gemini
- GoDaddy
- OpenAI
- RadixUI
- React
- tldraw
- tRPC
- TypeScript
Try it out
Analysis
View
Metric
- 55
- 9
- 2
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- JavaScriptIn code
- Next.jsIn code
- OpenAIIn code
- ReactIn code
- SQLIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Google GeminiClaimed
8 of 9 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
265 KB
Source files
96
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
Nyumat/skribbl.ai
110 files · 1.2 MB · @ 0233b99
Structure
Interface
71 files · 65%Screens, components and styles rendered to the user.
API & routing
10 files · 9%Request entry points: routes, handlers and controllers.
Application logic
11 files · 10%Domain rules, services and shared utilities.
Data & schema
4 files · 4%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript95%
- Markdown2%
- JavaScript1%
- SQL1%
- CSS1%
- Shell1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 89- @auth/prisma-adapter
- @hookform/resolvers
- @prisma/client
- @radix-ui/react-accordion
- @radix-ui/react-alert-dialog
- @radix-ui/react-aspect-ratio
- @radix-ui/react-avatar
- @radix-ui/react-checkbox
- @radix-ui/react-collapsible
- @radix-ui/react-context-menu
- @radix-ui/react-dialog
- @radix-ui/react-dropdown-menu
- @radix-ui/react-hover-card
- @radix-ui/react-icons
- @radix-ui/react-label
- @radix-ui/react-menubar
- @radix-ui/react-navigation-menu
- @radix-ui/react-popover
- +71 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
Feature verification
AI-generated drawing promptVerified
Players are given an image/prompt to replicate
Claimed on readmehigh confidencesrc/server/api/routers/judge.ts:6— getPrompt query calls OpenAI gpt-3.5-turbo to generate a three-word promptsrc/app/platform/room/page.tsx:75— fetchPrompt calls utils.judge.getPrompt.fetch() and displays the result as the round's prompt
NextAuth authentication and session managementVerified
NextAuth for user authentication and session management
Claimed on readmehigh confidencesrc/server/auth.ts:39— authOptions defines a NextAuthOptions config with a Discord providersrc/app/api/auth/[...nextauth]/route.ts:1— NextAuth route handler wired at the App Router API routesrc/app/platform/room/page.tsx:67— useSession() from next-auth/react is used to get the logged-in user's id
RadixUI component usageVerified
RadixUI listed as a built-with technology
Claimed on Devposthigh confidencepackage.json:21— Numerous @radix-ui/* packages are dependencies, and src/components/ui wraps them (e.g. dialog, scroll-area used in room/page.tsx)
React and TypeScript frontendVerified
React and TypeScript power the frontend
Claimed on readmehigh confidencepackage.json:1— React and TypeScript listed as core dependencies; all app code under src/app is .tsx
Room creation and joining with room codesVerified
Players create or join a room/lobby to play together
Claimed on readmehigh confidencesrc/app/platform/create/page.tsx:18— handleSubmit generates a random room id via crypto.randomUUID() and routes to the lobbysrc/app/platform/join/page.tsx:15— handleSubmit routes to /platform/room using a user-entered room code
Shared collaborative whiteboard (tldraw)Verified
A shared virtual whiteboard where two players race to replicate an image, built with tldraw and tldraw sync
Claimed on readmehigh confidencesrc/app/platform/room/page.tsx:251— Renders <Tldraw store={store}> using useSyncDemo({roomId: roomCode}) from @tldraw/sync for real-time collaborative drawingpackage.json:51— @tldraw/sync and @tldraw/tldraw are declared dependencies
tRPC API layerVerified
tRPC listed as a built-with technology
Claimed on Devposthigh confidencesrc/server/api/root.ts:1— createTRPCRouter combines judge and embedding routerssrc/app/api/trpc/[trpc]/route.ts:1— tRPC Next.js route handler is wired up
AI judge that scores drawings for accuracyCode-supported
An AI judge scores drawings based on accuracy against the prompt
Claimed on readmemedium confidencesrc/server/api/routers/judge.ts:39— getScore mutation sends the base64 image and text prompt to OpenAI gpt-4o-mini and parses a numeric accuracy scoresrc/app/platform/room/[lobbyCode]/lobby/page.tsx:1— judge router exists but the main room page (room/page.tsx) never calls judge.getScore; game-over winner logic there just checks whether an image loaded, not the AI score, so the judge is not wired end-to-end into the shown gameplay flow
ChromaDB for data storage of user interactionsCode-supported
ChromaDB handles data storage for user interactions
Claimed on readmelow confidencesrc/server/chroma.ts:6— A ChromaClient wrapper (getChroma) exists but its only caller in embedding.ts has all Chroma read/write calls commented out, with data instead stored via Prisma/Postgressrc/server/api/routers/embedding.ts:78— Chroma collection get/create/add calls are commented out; calculateAndStore persists to ctx.db (Prisma) instead
Competitive two-player scoring/winner determinationCode-supported
Two players compete to replicate an image, racing against time, judged for accuracy to determine a winner
Claimed on Devpostmedium confidencesrc/app/platform/room/page.tsx:434— EnhancedGameOverDialog picks a winner purely based on whether each player's drawing image loaded successfully (img1Loaded/img2Loaded), not on the AI judge's accuracy score, so real competitive scoring is not actually implemented
Freeplay modeCode-supported
A freeplay whiteboard mode distinct from competitive rooms
Claimed on readmelow confidencesrc/app/platform/freeplay/page.tsx:1— A dedicated freeplay route exists using tldraw, but it is a minimal 32-line page not referenced in the README's described gameplay loop
In-game text messaging/chatCode-supported
Players can communicate via chat while racing to draw
Claimed on readmemedium confidencesrc/app/platform/room/page.tsx:147— Chat panel UI with hardcoded seed messages (Alice/Bob) and a sendMessage handler that only appends to local component state, not synced between players or persisted server-side
Gemini AI integrationClaimed only
Gemini listed as a built-with technology
Claimed on Devposthigh confidenceLeaderboard and achievementsClaimed only
Leaderboard and achievements to rank top players (listed as a future 'what's next' item, but a leaderboard route also exists in the app)
Claimed on readmehigh confidenceReal-time video chat (100ms)Claimed only
Real-time video powered by 100ms for players to communicate while playing
Claimed on readmehigh confidenceReal-time voice chat (100ms)Claimed only
Real-time voice communication powered by 100ms
Claimed on readmehigh confidenceGoDaddy domain / promo code integrationBlocked
Attempted to use a GoDaddy promo code for the site domain (deployed instead via Vercel)
Claimed on readmehigh confidence
An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.