A comprehensive Progressive Web Application (PWA) for monitoring real-time air quality data, tracking pollution levels, and protecting environmental health. Built with modern web technologies including Next.js, React, TypeScript, and Prisma.

• Live AQI (Air Quality Index) readings
• Multiple pollutant tracking (PM2.5, PM10, NO2, O3, CO, SO2, NH3, Pb)
• Interactive Google Maps integration
• Historical data visualization with charts

• Offline functionality - Works without internet connection
• Push notifications for air quality alerts
• One-click installation on mobile and desktop
• Native app-like experience
• Background sync for data updates

• Intelligent chatbot for air quality insights
• Smart recommendations based on pollution levels
• Predictive analysis for air quality trends

• Responsive design for all devices
• Dark/Light mode support
• Smooth animations with AOS
• Intuitive dashboard interface
• Mobile-first approach

• Secure authentication system
• Personalized settings and preferences
• User-specific notification preferences

Make sure you have the following installed:

• Node.js (version 18 or higher)
• npm or yarn
• PostgreSQL database
• Google Maps API key

1. Clone the repository

   git clone https://github.com/RinSanom/IoTWeb.git 
   cd IoTWeb

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Database
   DATABASE_URL="postgresql://username:password@localhost:5432/air_quality_db"
   
   # Google Maps API
   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="your_google_maps_api_key"
   
   # Push Notifications (VAPID Keys)
   NEXT_PUBLIC_VAPID_PUBLIC_KEY="your_vapid_public_key"
   VAPID_PRIVATE_KEY="your_vapid_private_key"
   VAPID_EMAIL="your_email@example.com"
   
   # App URL
   NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. Set up the database

   # Generate Prisma client
   npx prisma generate
   
   # Run database migrations
   npx prisma db push

5. Generate VAPID keys for push notifications

   node generate-vapid-keys.js

6. Run the development server

   npm run dev
   # or
   yarn dev

7. Open your browser

   Navigate to http://localhost:3000 to see the application running.

1. Visit the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Maps JavaScript API
4. Create credentials (API key)
5. Add the API key to your .env.local file

For detailed instructions, see GOOGLE_MAPS_SETUP.md.

1. Generate VAPID keys using the provided script:

   node generate-vapid-keys.js

2. Add the keys to your environment variables
3. The app will automatically handle push notification subscriptions

For more details, see PUSH_NOTIFICATIONS_GUIDE.md.

The app automatically detects if it can be installed as a PWA and shows installation prompts:

• Mobile: Add to home screen banner
• Desktop: Install app prompt in address bar
• Manual: Use the install button in the app

src/
├── app/                    # Next.js app router
│   ├── api/               # API routes
│   ├── air-quality/       # Air quality page
│   ├── about/             # About page
│   └── settings/          # Settings page
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components
│   ├── air-quality/      # Air quality specific components
│   └── auth/             # Authentication components
├── contexts/             # React contexts
├── hooks/                # Custom React hooks
├── lib/                  # Utility libraries
│   ├── services/         # API services
│   ├── store/            # Redux store
│   └── types/            # TypeScript type definitions
└── layout/               # Layout components

public/
├── icons/                # PWA icons
├── image/                # Static images
└── sw.js                 # Service worker

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

For detailed deployment instructions, see VERCEL_DEPLOYMENT_GUIDE.md.

The app can be deployed on any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

• ✅ Offline Support: Works without internet connection
• ✅ Push Notifications: Air quality alerts and updates
• ✅ Background Sync: Automatic data synchronization
• ✅ Install Prompts: Native installation experience
• ✅ App Shortcuts: Quick access to key features
• ✅ Responsive Design: Optimized for all screen sizes

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes and commit

   git commit -m 'Add amazing feature'

4. Push to your fork

   git push origin feature/amazing-feature

5. Open a Pull Request

• Follow TypeScript best practices
• Use Prettier for code formatting
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

The application uses PostgreSQL with Prisma ORM. Main models:

model AirQuality {
  id          Int      @id @default(autoincrement())
  aqiCategory String   // Air Quality Index category
  pm10        Float    // PM10 particles
  pm2_5       Float    // PM2.5 particles
  no2         Float    // Nitrogen Dioxide
  o3          Float    // Ozone
  co          Float    // Carbon Monoxide
  so2         Float    // Sulfur Dioxide
  nh3         Float    // Ammonia
  pb          Float    // Lead
  timestamp   DateTime @default(now())
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

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

• OpenMeteo for weather and air quality data
• Google Maps for mapping services
• Vercel for hosting and deployment
• Next.js team for the amazing framework
• Open source community for various packages and tools

If you have any questions or need help:

• 📧 Email: rinsanom3@gmail.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions