Skip to content
HydroConnect
frontend
Public

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository
BranchesTags

Repository files navigation

HydroConnect Frontend

Cross-platform mobile application for real-time water quality monitoring system, powered by Telkomsel

Version Expo React Native TypeScript

📑 Table of Contents

📖 Overview

HydroConnect is a cross-platform mobile application built with React Native and Expo that provides real-time monitoring of water quality systems. The application interfaces with IoT sensors to display water quality metrics, system health status, and provides comprehensive reporting capabilities.

Key Capabilities

  • Real-time Monitoring: Live data streaming via Socket.IO for water quality parameters
  • Multi-platform Support: Runs on iOS, Android, and Web with a single codebase
  • Offline Capability: Local caching and state management for offline operation
  • Push Notifications: Firebase Cloud Messaging integration for alerts
  • Data Export: Generate and download water quality reports
  • Onboarding Flow: User-friendly introduction for first-time users

✨ Features

Core Functionality

  • 📊 Real-time Dashboard: Monitor pH, TDS, turbidity, and system status
  • 📈 Historical Data: View trends and patterns in water quality over time
  • 🔔 Push Notifications: Receive alerts for critical water quality changes
  • 📥 Report Downloads: Export water quality data as reports
  • 📚 User Guide: Comprehensive in-app documentation

Technical Features

  • Type Safety: Full TypeScript implementation
  • State Management: Context API for global state
  • Real-time Communication: Socket.IO client integration
  • Gesture Support: React Native Gesture Handler and Reanimated
  • Haptic Feedback: Native haptic responses for enhanced UX
  • Network Status: Automatic connection monitoring and offline handling

🛠 Tech Stack

Core Framework

UI & Styling

Navigation & Routing

State & Data Management

Device Features

UI Components & Libraries

✅ Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js >= 18.x
  • npm >= 9.x or yarn >= 1.22.x
  • Expo CLI (installed globally or use npx)
  • Git

For iOS Development

  • macOS with Xcode 14+ (for iOS simulator)
  • CocoaPods (installed via brew install cocoapods)

For Android Development

  • Android Studio with Android SDK
  • Java Development Kit (JDK) 11 or higher

Optional

📦 Installation

  1. Clone the repository

    git clone <repository-url>
cd hydroconnect_2/frontend

  2. Install dependencies

    npm install

  3. Install Expo CLI globally (optional but recommended)

    npm install -g expo-cli

  4. Set up environment variables (see Configuration)

⚙️ Configuration

1. Environment Configuration

Create or modify necessary configuration files:

lib/constants.ts - Update environment-specific constants:

export const ENVIRONMENT_STATUS = "DEVELOPMENT" | "PRODUCTION";
export const API_BASE_URL = "your-api-endpoint";
export const SOCKET_URL = "your-socket-endpoint";

2. Firebase Setup

  1. Download google-services.json from Firebase Console
  2. Place it in the project root directory
  3. Ensure it's referenced in app.json: 
    {
    "android": {
        "googleServicesFile": "./google-services.json"
    }
}

3. Expo Configuration

Review and update app.json for your specific needs:

  • App name and slug
  • Bundle identifiers (iOS & Android)
  • Splash screen and icons
  • Permissions and plugins

4. EAS Build Configuration

For production builds, configure eas.json:

npx eas-cli login
npx eas build:configure

🚀 Running the Application

Development Mode

Start the Expo development server:

npm start
# or
npx expo start

This will open the Expo DevTools in your browser with options to:

  • Press a - Open on Android emulator/device
  • Press i - Open on iOS simulator
  • Press w - Open in web browser
  • Scan QR code with Expo Go app

Platform-Specific Commands

Android:

npm run android
# or
npx expo run:android

iOS: (macOS only)

npm run ios
# or
npx expo run:ios

Web:

npm run web
# or
npx expo start --web

Development Tools

Linting:

npm run lint

Clear Cache:

npx expo start -c

📂 Project Structure

frontend/
├── app/                         # Expo Router pages (file-based routing)
│   ├── _layout.tsx              # Root layout
│   ├── index.tsx                # Entry point / Splash screen
│   ├── globals.css              # Global styles
│   ├── ApiTest.tsx              # Development API testing (exclude from prod)
│   ├── (tabs)/                  # Main tab navigation
│   │   ├── home/                # Home dashboard
│   │   ├── informasi/           # Information section
│   │   └── panduan/             # User guide
│   ├── (details)/               # Detail pages
│   │   ├── about-us/            # About page
│   │   ├── water-quality/       # Water quality details
│   │   └── system-quality/      # System health details
│   └── onboarding/              # Onboarding flow
│       ├── onboarding1.tsx
│       ├── onboarding2.tsx
│       └── onboarding3.tsx
├── src/
│   ├── components/              # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── QualityCard.tsx
│   │   ├── StatusPill.tsx
│   │   ├── ToastStack.tsx
│   │   ├── Tooltip.tsx
│   │   └── ...
│   └── modules/                 # Feature-specific modules
│       ├── (tabs)/              # Tab-specific components
│       ├── (details)/           # Detail page components
│       └── onboarding/          # Onboarding components
├── lib/                         # Core logic & utilities
│   ├── constants.ts             # App-wide constants
│   ├── globals.ts               # Global configurations
│   ├── utils.ts                 # Utility functions
│   ├── io.ts                    # Socket.IO client setup
│   ├── rest.ts                  # REST API client
│   ├── notifications.ts         # Push notification logic
│   ├── downloadReports.ts       # Report generation
│   ├── errorHandler.ts          # Error handling utilities
│   ├── chemFormula.ts           # Chemistry calculations
│   └── contexts/                # React Context providers
│       ├── connectionCTX.ts     # Connection state
│       ├── readingCTX.ts        # Sensor readings
│       ├── summariesCTX.ts      # Data summaries
│       └── downloadProgressCTX.ts
├── schemas/                     # TypeScript interfaces & schemas
│   ├── readings.ts
│   ├── summaries.ts
│   ├── downloadRequest.ts
│   ├── downloadProgress.ts
│   ├── usageNotification.ts
│   └── panduanData.ts
├── assets/                      # Static assets
│   ├── fonts/                   # Custom fonts
│   ├── images/                  # Images & icons
│   └── sounds/                  # Audio files
├── app.json                     # Expo configuration
├── package.json                 # Dependencies & scripts
├── tsconfig.json                # TypeScript configuration
├── tailwind.config.js           # Tailwind CSS configuration
├── metro.config.js              # Metro bundler configuration
├── babel.config.js              # Babel configuration
├── eas.json                     # EAS Build configuration
└── README.md                    # This file

📚 API Documentation

For detailed API documentation including:

  • Frontend schemas
  • Context providers
  • Socket.IO event handlers
  • REST API utilities
  • Download logic

See APIDocs.md in the project root.

Quick Reference

Socket.IO Events:

  • connect - Connection established
  • readings - Real-time sensor data
  • summaries - Aggregated statistics
  • download-progress - Download status updates

REST Endpoints: See backend API documentation for complete endpoint reference.

🏗 Building for Production

Using EAS Build (Recommended)

  1. Configure EAS:

    npx eas build:configure

  2. Build for Android:

    npx eas build --platform android

  3. Build for iOS:

    npx eas build --platform ios

  4. Build for both platforms:

    npx eas build --platform all

Local Builds

Android APK:

npx expo build:android -t apk

iOS IPA:

npx expo build:ios -t archive

Pre-build Checklist

  • Update version in app.json and package.json
  • Set ENVIRONMENT_STATUS = "PRODUCTION" in constants
  • Remove or comment out ApiTest.tsx route
  • Test on physical devices
  • Verify Firebase configuration
  • Update app icons and splash screens
  • Review and test push notifications
  • Check API endpoints configuration

🧪 Testing

Manual Testing

The app includes a development-only API testing page:

// Access via direct navigation in development mode
router.push("/ApiTest");

⚠️ Important: Exclude ApiTest.tsx from production builds.

Testing Checklist

  • Real-time data streaming (Socket.IO)
  • Offline mode and reconnection
  • Push notifications
  • Report downloads
  • Navigation flows
  • Network error handling

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

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

Commit Convention

We follow Conventional Commits:

  • feat: - New feature
  • fix: - Bug fix
  • docs: - Documentation changes
  • style: - Code style changes (formatting, etc.)
  • refactor: - Code refactoring
  • test: - Adding tests
  • chore: - Maintenance tasks

Code Style

  • Follow TypeScript best practices
  • Use ESLint configuration provided
  • Format with Prettier
  • Write meaningful commit messages
  • Add JSDoc comments for complex functions

📄 License

This project is proprietary and confidential. Unauthorized copying, distribution, or use is strictly prohibited.

📞 Support & Contact

For questions, issues, or support:

  • Create an issue in the repository
  • Contact the development team
  • Review the API Documentation

🙏 Acknowledgments

Built with:

Made with ❤️ for HydroConnect

Version 1.0.0 | Last Updated: January 2026

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages