A comprehensive digital gardening companion built with Expo and React Native. Track your seed inventory, plan plantings, and manage your garden with a modern, responsive interface that works across mobile, tablet, and web platforms.
- Mobile Apps: Native iOS and Android applications
- Web Platform: Full-featured web application
- Tablet Optimized: Responsive design with 2-column layouts
- Unified Experience: Consistent functionality across all platforms
- Digital Inventory: Track seed varieties, quantities, and suppliers
- Rich Descriptions: Scrollable text areas with detailed growing information
- Visual Organization: Color-coded seed types with intuitive icons
- Search & Filter: Quick discovery of seeds in your collection
- Planting Calendar: Schedule and track planting activities
- Season Management: Track planting and harvest seasons
- Quick Navigation: Double-tap seeds to create calendar events
- Responsive Grid: Optimized 2-column layout for larger screens
- Touch-Friendly: Swipe gestures on mobile, action buttons on web
- Smooth Scrolling: Enhanced description areas with proper scroll handling
- Platform-Aware: Interface adapts to each platform's conventions
- Node.js (v16 or later)
- npm or yarn package manager
- Expo CLI (
npm install -g @expo/cli)
-
Clone the repository
git clone <repository-url> cd GardeningCatalogue
-
Install dependencies
npm install
-
Start the development server
npx expo start
In the terminal output, you'll find options to open the app in:
- 🌐 Web Browser: Press
wto open in your default browser - 📱 Mobile Device: Scan the QR code with Expo Go app
- 🤖 Android Emulator: Press
a(requires Android Studio setup) - 🍎 iOS Simulator: Press
i(requires Xcode on macOS)
- Tablet Support Guide: Responsive design implementation
- Inventory UI Improvements: Recent interface enhancements
- Testing Guide: Comprehensive testing procedures
- Development Notes: Technical improvements and ideas
- Theme System: Color schemes and theming
- Build Configuration: Production build setup
- Project Status: Current implementation status
- Roadmap: Future development plans
- Pre-Release Checklist: Launch preparation
- Frontend: React Native with Expo SDK 53
- Navigation: Expo Router (file-based routing)
- Database: Supabase (PostgreSQL with real-time features)
- Authentication: Supabase Auth with social providers
- Styling: React Native StyleSheet with custom theme system
- State Management: React Hooks and Context API
- Responsive System:
utils/responsive.ts- Device detection and layout optimization - Smart Image Handling:
components/SmartImage/- Optimized image loading with fallbacks - Theme Management:
lib/theme.tsx- Centralized color and styling system - Database Integration:
lib/supabase.ts- Database client and type definitions
app/ # File-based routing (Expo Router)
├── (tabs)/ # Tab-based navigation screens
│ ├── index.tsx # Inventory screen (main)
│ ├── calendar.tsx # Garden planning calendar
│ └── settings.tsx # App settings
├── auth/ # Authentication screens
└── _layout.tsx # Root layout and navigation
components/ # Reusable React components
├── SmartImage/ # Optimized image loading
├── DatePickerField/ # Date selection component
└── ...
utils/ # Utility functions and helpers
├── responsive.ts # Responsive design system
└── debounce.ts # Performance utilities
docs/ # Documentation and guides
npm start- Start Expo development servernpm run reset-project- Reset to clean starter templatenpm run android- Run on Android device/emulatornpm run ios- Run on iOS device/simulatornpm run web- Run in web browser
- Branch: Create feature branches from main
- Test: Verify changes across mobile, tablet, and web
- Document: Update relevant documentation files
- Review: Ensure responsive design works on all screen sizes
- TypeScript: Strict type checking enabled
- ESLint: Code linting with React Native preset
- Responsive First: All new UI components should work across screen sizes
- Platform Aware: Consider platform-specific interactions (swipe vs click)
- Expo Documentation: Complete framework guide
- Expo Router: File-based navigation system
- EAS Build: Cloud build service
- React Native Documentation: Core framework guide
- React Native Directory: Component library
- Expo Discord: Developer community and support
- React Native Community: Open source resources
MySeedBook Catalogue - Your digital companion for successful gardening 🌱