Turn your daily frustrations into someone's next mission.
A collaborative problem-solving platform where real-world frustrations meet developer talent. Posters submit challenges. Solvers build solutions. Everyone wins.
| Sign In | Poster Dashboard | Problem Discovery | Solver Analytics |
|---|---|---|---|
 |
 |
 |
 |
Posters submit real-world frustrations ("Vexations") through a guided form. Every submission is automatically processed by an AI moderation & categorization pipeline that:
- Screens for policy violations, explicit content, and low-substance input
- Classifies the problem into a Sector (e.g., Health, Finance, Environment, AI/ML)
- Generates tags, severity ratings, technical complexity, and a developer-focused summary
- Suggests a relevant tech stack and key challenges
Developers browse a dynamic discovery feed of categorized problems. They can:
- Claim vexations to work on
- Submit solutions with image uploads and detailed write-ups
- Track streaks and activity analytics on a personalized dashboard
- Build a public portfolio showcasing completed solutions
| Layer | Technology |
|---|---|
| UI Framework | React 19 |
| Build Tool | Vite 7 |
| Routing & SSR | TanStack Router + TanStack Start (Nitro) |
| Backend / DB | Firebase (Firestore, Auth, Storage) |
| Server Functions | Nitro-based server functions via createServerFn |
| AI Integration | OpenRouter API (MiniMax M2.5) — categorization & moderation |
| Styling | Tailwind CSS 4 + Custom Vexed Design System |
| Icons | Lucide React |
| Testing | Vitest + Testing Library |
The UI is built on a custom dark-mode-first design system defined in src/styles.css, featuring:
- A deep indigo/purple palette (
vexed-primary,vexed-highlight1–3,vexed-accent1–4) - Dark backgrounds (
vexed-bg1–4) designed for extended screen time - Inter font family with system fallbacks
- Orbital loading animations and hidden-scrollbar utilities
src/
├── components/ # Modular, reusable UI components
│ ├── cards/ # — Card-based display components (11 cards)
│ ├── forms/ # — Submit, edit, and verification modals (6 forms)
│ ├── auth/ # — Auth context & service
│ ├── Sidebar.tsx # — Main navigation sidebar
│ ├── MobileHeader.tsx # — Responsive mobile header
│ ├── MobileBottomNav.tsx
│ ├── PosterLandingPage.tsx
│ ├── SolverDashboard.tsx
│ └── LoadingScreen.tsx
├── routes/ # File-based routing (TanStack Router)
│ ├── index.tsx # — Role-based home (Poster vs. Solver)
│ ├── browse.tsx # — Problem discovery feed
│ ├── submit.tsx # — Vexation submission flow
│ ├── portfolio.tsx # — Public solver portfolio
│ ├── signIn.tsx # — Authentication page
│ ├── complete-profile.tsx
│ ├── my/ # — User-specific pages
│ │ ├── vexations.tsx # — My submitted vexations
│ │ ├── claimed.tsx # — My claimed problems
│ │ └── saved.tsx # — Bookmarked vexations
│ ├── vexation/$id.tsx # — Vexation detail page
│ └── solution/$id.tsx # — Solution detail page
├── lib/ # Core business logic
│ ├── ai.server.ts # — Server-only AI functions (API key never leaks)
│ ├── firebase.ts # — Firebase app initialization
│ ├── auth/ # — AuthContext + authService
│ ├── db/ # — Firestore CRUD abstractions
│ │ ├── vexations.ts
│ │ ├── solutions.ts
│ │ ├── activities.ts
│ │ ├── users.ts
│ │ └── storage.ts
│ ├── constants/ # — App-wide constants
│ └── utils/ # — Shared utilities
├── types/ # TypeScript type definitions
│ ├── vexation.ts
│ ├── solution.ts
│ ├── user.ts
│ └── activity.ts
└── styles.css # Vexed design system tokens
- Role-based routing — The home page (
/) dynamically rendersSolverDashboardorPosterLandingPagebased on the user's role. - Server function isolation — AI calls run exclusively on the server via
createServerFn. TheOPENROUTER_API_KEYis accessed throughprocess.envand never bundled into the client. - Clean data layer — All Firestore operations are abstracted in
src/lib/db/, keeping components free of database logic. - AI-powered moderation — Both new submissions and edits pass through policy validation before persisting.
- Node.js ≥ 20
- npm (included with Node)
- A Firebase project with Firestore, Authentication, and Storage enabled
- An OpenRouter API key
git clone <repo-url>
cd vexed
npm installCreate a .env file at the project root:
# Firebase (client-side — VITE_ prefix required)
VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
# OpenRouter (server-side — NO VITE_ prefix)
OPENROUTER_API_KEY=your_openrouter_key
⚠️ Important: Never prefix server-side secrets withVITE_. Doing so exposes them in the client bundle.
npm run devThe app will be available at http://localhost:3000.
npm testVexed targets Firebase Hosting with Cloud Functions, compiled via the Nitro preset.
npm run buildThis outputs optimized server functions and static assets to .output/.
firebase functions:secrets:set OPENROUTER_API_KEYfirebase deploy- Styling — Always defer to
src/styles.cssas the source of truth for all branding tokens and Vexed design system utilities. - Type safety — No unused variables. Strict TypeScript throughout.
- Component architecture — Keep components modular. DB logic stays in
src/lib/db/, AI logic stays insrc/lib/ai.server.ts. - See
.agent/PROJECT_GUIDELINES.mdfor the full coding policy.
Vexed · Built with 🔥 by passionate developers
Turn your daily frustrations into someone's next mission.