Skip to content

Built with Expo, Expo Router, Reanimated 3 etc. PlantApp

Notifications You must be signed in to change notification settings

furkananter/PlantApp-Hubx

Repository files navigation

PlantApp - Plant Recognition and Care Assistant

PlantApp Logo

This is a Hubx Task for the React Native Developer position.

eas-update

Try it on Expo Go: Preview Link

Technologies and Tools

  • React Native: Cross-platform mobile app development
  • Expo: React Native framework for rapid development and deployment
  • TypeScript: Type safety and enhanced IDE support
  • Redux Toolkit: For state management
  • i18next: Multi-language support (now just English)
  • React Navigation: In-app navigation
  • Expo Router: File-based routing system
  • React Native Reanimated 3: For advanced animations
  • React Native Gesture Handler: For gestures
  • Expo Camera: Plant photo capture feature
  • Custom Components: Reusable UI components

Key Development Details

  • Platform Specific Codes: Optimized codes for Android and iOS separately.
  • Comprehensive Testing: Android and iOS platforms tested separately.
  • Redux Toolkit: Used for efficient state management.
  • Multi-language Support: Turkish, English, and German language options provided with i18n library.
  • Styling: Only React Native's StyleSheet API used for all style definitions.
  • Animations: Reanimated 3 preferred for smooth and performant animations.
  • Navigation: File-based routing system implemented with Expo Router.

Project Structure

plantapp/
├── app/                      # Expo Router based navigation structure
│   ├── (auth)/               # Authenticated user routes
│   │   ├── (modal)/          # Modal screens
│   │   ├── (settings)/       # Settings related screens
│   │   └── (tabs)/           # Main tab navigation screens
│   ├── (no-auth)/            # Non-authenticated user routes
│   ├── layout.tsx            # Root layout
│   ├── +html.tsx             # Custom HTML template for web
│   └── +not-found.tsx        # 404 Not Found screen
│
├── assets/                   # Static assets
│   ├── fonts/
│   ├── icons/
│   ├── images/
│   └── lotties/
│
├── components/               # Reusable React components
│   ├── common/               # Shared components
│   ├── screen/               # Screen-specific components
│   └── view/                 # Smaller view components
│
├── constants/                # App-wide constants
│
├── helpers/                  # Helper functions and utilities
│
├── hooks/                    # Custom React hooks
│
├── i18n/                     # Internationalization setup
│   ├── languages.ts
│   ├── index.ts
│   └── locales/
│       └── en-US/
│
├── store/                    # Redux store setup
│   ├── slices/               # Redux slices
│   └── index.ts
│
├── types/                    # TypeScript type definitions
│
├── .eslintrc.js              # ESLint configuration
├── .gitignore                # Git ignore file
├── app.json                  # Expo app configuration
├── babel.config.js           # Babel configuration
├── metro.config.js           # Metro bundler configuration
├── package.json              # Project dependencies and scripts
├── README.md                 # Project documentation
└── tsconfig.json             # TypeScript configuration

Screenshots

Onboarding Screens

Welcome Screen Step 1 Screen Step 2 Screen Paywall Screen

Main App Screens

Home Diagnose Scan Scan Gesture My Garden Profile

Additional Features

Gallery Screen Gallery Screen Detail

Settings and Language

Settings Help Language

Video Demo

PlantApp Demo

Installation

  1. Clone the repository:
git clone https://github.com/furkananter/PlantApp-Hubx.git
  1. Install dependencies:
npm install
  1. Start the development server:
npx expo start
  1. Scan the QR code with your Expo Go app on your mobile device to run the app.

Enjoy coding!