Skip to content

Latest commit

 

History

History
159 lines (122 loc) · 5.96 KB

README.md

File metadata and controls

159 lines (122 loc) · 5.96 KB

MySeedBook Catalogue 🌱

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.

🌟 Features

� Cross-Platform Support

  • 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

🌿 Seed Management

  • 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

📅 Garden Planning

  • Planting Calendar: Schedule and track planting activities
  • Season Management: Track planting and harvest seasons
  • Quick Navigation: Double-tap seeds to create calendar events

🎨 Modern Interface

  • 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

🚀 Get Started

Prerequisites

  • Node.js (v16 or later)
  • npm or yarn package manager
  • Expo CLI (npm install -g @expo/cli)

Installation

  1. Clone the repository

    git clone <repository-url>
cd GardeningCatalogue

  2. Install dependencies

    npm install

  3. Start the development server

    npx expo start

Development Options

In the terminal output, you'll find options to open the app in:

  • 🌐 Web Browser: Press w to 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)

📚 Documentation

User Guides

Development Resources

Project Status

🏗️ Architecture

Tech Stack

  • 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

Key Components

  • 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

🔧 Development

Project Structure

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

Available Scripts

  • npm start - Start Expo development server
  • npm run reset-project - Reset to clean starter template
  • npm run android - Run on Android device/emulator
  • npm run ios - Run on iOS device/simulator
  • npm run web - Run in web browser

🌱 Contributing

Development Workflow

  1. Branch: Create feature branches from main
  2. Test: Verify changes across mobile, tablet, and web
  3. Document: Update relevant documentation files
  4. Review: Ensure responsive design works on all screen sizes

Code Standards

  • 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)

📖 Learn More

Expo Resources

React Native Resources

Community

MySeedBook Catalogue - Your digital companion for successful gardening 🌱