Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/a-samod/weather-api-frontend

Last synced: 9 days ago
JSON representation

Host: GitHub
URL: https://github.com/a-samod/weather-api-frontend
Owner: A-Samod
Created: 2024-03-22T11:07:46.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-04-24T14:25:29.000Z (7 months ago)
Last Synced: 2024-04-24T17:40:03.724Z (7 months ago)
Language: JavaScript
Size: 5.65 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Student ID : COBSCCOMP4Y222P-011

# WEATHER MAP FRONTEND

This project is a frontend application built with React that displays weather data on a map for 24 districts in Sri Lanka. The weather data includes temperature, humidity, air pressure, and the latest updated date. The data is synced from a backend API.

## DEMO

You can find a live demo of the application [here](https://avishka.tech/).

## FEATURES

- Displays weather data on a map for 24 districts in Sri Lanka.
- Shows temperature, humidity, air pressure, and the latest updated date.
- Includes a search option to find weather data for specific districts.

1. Weather Map:

![Weather Map](./README/weather_map.png)

2. Weather Details:

![Weather Details](./README/weather_data.png)

3. Search Functionality:

![Search Functionality](./README/weather_map_search.png)

## Installation

1. Clone the repository:

```
git clone https://github.com/A-Samod/weather-api-frontend
```

2. Navigate to the project directory:

```
cd weather-api-frontend
```

3. Install dependencies:
```
npm install
```

4. Start the development server:
```
npm start
```
5. Open http://localhost:3000 to view it in the browser.

## Backend Repository

The backend repository for this project can be found [here](https://github.com/A-Samod/weather-api-backend).

## UML SEQUENCE DIAGRAM

![SEQUENCE DIAGRAM](./README/sequence_diagram.png)

## CLOUD ARCHITECTURE

![CLOUD ARCHITECTURE](./README/cloud_architecture.png)