🐱 FocusCat - Stay Focused or the Cat Gets Angry!

A React Native focus timer app where a virtual cat keeps you accountable. Stay in the app during your focus session, or the cat gets angry! 😾

Features

• ⏱️ Customizable Timer: Set your focus duration (1-180 minutes)
• 🐱 Virtual Cat Companion: Your cat waits for you and gets angry if you leave!
• 📊 Growth Tracking: View your complete focus session history
• 🔥 Streak Counter: Track your daily focus streak
• 🎨 Minimal Cartoonish Design: Beautiful, calming interface
• 💾 Persistent Data: All your progress is saved locally

How It Works

1. Name Your Cat: When you first open the app, give your cat a name
2. Set Timer: Choose how long you want to focus (default: 20 minutes)
3. Start Focus: Tap "Start Focus" to begin your session
4. Stay in App: Keep the app open during your focus time
5. Cat Gets Angry: If you exit the app, your cat gets angry and you have to start over! 😾
6. Complete Session: Finish your focus to add to your history and streak

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo CLI (npm install -g expo-cli)
• Expo Go app on your phone (from App Store or Play Store)

Setup

1. Navigate to the project directory:

   cd FocusCatApp

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Run on your device:

   • Scan the QR code with Expo Go (Android) or Camera app (iOS)
   • Or press a for Android emulator, i for iOS simulator

Project Structure

FocusCatApp/
├── App.js              # Main application component
├── package.json        # Dependencies and scripts
├── app.json           # Expo configuration
└── README.md          # This file

Technologies Used

• React Native: Cross-platform mobile development
• Expo: Development platform and toolchain
• AsyncStorage: Local data persistence
• AppState API: Detect when user exits the app

Key Components

State Management

• Cat name storage
• Focus timer with countdown
• Session history tracking
• Streak calculation
• App state monitoring

Features Detail

🌱 Growth Button

• Shows complete focus session history
• Displays date, time, and duration of each session
• Persists across app sessions

🎨 Gallery Button

• Currently shows "Coming Soon" toast message
• Placeholder for future feature (cat themes/skins)

🔥 Fire Button

• Displays current focus streak
• Increments with each completed session
• Shows streak count on tap

Customization

You can customize the app by modifying:

• Colors: Change background colors in styles.container and styles.background
• Timer Limits: Modify min/max values in timer input validation
• Cat Emojis: Change cat expressions in the catEmoji text
• Button Styles: Update styles.startButton and other button styles

Building for Production

Android APK

expo build:android

iOS IPA

expo build:ios

Troubleshooting

App doesn't detect when user exits

• Make sure you're testing on a real device, not in browser
• AppState API works differently on different platforms

Data not persisting

• Check AsyncStorage permissions
• Clear app data and reinstall if needed

Timer not counting down

• Verify app is in foreground
• Check for any console errors

Future Enhancements

• Multiple cat themes/skins (Gallery feature)
• Sound notifications
• Cat animations
• Custom cat images
• Weekly/monthly statistics
• Achievement badges
• Dark mode support
• Widget support

Credits

Created with 🩷 by Rajat

License

MIT License - Feel free to use and modify for your own projects!

Support

If you encounter any issues or have suggestions, please open an issue on GitHub or contact the developer.

---

Happy Focusing! 🐱✨