AtomSync - Weather & Air Quality Monitoring App

A comprehensive React Native Expo mobile application that provides real-time weather and air quality monitoring with a modern, highly interactive, and visually rich UI/UX.

Features

🌟 Core Features

• Home Dashboard: Current location display with GPS, prominent AQI with color-coded indicators, temperature, humidity, wind speed, air pressure, and dynamic health messages
• Air Quality Details: Detailed pollutant breakdown (CO, CO₂, NO₂, SO₂, PM2.5, PM10, O₃) with interactive charts showing trends and WHO safe limits
• Weather Screen: Current conditions, hourly and 7-day forecasts with charts, feels-like temperature, and activity suggestions
• Alerts & Notifications: Push notifications for AQI thresholds and weather changes
• Settings: Unit management (°C/°F, AQI scales), multiple location tracking, notification preferences

🎨 Design Features

• Modern, clean card-based UI with smooth scrolling
• Color-coded indicators and charts for quick comprehension
• Responsive layouts for different device sizes
• Intuitive UX with clear navigation hierarchy
• Smooth animations and transitions
• Gradient backgrounds and modern visual elements

Tech Stack

• Framework: React Native with Expo
• State Management: Redux Toolkit
• Navigation: React Navigation with Expo Router
• Charts: react-native-chart-kit with react-native-svg
• UI Components: Custom components with Linear Gradients
• Location: Expo Location
• Notifications: Expo Notifications
• Storage: AsyncStorage
• APIs: OpenWeatherMap, WAQI, AirVisual

Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI (npm install -g @expo/cli)
• iOS Simulator (for iOS development) or Android Studio (for Android development)

1. Clone and Install Dependencies

git clone <repository-url>
cd atomsync
npm install

2. API Keys Setup

You'll need to obtain API keys from the following services:

1. OpenWeatherMap: Get your API key from OpenWeatherMap
2. WAQI: Get your token from WAQI
3. AirVisual: Get your key from AirVisual

Update the API keys in services/api.ts:

const OPENWEATHER_API_KEY = 'your_openweather_api_key';
const WAQI_API_KEY = 'your_waqi_api_key';
const AIRVISUAL_API_KEY = 'your_airvisual_api_key';

3. EAS Project Setup (for Push Notifications)

1. Install EAS CLI: npm install -g eas-cli
2. Login to Expo: eas login
3. Initialize EAS: eas init
4. Update the project ID in app.json:

{
  "expo": {
    "extra": {
      "eas": {
        "projectId": "your-actual-project-id"
      }
    }
  }
}

4. Run the App

# Start the development server
npm start

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

# Run on web
npm run web

Project Structure

atomsync/
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation screens
│   │   ├── index.tsx      # Home dashboard
│   │   ├── air-quality.tsx # Air quality details
│   │   ├── weather.tsx   # Weather screen
│   │   └── settings.tsx  # Settings screen
│   └── _layout.tsx        # Root layout with Redux provider
├── components/            # Reusable UI components
│   └── ui/               # UI component library
│       ├── Card.tsx      # Card components
│       ├── Charts.tsx    # Chart components
│       └── Alerts.tsx    # Alert components
├── services/             # API and service layer
│   ├── api.ts           # Weather & air quality APIs
│   ├── location.ts      # Location services
│   └── notifications.ts # Push notification service
├── store/               # Redux state management
│   ├── appSlice.ts     # Main app state slice
│   ├── index.ts        # Store configuration
│   └── hooks.ts        # Typed Redux hooks
└── assets/             # Images, fonts, etc.

Key Components

🏠 Home Dashboard (app/(tabs)/index.tsx)

• Current location display with GPS
• Prominent AQI indicator with color coding
• Weather conditions with temperature and description
• Health recommendations based on AQI
• Quick action buttons

🌬️ Air Quality Screen (app/(tabs)/air-quality.tsx)

• Detailed AQI information
• Pollutant breakdown with WHO guidelines
• Interactive charts for trends
• Health tips and recommendations

🌤️ Weather Screen (app/(tabs)/weather.tsx)

• Current weather conditions
• Hourly and daily forecasts
• Weather metrics (humidity, wind, pressure, visibility)
• Sunrise/sunset times
• Activity suggestions

⚙️ Settings Screen (app/(tabs)/settings.tsx)

• Unit preferences (temperature, wind speed, AQI scale)
• Notification settings
• Location management
• App information and privacy policy

State Management

The app uses Redux Toolkit for state management with the following key slices:

• Location: Current location and saved locations
• Weather: Current weather data and forecasts
• Air Quality: AQI data and pollutant information
• Settings: User preferences and app configuration
• Notifications: Push notification management

API Integration

Weather APIs

• OpenWeatherMap: Current weather, forecasts, and location data
• WAQI: Air quality index and pollutant data
• AirVisual: Additional air quality information

Location Services

• Expo Location: GPS location services
• Reverse Geocoding: Convert coordinates to city names

Push Notifications

The app includes comprehensive push notification support:

• Air Quality Alerts: Notifications when AQI exceeds thresholds
• Weather Alerts: Severe weather condition warnings
• Daily Summaries: Morning weather and air quality updates
• Customizable: Users can enable/disable different alert types

Customization

Adding New Locations

Users can save multiple locations for tracking weather and air quality.

Unit Preferences

• Temperature: Celsius or Fahrenheit
• Wind Speed: km/h or mph
• AQI Scale: US EPA or India AQI

Notification Settings

• Enable/disable push notifications
• Set AQI threshold for alerts
• Weather alert preferences

Development

Code Style

• TypeScript for type safety
• ESLint for code quality
• Modular component architecture
• Clean separation of concerns

Testing

# Run linting
npm run lint

# Type checking
npx tsc --noEmit

Deployment

Building for Production

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

# Submit to app stores
eas submit --platform ios
eas submit --platform android

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support and questions:

• Create an issue in the repository
• Check the documentation
• Review the code comments

Acknowledgments

• OpenWeatherMap for weather data
• WAQI for air quality data
• AirVisual for additional air quality information
• Expo team for the excellent development platform
• React Native community for the ecosystem

---

Built with ❤️ using React Native, Expo, and modern mobile development practices.