# Project export: Tapped In This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 12.0 - Tagline: Real-time map for community events around you. - Devpost: https://devpost.com/software/tapped-in - GitHub: https://github.com/valerie-cal/tapped-in - Demo: https://production.creao.ai/share?app=nRTwO4Lp&utm_source=share&utm_medium=link - Video: https://www.youtube.com/embed/L0yhuJi-Qkk?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Result: winner (Creao: Best Real-World Productivity Tool) - Team: 1 GitHub contributor(s) — Valerie Eng (1 commits) ## Devpost submission (written by the team) ### Inspiration More than ever, we hear phrases like “loneliness epidemic,” “bed rotting,” and “doomscrolling.” These are real issues. Although we have advanced productivity apps for work or health, there isn’t a good solution to reduce friction in expanding our social comfort zones. Existing event apps just show lists. Calendars are private. After a busy day of college/work, finding the right, relevant, and timely social event requires too much effort and copy-pasting. Events are hidden in Instagram stories, spam emails, and word of mouth. We miss opportunities because information is convoluted and spread across too many platforms. To improve social productivity, we built Tapped In: a platform where finding in-person events is as easy as glancing at a map. Creating events is instant- hosts can effectively manage attendees, event logistics, and smart analytics. ### What it does Tapped In is a geo-spatial social productivity platform. It uses AI and custom APIs to instantly match users with location-based events, making both joining/hosting events effortless and effective. For Users: An intuitive map interface uses your location and preferences to visually filter your area for events relevant to you (e.g., career fairs, free food, hobby groups). Get automatic, customized Gmail and Google Calendar notifications that summarize your RSVPs. For Organizers: Submit a public event instantly. Our AI automatically suggests categorization tags, handles all RSVPs, and calendar management (including cancellation notices and attendee contact information). ### How we built it We used Creao, an AI-native tool building platform and implemented both built-in and custom API and MCP servers. Core: Use Creao to generate the entire front-end (Map UI, Carousel, Settings Panel) and the relational database schema (Users, Events, Preferences, RSVPs). Logic: Automatically scans the event description and title to suggest Event Type tags (e.g., "Concert," "Product Promotion"). Custom API Workflow: Connect Creao to GoogleMaps JavaScript API to handle geospatial view, add markers, and autofill addresses. OpenAI GPTChat handles generated email content and event labelling. Gmail and Google Calendar MCP integrations handle notifications on RSVP status. ### Challenges we ran into Understanding the tradeoffs between API and MCP servers. The provided MCP for GoogleMaps was not for our primary use case, requiring our to adapt our approach to integration to using API. Found that saving files within the Creao environment caused app functionality to be slow (delayed UI), as the system needed to validate the entire stack. Weren't able to manually edit code files on Creao. Needed to adapt prompts to include exact code file changes. Accomplishments We're Proud Of RSVP Notifications: Automatically removing canceled events from RSVP'd users' calendars and send an email notification. Friend Requests: Ability to add/remove friends and view their event RSVPs. Map UX: Creating a full-screen map-view mobile interface and achieving a UX that makes finding events fun by seeing friends' events. What We Learned We learned to be extremely specific and provide detailed examples in our Creao prompts to minimize validation time and guide the AI toward the intended architecture, helping mitigate the front-end latency we experienced. MCP vs. REST: We gained a better understanding of the difference between an API and an MCP server, as well as how a server connects to a service. For agentic workflows, custom logic must be built into an external service that conforms to the MCP standard. What's Next for Tapped In Exclusive Events: Events only appears for specific groups (eg. Berkeley Students, Companies) Increased Personalization: Recommend events based on prior event attendance and interactions. Add "Friend Recommendations" tab based on similarity of events attended. Monetization: Integrate a payment API (via another custom webhook) for organizers to promote events (eg. golden border on pins, shows up first in event carousel). Community Forums: Follow a event host and gain updates on their latest events. Gamification: Use the User Stats Page data to award badges and leaderboards for event creation and attendance. Built With Creao AI GoogleMaps JavaScript API OpenAI GPTChat API CreaoFileUpload API Google Calendar MCP Gmail MCP ## README (from the GitHub repository) No README available. ## Detected evidence (automated analysis) Indexed codebase: 29 recognized source files, 145 KB. - CSS (language) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code ## Codebase structure (from repository index) ### Files (36 of 36) ``` creao-build-68fdfaad9b5209b89cd6f4ef 2/biome.json creao-build-68fdfaad9b5209b89cd6f4ef 2/components.json creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/base.config.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/eslint.mcp.config.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/eslint.radix.config.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/index.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/rules/mcp-integration.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/rules/radix-ui.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/validate-configs.js creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/display_hooks.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/dump/ensure_check_ok.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/ensure_build_ok.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/ensure_check_ok.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/file_tracker.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/git_diff.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/resume_prompt_injection.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/startup_cleanup.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/startup_prompt_injection.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/hooks/subagent_post_use.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/scripts/startup.sh creao-build-68fdfaad9b5209b89cd6f4ef 2/config/vite/creao-plugin.mjs creao-build-68fdfaad9b5209b89cd6f4ef 2/eslint.config.js creao-build-68fdfaad9b5209b89cd6f4ef 2/index.html creao-build-68fdfaad9b5209b89cd6f4ef 2/main.tsx creao-build-68fdfaad9b5209b89cd6f4ef 2/package.json creao-build-68fdfaad9b5209b89cd6f4ef 2/public/manifest.json creao-build-68fdfaad9b5209b89cd6f4ef 2/public/robots.txt creao-build-68fdfaad9b5209b89cd6f4ef 2/reportWebVitals.ts creao-build-68fdfaad9b5209b89cd6f4ef 2/routes/__root.tsx creao-build-68fdfaad9b5209b89cd6f4ef 2/routes/index.tsx creao-build-68fdfaad9b5209b89cd6f4ef 2/routes/jwt-debug.tsx creao-build-68fdfaad9b5209b89cd6f4ef 2/routeTree.gen.ts creao-build-68fdfaad9b5209b89cd6f4ef 2/styles.css creao-build-68fdfaad9b5209b89cd6f4ef 2/tsconfig.json creao-build-68fdfaad9b5209b89cd6f4ef 2/vite-env.d.ts creao-build-68fdfaad9b5209b89cd6f4ef 2/vite.config.js ``` ### Dependencies - creao-build-68fdfaad9b5209b89cd6f4ef 2/package.json: @babel/plugin-syntax-typescript@^7.27.1, @babel/plugin-transform-react-jsx@^7.27.1, @babel/plugin-transform-react-jsx-development@^7.27.1, @biomejs/biome@1.9.4, @fortawesome/fontawesome-svg-core@^7.0.0, @fortawesome/free-brands-svg-icons@^7.0.0, @fortawesome/react-fontawesome@^0.2.3, @hookform/resolvers@^5.0.1, @protobuf-ts/runtime@^2.11.1, @radix-ui/react-accordion@^1.2.11, @radix-ui/react-alert-dialog@^1.1.14, @radix-ui/react-aspect-ratio@^1.1.7, @radix-ui/react-avatar@^1.1.10, @radix-ui/react-checkbox@^1.3.2, @radix-ui/react-collapsible@^1.1.11, @radix-ui/react-context-menu@^2.2.15, @radix-ui/react-dialog@^1.1.14, @radix-ui/react-dropdown-menu@^2.1.15, @radix-ui/react-hover-card@^1.1.14, @radix-ui/react-label@^2.1.7, @radix-ui/react-menubar@^1.1.15, @radix-ui/react-navigation-menu@^1.2.13, @radix-ui/react-popover@^1.1.14, @radix-ui/react-progress@^1.1.7, @radix-ui/react-radio-group@^1.3.7, @radix-ui/react-scroll-area@^1.2.9, @radix-ui/react-select@^2.2.5, @radix-ui/react-separator@^1.1.7, @radix-ui/react-slider@^1.3.5, @radix-ui/react-slot@^1.2.3, @radix-ui/react-switch@^1.2.5, @radix-ui/react-tabs@^1.1.12, @radix-ui/react-toggle@^1.1.9, @radix-ui/react-toggle-group@^1.1.10, @radix-ui/react-tooltip@^1.2.7, @tailwindcss/vite@^4.0.6, @tanstack/react-query@^5.80.3, @tanstack/react-router@^1.114.3, @tanstack/react-router-devtools@^1.114.3, @tanstack/router-plugin@^1.114.3, @testing-library/dom@^10.4.0, @testing-library/jest-dom@^6.6.3, @testing-library/react@^16.2.0, @types/google.maps@^3.58.1, @types/lodash@^4.17.20, @types/react@^19.0.8, @types/react-dom@^19.0.3, @typescript-eslint/eslint-plugin@^8.38.0, @typescript-eslint/parser@^8.38.0, @typescript/native-preview@^7.0.0-dev.20250913.1, @vitejs/plugin-react@^4.3.4, class-variance-authority@^0.7.1, clsx@^2.1.1, cmdk@^1.1.1, date-fns@^3.6.0, embla-carousel-react@^8.6.0, eslint@^9.32.0, eslint-plugin-react@^7.37.5, eslint-plugin-react-hooks@^5.2.0, input-otp@^1.4.2, jsdom@^26.0.0, lodash@^4.17.21, lucide-react@^0.476.0, next-themes@^0.4.6, openapi-fetch@^0.14.0, openapi-react-query@^0.5.0, openapi-typescript@^7.10.1, openapi-typescript-codegen@^0.29.0, react@^19.0.0, react-day-picker@^9.8.0, react-dom@^19.0.0, react-hook-form@^7.57.0, react-resizable-panels@^3.0.2, recharts@^2.15.3, sonner@^2.0.6, tailwind-merge@^3.0.2, tailwindcss@^4.0.6, tailwindcss-animate@^1.0.7, typescript@~5.8.3, vaul@^1.1.2, vite@npm:rolldown-vite@^7.1.9, vite-plugin-babel@^1.3.2, vite-plugin-svgr@^4.5.0, vitest@^3.2.4, web-vitals@^4.2.4, zod@^3.25.50 ### Recent commits (newest first) - Add files via upload - Add files via upload - Add files via upload - Add files via upload - Add files via upload - Initial File Upload ## Key source files (fetched from GitHub, selected and truncated for size) ### creao-build-68fdfaad9b5209b89cd6f4ef 2/package.json ``` { "name": "basic_template", "private": true, "type": "module", "scripts": { "dev": "vite --port 3000", "start": "vite --port 3000", "build": "npm run check:safe && vite build", "serve": "vite preview", "test": "vitest run", "check": "tsgo --noEmit && npm run lint:radix -- --fix && npm run format", "check:safe": "timeout 20 npm run check || (echo 'Check timed out after 20 seconds' && exit 1)", "format": "biome check --write --unsafe", "format:quiet": "biome check --write --unsafe --log-level=warn", "lint:radix": "grep -l -r ' , ); } // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/config/eslint/index.js ```javascript /** * ESLint Configuration Index * * Centralized configuration management for different linting contexts. * This provides a single entry point for all ESLint configurations. */ import baseConfig from './base.config.js'; import mcpConfig from './eslint.mcp.config.js'; import radixConfig from './eslint.radix.config.js'; import radixRules from './rules/radix-ui.js'; export { baseConfig, mcpConfig, radixConfig }; // Default export combines base configuration with Radix validation export default [ ...baseConfig, { files: ['**/*.{ts,tsx}'], plugins: { 'radix-custom': { rules: radixRules } }, rules: { 'radix-custom/no-empty-select-item': 'error' } } ]; ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/vite-env.d.ts ```typescript /// /// interface ImportMetaEnv { readonly TENANT_ID?: string; // add more env vars as needed } interface ImportMeta { readonly env: ImportMetaEnv; } ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/eslint.config.js ```javascript /** * Main ESLint Configuration * * This is the primary ESLint configuration that combines base settings * with Radix UI validation. For specialized linting (like MCP validation), * use the specific configurations in config/eslint/ */ import eslintConfig from './config/eslint/index.js'; export default eslintConfig; ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/reportWebVitals.ts ```typescript const reportWebVitals = (onPerfEntry?: () => void) => { if (onPerfEntry && onPerfEntry instanceof Function) { import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { onCLS(onPerfEntry); onINP(onPerfEntry); onFCP(onPerfEntry); onLCP(onPerfEntry); onTTFB(onPerfEntry); }); } }; export default reportWebVitals; ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/index.html ```html EventMap - Discover Local Events Near You
``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/vite.config.js ```javascript import tailwindcss from "@tailwindcss/vite"; import viteReact from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import svgr from "vite-plugin-svgr"; // import { createRequire } from "node:module"; import { resolve } from "node:path"; import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; import { creaoPlugins } from "./config/vite/creao-plugin.mjs"; // https://vitejs.dev/config/ export default defineConfig({ base: process.env.TENANT_ID ? `/${process.env.TENANT_ID}/` : "/", define: { "import.meta.env.TENANT_ID": JSON.stringify(process.env.TENANT_ID || ""), }, plugins: [ ...creaoPlugins(), TanStackRouterVite({ autoCodeSplitting: false, // affects pick-n-edit feature. disabled for now. }), viteReact({ jsxRuntime: "automatic", }), svgr(), tailwindcss(), ], test: { globals: true, environment: "jsdom", }, resolve: { alias: { "@": resolve(__dirname, "./src"), }, }, server: { host: "0.0.0.0", port: 3000, allowedHosts: true, // respond to *any* Host header watch: { usePolling: true, interval: 300, // ms; tune if CPU gets high }, }, build: { chunkSizeWarningLimit: 1500, }, }); ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/routeTree.gen.ts ```typescript /* eslint-disable */ // @ts-nocheck // noinspection JSUnusedGlobalSymbols // This file was automatically generated by TanStack Router. // You should NOT make any changes in this file as it will be overwritten. // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. // Import Routes import { Route as rootRoute } from './routes/__root' import { Route as JwtDebugImport } from './routes/jwt-debug' import { Route as IndexImport } from './routes/index' // Create/Update Routes const JwtDebugRoute = JwtDebugImport.update({ id: '/jwt-debug', path: '/jwt-debug', getParentRoute: () => rootRoute, } as any) const IndexRoute = IndexImport.update({ id: '/', path: '/', getParentRoute: () => rootRoute, } as any) // Populate the FileRoutesByPath interface declare module '@tanstack/react-router' { interface FileRoutesByPath { '/': { id: '/' path: '/' fullPath: '/' preLoaderRoute: typeof IndexImport parentRoute: typeof rootRoute } '/jwt-debug': { id: '/jwt-debug' path: '/jwt-debug' fullPath: '/jwt-debug' preLoaderRoute: typeof JwtDebugImport parentRoute: typeof rootRoute } } } // Create and export the route tree export interface FileRoutesByFullPath { '/': typeof IndexRoute '/jwt-debug': typeof JwtDebugRoute } export interface FileRoutesByTo { '/': typeof IndexRoute '/jwt-debug': typeof JwtDebugRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute '/jwt-debug': typeof JwtDebugRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath fullPaths: '/' | '/jwt-debug' fileRoutesByTo: FileRoutesByTo to: '/' | '/jwt-debug' id: '__root__' | '/' | '/jwt-debug' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute JwtDebugRoute: typeof JwtDebugRoute } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, JwtDebugRoute: JwtDebugRoute, } export const routeTree = rootRoute ._addFileChildren(rootRouteChildren) ._addFileTypes() /* ROUTE_MANIFEST_START { "routes": { "__root__": { "filePath": "__root.tsx", "children": [ "/", "/jwt-debug" ] }, "/": { "filePath": "index.tsx" }, "/jwt-debug": { "filePath": "jwt-debug.tsx" } } } ROUTE_MANIFEST_END */ ``` ### creao-build-68fdfaad9b5209b89cd6f4ef 2/styles.css ```css @import "tailwindcss"; @plugin "tailwindcss-animate"; @custom-variant dark (&:is(.dark *)); body { @apply m-0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } :root { --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32); --ring: oklch(0.871 0.006 286.286); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.871 0.006 286.286); } .dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.141 0.005 285.823); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.141 0.005 285.823); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.21 0.006 285.885); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.274 0.006 286.033); --input: oklch(0.274 0.006 286.033); --ring: oklch(0.442 0.017 285.786); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.274 0.006 286.033); --sidebar-ring: oklch(0.442 0.017 285.786); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } ``` [19 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]