My Furry Friend Food Finder

A React Native mobile application built with Expo and TypeScript that helps dog owners find the perfect food for their pets based on breed and age.

🎯 Project Overview

This app recreates the exact design from the provided mockups, featuring:

• Welcome Screen: Branded welcome with animated logo and clear CTA
• Breed Selection Screen: Interactive breed selection with Purebred/Crossbreed options
• Responsive Design: Optimized for mobile devices with proper touch targets
• Accessibility: Full screen reader support and proper ARIA labels

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI (npm install -g @expo/cli)
• iOS Simulator (for iOS development) or Android Studio (for Android development)

Installation

1. Clone the repository

   git clone <repository-url>
   cd my-furry-friend-food-finder

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Run on device/simulator

   • Press i for iOS Simulator
   • Press a for Android Emulator
   • Scan QR code with Expo Go app on your device

📱 App Structure

src/
├── components/          # Reusable UI components
│   ├── PrimaryButton.tsx
│   ├── SegmentControl.tsx
│   └── Chip.tsx
├── screens/            # App screens
│   ├── WelcomeScreen.tsx
│   └── BreedSelectScreen.tsx
├── navigation/         # Navigation configuration
│   └── index.tsx
├── theme/              # Design tokens and typography
│   ├── tokens.ts
│   └── typography.ts
└── hooks/              # Custom React hooks
    └── useBreedSelection.ts

🎨 Design System

Color Palette

• Primary: #E74C3C (Red from mockup)
• Background: #FDFDFD (Off-white)
• Surface: #FFFFFF (Pure white)
• Text: #111111 (Dark gray)
• Accent: #E74C3C (Red)

Typography

• Title: 32px, Bold, All Caps
• Subtitle: 18px, Regular, All Caps
• Button: 18px, Bold, All Caps
• Helper: 14px, Regular, Italic

Spacing

• xs: 4px, sm: 8px, md: 12px
• lg: 16px, xl: 24px, 2xl: 32px

🔧 Key Features

Welcome Screen

• Fullscreen layout with safe area awareness
• Custom animated logo (dog with chef hat)
• Centered content with consistent vertical rhythm
• Large, accessible START button

Breed Selection Screen

• Segment control for Purebred/Crossbreed selection
• Dynamic helper text for Crossbreed mode
• Responsive grid of breed chips
• Selection validation (1 for Purebred, 2 for Crossbreed)
• Disabled state for Continue button until valid selection

Components

• PrimaryButton: Full-width CTA button with haptics
• SegmentControl: Pill-based selection control
• Chip: Selectable breed options with visual feedback

🧪 Testing

Manual Testing Checklist

• Welcome screen displays correctly
• Logo animation works properly
• Navigation to Breed Selection works
• Segment control switches between Purebred/Crossbreed
• Helper text appears only for Crossbreed
• Breed selection works for both modes
• Continue button is disabled until valid selection
• Accessibility features work (VoiceOver/TalkBack)

Development Tools

• Use React Native Debugger for debugging
• Expo DevTools for performance monitoring
• React Navigation DevTools for navigation debugging

📱 Platform Support

• iOS: 13.0+
• Android: API level 21+
• Web: Chrome, Safari, Firefox (via Expo Web)

🚀 Deployment

Building for Production

# Build for iOS
expo build:ios

# Build for Android
expo build:android

# Build for web
expo build:web

App Store Deployment

1. Configure app.json with proper bundle identifiers
2. Build production version
3. Submit to App Store Connect / Google Play Console

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

For support and questions:

• Check the Expo documentation
• Review React Navigation docs
• Open an issue in this repository

---

Built with ❤️ using React Native + Expo + TypeScript