Build a Full‑Stack Food Wheel App with Next.js, Supabase & AI in Minutes

Prerequisites

Make sure you have the latest Cursor editor installed and a Supabase account. You will also need a GitHub repository to store the project (e.g., https://github.com/flyeric0212/cursor-history-links).

Project Initialization

npx create-next-app food-wheel-app --typescript
cd food-wheel-app
npm install @supabase/supabase-js uuid
npm install -D @types/uuid

Tailwind CSS is already included in the default Next.js template.

Supabase Project Setup

Visit the Supabase dashboard at https://supabase.com/dashboard and create a new project.

Record the project ID; you will need it for later configuration.

Database Schema

The application uses four tables:

users : stores a UUID and creation timestamp.

popular_recipes : pre‑populated list of common dishes (read‑only).

user_custom_recipes : recipes created by the user.

user_wheel_items : recipes selected for the wheel, with color and source type.

Key constraints: each wheel can hold up to 12 items and duplicate names are not allowed for the same user.

Business Logic

User identification : on first visit generate a UUID, store it in localStorage, and reuse it on subsequent loads.

Recipe management : load both popular and custom recipes, allow adding/removing items, and enforce the 12‑item limit.

Wheel rendering : generate an SVG wheel based on the selected items, animate rotation with CSS, and display the randomly chosen result.

UI Layout

Header – app title and brief description.

Center – the wheel component and result display.

Sidebar / bottom – recipe management UI (add, select, delete).

The layout adapts responsively: vertical on mobile, horizontal on tablets and desktops.

Cursor Rules Configuration

Three layers of rules are recommended:

General: general.mdc, project-structure.mdc, git.mdc, document.mdc Language: typescript.mdc Framework: nextjs.mdc Place the rule files in the .cursor directory of the repository.

MCP Server Integration

Configure Supabase as an MCP server so that Cursor can generate SQL automatically. Replace the placeholder token with your real Supabase access token.

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest", "--access-token", "your_supabase_access_token"]
    }
  }
}

Prompt Templates

Use the following prompt to drive the AI‑assisted development:

Based on the referenced <strong>development‑requirements.md</strong>, complete the "What to Eat Today" wheel project in the current directory.

Start with "Project initialization and environment setup" and follow the implementation steps one by one. If manual confirmation is needed, output the next plan and wait for approval.

Ensure:
1. Strict adherence to the requirements document.
2. Code quality follows best practices.
3. All features are fully implemented.
4. Provide clear progress feedback.

A second prompt handles database creation via the Supabase MCP tool, reminding you to replace the project ID and to export the required environment variables ( NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY).

Result Showcase

The finished app is accessible at https://eatwhat.flyeric.top/. It displays a polished UI, a rotating wheel, and responsive behavior across devices. The project directory structure follows a conventional Next.js layout.

Conclusion

This workflow demonstrates how AI‑assisted tools like Cursor, combined with MCP and Supabase, can accelerate full‑stack development while keeping code quality and user experience in focus. The same pattern can be reused for any creative web project.