Dining Decider

Can't decide where to eat? Let the wheel decide for you!

Dining Decider is a React Native app that helps you choose the perfect restaurant based on your mood, party size, and location. Spin the wheel and discover curated dining recommendations across San Francisco, Los Angeles, and New York City.

Features

• Interactive Spinning Wheel - Smooth animations powered by React Native Reanimated
• Three Vibe Modes
  • Pretty Pics (Aesthetic) - Instagram-worthy spots with beautiful ambiance
  • Splurge (Formal) - Upscale dining for special occasions
  • Hungry/Save (Standard) - Great food without breaking the bank
• 8 Categories Per Vibe - From "Floral Brunch" to "Rooftop" to "Tea Room"
• Multi-City Support - Restaurants in SF, LA, and NYC
• Party Size Selection - Recommendations tailored for 1-20 people
• Haptic Feedback - Satisfying touch responses on iOS and Android
• Cross-Platform - Runs on iOS, Android, and web

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Expo CLI
• iOS Simulator (Mac only) or Android Emulator

Installation

1. Clone the repository

   git clone <repo-url>
   cd dining-decider

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Run on your platform of choice

   npm run ios        # iOS Simulator
   npm run android    # Android Emulator
   npm run web        # Browser

Tech Stack

• React Native with Expo Router for file-based navigation
• TypeScript for type safety
• React Native Reanimated for smooth wheel animations
• React Native SVG for wheel sector rendering
• Zustand for state management
• Expo Haptics for tactile feedback

Project Structure

dining-decider/
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation
│   │   ├── index.tsx      # Main wheel screen
│   │   └── _layout.tsx    # Tab configuration
│   ├── results.tsx        # Results screen
│   └── _layout.tsx        # Root layout
├── components/            # React components
│   ├── controls/         # LocationPicker, PartySizeInput, VibeSelector
│   ├── wheel/           # SpinningWheel, WheelSector, WheelPointer
│   └── ui/              # Themed reusable components
├── constants/           # Theme colors and fonts
├── data/               # Restaurant database and wheel sectors
├── store/              # Zustand state management
├── types/              # TypeScript definitions
└── utils/              # Helper functions

How It Works

1. Select Your Location - Choose between San Francisco, Los Angeles, or New York City
2. Set Party Size - Use the +/- buttons to set your group size
3. Pick Your Vibe - Select the mood that matches your occasion
4. Spin the Wheel - Tap the spin button and watch it go!
5. Get Recommendations - See 3 curated restaurants that match the winning category

Each vibe mode features different wheel sectors with unique dining categories. The app filters its restaurant database based on your selections to provide personalized recommendations with pricing, descriptions, and parking information.

Development

npm run lint      # Run ESLint
npm test          # Run tests (if configured)

For detailed development guidance, see CLAUDE.md.

Adding Restaurants

Restaurant data is stored in data/restaurants.ts. Each entry includes:

{
  name: string;
  locs: string[];      // ['SF', 'LA', 'NYC']
  price: 1 | 2 | 3 | 4;
  avgCost: number;     // Per person
  note: string;        // Description
  parking: string;
}

License

MIT

Acknowledgments

Built with Expo and React Native. Converted from an HTML/Canvas prototype to a full cross-platform mobile app.