Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/c0np4nn4/cb2001155

A project for 'PNU Web application programming' course

https://github.com/c0np4nn4/cb2001155

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (9.9%) to scientific vocabulary
Last synced: 11 months ago · JSON representation

Repository

A project for 'PNU Web application programming' course

Basic Info
Statistics
  • Stars: 1
  • Watchers: 1
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Created over 1 year ago · Last pushed over 1 year ago
Metadata Files
Readme

README.md

AQMonitor - Air Quality Monitoring Dashboard

AQMonitor is a simple yet functional web application that provides real-time air quality data for cities worldwide. It offers features such as data visualization, global air quality rankings, and an intuitive user experience, making it an accessible tool for environmental awareness.

Features

  • Landing Page: Welcoming page introducing the platform's purpose and functionality.
  • City Data Section: Fetch and view real-time air quality data for specific cities.
  • Visualize Section: Interactive charts and graphs to analyze air quality trends.
  • Ranking Section: Global air quality rankings enabling city-to-city comparisons.
  • Responsive Design: Optimized for usability across all device types.

Project Structure

. ├── App.jsx ├── Section │ ├── Charts.jsx │ ├── CityData.jsx │ ├── Landing.jsx │ └── Ranking.jsx ├── components │ ├── Footer.jsx │ ├── Header.jsx │ └── Navigation.jsx ├── hooks │ ├── useChartSimulation.js │ ├── useFetchCityData.js │ └── useRankingSimulation.js ├── utils └── api.js

Technologies Used

  • React.js: Modular and scalable frontend development.
  • Bootstrap: For responsive and visually appealing components.
  • Chart.js: Interactive chart rendering.
  • OpenWeatherMap API: Provides real-time weather and air quality data.
  • GitHub Pages: For live hosting and deployment.

Project Highlights

  1. Transition to Modern Frameworks: Initially developed with HTML, CSS, and vanilla JavaScript using jQuery for API calls, later transitioned to React and Axios for better scalability and performance.
  2. Responsive Design: CSS Flexbox and Grid for layout and Skeleton Code for improved UX during data loading.
  3. API Integration: Leveraged OpenWeatherMap API for comprehensive data retrieval while considering alternative APIs like AccuWeather.

Live Hosting

The application is live and accessible at:
https://c0np4nn4.github.io/CB2001155

Final Report

For a detailed description of the project, including its development process, challenges, and solutions, refer to the Final Report.

Key Lessons Learned

  • Frontend Development: Learned to structure and modularize React applications.
  • API Integration: Gained experience in handling real-time data efficiently using Axios.
  • Responsive UX: Applied Skeleton Code and CSS techniques for enhanced user experience.
  • Project Scalability: Refactored file structure to improve maintainability.

Owner

  • Name: c0np4nn4
  • Login: c0np4nn4
  • Kind: user

GitHub Events

Total
  • Watch event: 1
  • Push event: 33
  • Create event: 4
Last Year
  • Watch event: 1
  • Push event: 33
  • Create event: 4

Committers

Last synced: over 1 year ago

All Time
  • Total Commits: 37
  • Total Committers: 1
  • Avg Commits per committer: 37.0
  • Development Distribution Score (DDS): 0.0
Past Year
  • Commits: 37
  • Committers: 1
  • Avg Commits per committer: 37.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
c0np4nn4 c****4@g****m 37

Issues and Pull Requests

Last synced: about 1 year ago

All Time
  • Total issues: 0
  • Total pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Total issue authors: 0
  • Total pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Issue authors: 0
  • Pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
Pull Request Authors
Top Labels
Issue Labels
Pull Request Labels

Dependencies

client/package.json npm
  • @popperjs/core ^2.11.8
  • axios ^1.7.9
  • bootstrap ^5.3.3
  • chart.js ^4.4.7
  • cra-template 1.2.0
  • gh-pages ^6.2.0
  • react ^19.0.0
  • react-bootstrap ^2.10.6
  • react-dom ^19.0.0
  • react-scripts 5.0.1