🌿 Flora

A smart plant care companion for Android & iOS

---

📖 About

Flora is a cross-platform React Native application for plant lovers and hobbyist gardeners. It helps you track, care for, and monitor the health of your plants — all from your phone. Flora combines a polished onboarding experience, Firebase-backed authentication, a personal garden dashboard, AI-style symptom checking, and expert care guidance into one cohesive app.

---

✨ Features

• Onboarding Flow — Beautiful 3-screen onboarding shown only on first launch, tracked with AsyncStorage
• User Authentication — Sign up, log in, and forgot password flows powered by Firebase Auth
• My Garden — Personal plant collection dashboard where users manage all their added plants
• Add a Plant — Add new plants to your garden with details and confirmation screen
• Plant Details — View in-depth information about each individual plant
• Care Scheduling — Set and manage care routines (watering, fertilising, etc.)
• Symptom Checker — Multi-step questionnaire (Q2–Q5 screens) to diagnose plant health issues
• Monitor Health — Track the ongoing health status of your plants
• Expert Tips — Curated care advice and best practices
• Profile Screen — View and manage your account
• Image Picker — Pick and upload plant images from your device
• Lottie Animations — Smooth animated transitions and illustrations throughout the app
• Responsive UI — Fully responsive design using react-native-size-matters and react-native-responsive-fontsize
• Floating Bottom Tab Bar — Custom rounded floating tab navigator with Home, My Garden, and Profile tabs

---

🛠️ Tech Stack

Layer	Technology
Framework	React Native 0.74
Language	TypeScript + JavaScript
Navigation	React Navigation (Stack + Bottom Tabs + Drawer)
Backend	Firebase (Firestore, Auth, Storage, Analytics)
Animations	Lottie React Native, React Native Reanimated
Image Picker	react-native-image-picker
Local Storage	AsyncStorage
UI Components	react-native-linear-gradient, react-native-svg, react-native-vector-icons
Onboarding	react-native-onboarding-swiper
Responsive Layout	react-native-size-matters, react-native-responsive-fontsize
Date Picker	@react-native-community/datetimepicker
Dropdown	react-native-dropdown-picker
Testing	Jest + React Test Renderer

---

📁 Project Structure

Flora/
├── screens/
│   ├── onBoardingScreens/
│   │   ├── Screen1.jsx          # Onboarding page 1
│   │   ├── Screen2.jsx          # Onboarding page 2
│   │   └── Screen3.jsx          # Onboarding page 3
│   ├── StackScreens/
│   │   ├── Login.jsx            # Login screen
│   │   ├── Register.jsx         # Sign up screen
│   │   ├── ForgotPassword.jsx   # Password reset
│   │   ├── AddPlant.jsx         # Add a new plant
│   │   ├── PlantAdded.jsx       # Confirmation after adding
│   │   ├── PlantDetails.jsx     # Plant detail view
│   │   ├── Care.jsx             # Care overview
│   │   ├── CareSchedule.jsx     # Care scheduling
│   │   ├── SymptomChecker.jsx   # Symptom checker entry
│   │   ├── Q2Screen.jsx         # Symptom checker step 2
│   │   ├── Q3Screen.jsx         # Symptom checker step 3
│   │   ├── Q4Screen.jsx         # Symptom checker step 4
│   │   ├── Q5Screen.jsx         # Symptom checker step 5
│   │   ├── ExpertTips.jsx       # Expert plant care tips
│   │   └── MonitorHealth.jsx    # Health monitoring screen
│   ├── BottomTabScreens/
│   │   ├── Home.jsx             # Main home tab
│   │   ├── MyGarden.jsx         # Personal garden tab
│   │   └── Profile.jsx          # Profile tab
│   └── PlantContext.jsx         # React Context for global plant state
├── src/
│   └── Theme/
│       ├── color.js             # App-wide color palette
│       └── rfSpacing.js         # Responsive spacing tokens
├── assets/fonts/                # Custom fonts (Adamina, Allura, etc.)
├── Flora.tsx                    # Root navigator & auth logic
├── App.tsx                      # App entry point
├── firebaseConfig.js            # Firebase initialisation
└── package.json

---

🚀 Getting Started

Prerequisites

• Node.js >= 18
• React Native CLI environment set up (guide)
• A Firebase project with Authentication and Firestore enabled
• Android Studio (for Android) or Xcode (for iOS)

Setup

1. Clone the repository

   git clone https://github.com/MuhammadAwais053/Flora.git
   cd Flora

2. Install dependencies

   npm install

3. Connect Firebase

   • Go to the Firebase Console and create a project
   • Enable Email/Password Authentication and Cloud Firestore
   • Download google-services.json (Android) and GoogleService-Info.plist (iOS) and place them in the appropriate native folders
   • Update firebaseConfig.js with your project credentials

4. iOS only — install pods

   cd ios && bundle install && bundle exec pod install && cd ..

5. Run the app

   Android:

   npm run android

   iOS:

   npm run ios

---

🔑 Auth Flow

• On first launch, the onboarding screens (Screen1 → Screen2 → Screen3) are shown and this state is stored in AsyncStorage so they never appear again
• Unauthenticated users land on Login / Register / Forgot Password
• Authenticated users are taken directly to the Main tab navigator (Home, My Garden, Profile)
• On logout or re-login, the auth state is cleaned up via Firebase's onAuthStateChanged listener

---

🤝 Contributing

1. Fork the repository
2. Create a branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m "feat: add your feature"
4. Push: git push origin feature/your-feature
5. Open a Pull Request

---

👤 Author

Muhammad Awais — @MuhammadAwais053

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ using React Native & Firebase