Primary navigation
← All sites

Sparkboard

Author: OpenAI

An employee idea board for sharing, voting, filtering, and ranking proposals.

Sparkboard app screenshot

Description

A collaborative idea intake dashboard with a trending feature, board-status navigation, search and filters, upvote-driven idea cards, and top contributor rankings.

Prompt

@sites

Build an internal employee Idea Intake app called "[APP NAME]", similar to a modern idea box. Use the company’s authenticated workspace identity and deploy the finished app for everyone in the workspace.

## Product Requirements

Employees should be able to:
- Submit ideas through a polished modal form.
- Upvote ideas once per authenticated user.
- Open an idea detail panel and add comments.
- View their own submissions in a "My Ideas" view.
- Search, filter, and sort ideas.
- Browse ideas by workflow status.
- View a contributor leaderboard based on votes received by their submitted ideas.

Each idea must include:
- Title
- Problem to solve
- Intended audience
- Expected impact
- Effort estimate: low, medium, or high
- Category
- Supporting links
- Status
- Score
- Author
- Created and updated timestamps

Include board views for:
- New
- Trending
- Under review
- Accepted
- Shipped
- Archived

## Persistence And Authentication

Use Cloudflare D1 with a logical `DB` binding.

Create D1 tables for:
- `ideas`
- `votes`
- `comments`
- `status_history`
- `leaderboard_snapshots`

Use the forwarded `oai-authenticated-user-email` request header for identity-aware behavior.

Enforce duplicate vote prevention server-side with a unique D1 index on `(idea_id, user_email)`. Do not rely only on client-side state.

Store status changes in `status_history`. Refresh a daily leaderboard snapshot when an idea is submitted or upvoted.

Include realistic seeded example ideas so the initial experience feels complete and can be visually reviewed immediately.

## Interface

Build the usable product interface directly. Do not create a marketing landing page.

Use a lively, colorful, modern-but-fun design:
- Warm off-white background
- Deep ink typography
- Saturated coral, cobalt blue, violet, amber, and mint accents
- Rounded but restrained components
- Crisp code-native SVG icons
- Playful editorial SaaS feel
- Accessible contrast
- No gradients, stock imagery, mascots, or excessive card nesting

Desktop layout:
- Compact left sidebar with the app name
- Primary navigation: Discover, My Ideas, Leaderboard
- Status navigation with item counts
- Main header: "Ideas worth building"
- Prominent "Share an idea" button
- Coral featured trending-idea band
- Search, category, status, and sort controls
- Two-column score-sorted idea feed
- Right rail with top contributors, category key, and a small encouragement panel

Each idea card should show:
- Prominent upvote control and score
- Title
- Concise problem statement
- Category
- Effort estimate
- Status
- Author
- Comment count

Mobile layout:
- Keep the navigation readable without horizontal overflow
- Collapse the right rail
- Preserve the submission CTA, featured idea, filters, and score-sorted feed

## Technical Requirements

Use the Sites vinext starter and produce a Cloudflare Worker-compatible ESM build.

Store hosting configuration in `.openai/hosting.json`:
- D1 binding: `DB`
- R2 binding: `null`

Keep the Drizzle schema in `db/schema.ts`.
Generate and include the Drizzle migration.
Keep D1 access behind a small helper rather than reading runtime bindings throughout route handlers.

## Verification

Before deployment:
- Run lint
- Run strict TypeScript checking
- Generate and inspect the D1 migration
- Run the production build
- Verify the desktop UI in the in-app browser
- Verify a mobile viewport around `390x844`
- Capture `public/screenshot.jpeg` directly at `1200x630`
- Confirm the deployment artifact includes the Worker entry point, hosting metadata, D1 migration, and screenshot

Test these workflows against local D1:
- Submit an idea
- Confirm it appears in My Ideas
- Upvote an idea
- Confirm a duplicate vote is rejected
- Add a comment
- Filter to an individual status board
- Open the leaderboard

## Deployment

After validation, save and deploy the site through Sites hosting.

Set access mode to `workspace_all` so every active workspace member can use it.

If deployment is blocked by environment or tenant policy, report the exact blocked step and leave the verified artifact ready for publishing from an approved environment.

Related projects