Playshelf

A React Native mobile application that helps parents of toddlers (ages 1-5) reduce screen time by intelligently managing toy rotation and generating fresh activity ideas.

Features

• Scan-to-Inspire: Parents scan any toy to get fresh activity ideas tailored to their child
• Smart Rotation: Intelligent recommendations for which toys to display vs. store
• Activity Elevation: Free-text input generates tiered activity ideas
• Neurodivergent Support: Sensory profiles and activity filtering for children with different needs

Tech Stack

• Frontend: React Native (Expo managed workflow)
• State Management: Zustand
• Backend: Supabase (Auth, PostgreSQL, Edge Functions)
• Computer Vision: Google Cloud Vision API
• Content Generation: Anthropic Claude API
• Storage: React Native MMKV

Getting Started

Prerequisites

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

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Copy .env.example to .env and fill in your API keys:

cp .env.example .env

4. Start the development server:

npm start

5. Run on iOS or Android:

npm run ios
# or
npm run android

Project Structure

playshelf/
├── app/                          # Expo Router app directory
│   ├── (auth)/                   # Authentication screens
│   ├── (tabs)/                   # Main tab navigation
│   ├── toy/[id].tsx              # Toy detail screen
│   ├── activity/[id].tsx         # Activity detail screen
│   └── _layout.tsx               # Root layout
├── components/                   # Reusable components
│   ├── ui/                       # UI components (Button, Card, Input)
│   ├── toys/                     # Toy-related components
│   ├── activities/               # Activity-related components
│   └── dashboard/                # Dashboard components
├── lib/                          # Utilities and API clients
│   ├── supabase.ts               # Supabase client
│   ├── claude.ts                 # Claude API client
│   └── utils.ts                  # Helper functions
├── stores/                       # Zustand stores
│   ├── authStore.ts              # Authentication state
│   ├── familyStore.ts            # Family data
│   ├── childStore.ts             # Children data
│   └── toyStore.ts               # Toy inventory
├── types/                        # TypeScript type definitions
├── constants/                    # Constants and theme
└── supabase/                     # Supabase migrations and functions

Development Roadmap

Phase 1

• Project scaffolding
• Authentication
• Basic navigation
• Manual toy entry
• Activity Elevation engine
• Basic dashboard

Phase 2

• Toy scanning (Computer Vision)
• Shelf scanning
• Rotation recommendations
• Full neurodivergent support
• Wishlist with affiliate links

Phase 3

• Gap analysis
• Advanced insights
• Subscription/paywall
• Push notifications

Environment Variables

See .env.example for required environment variables.