Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kareimgazer/a-eggaw
single page application for weather forecast
https://github.com/kareimgazer/a-eggaw
axios css-flexbox css-grid d3 d3js docker flyio frontend gostatic html javascript playwright react redux-toolkit restful-api single-page-app tailwindcss vite
Last synced: about 2 months ago
JSON representation
single page application for weather forecast
- Host: GitHub
- URL: https://github.com/kareimgazer/a-eggaw
- Owner: KareimGazer
- Created: 2024-09-01T02:50:50.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-22T04:06:53.000Z (4 months ago)
- Last Synced: 2024-10-26T18:44:24.855Z (3 months ago)
- Topics: axios, css-flexbox, css-grid, d3, d3js, docker, flyio, frontend, gostatic, html, javascript, playwright, react, redux-toolkit, restful-api, single-page-app, tailwindcss, vite
- Language: JavaScript
- Homepage: https://a-eggaw.fly.dev/
- Size: 1.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A-Eggaw 🌤️
A production-grade single page app for weather forecasting.
## Table of content 📋
- [A-Eggaw 🌤️](#a-eggaw-️)
- [Table of content 📋](#table-of-content-)
- [Features 🚀](#features-)
- [Future Roadmap 🗺️](#future-roadmap-️)
- [Getting Started 🚩](#getting-started-)
- [Locally 🖥️](#locally-️)
- [Development 👨💻](#development-)
- [Production 🏭](#production-)
- [Docker 🐋](#docker-)
- [Development 👨💻](#development--1)
- [Production 🏭](#production--1)
- [Testing 🧪](#testing-)
- [Unit Testing 🔎](#unit-testing-)
- [End-To-End Testing 🎭](#end-to-end-testing-)
- [Project Structure 📂](#project-structure-)
## Features 🚀
Here is a [slides version](https://docs.google.com/presentation/d/1BhxiugWHq_NrVFlPmnR1rBMZF9b1vmJTj76LBA_iOqY/edit#slide=id.g2fcee10ece6_0_21213)!
- Dark / Light modes
- Auto location and time detection
- summary of the weather across the country
- daily forecast summary
- accurate weather forecating for the next 10 days
- historical weather info in the last 10 years
- iteractive charts
## Future Roadmap 🗺️
- Country GeoJSON Map (under development)
- E2E Testing (in progress)
- prototypes
- RTK for stage management
- Vitest
- CI/CD
- Browser caching
- [Tommorw API](https://www.tomorrow.io/weather-api/)
- Typescript
## Getting Started 🚩
We provide two ways one using docker with minimal setup or locally if you don't get comfortable with containers. both provide production and development environments.
> :warning:
> This App is powered by the [World Weather API](https://www.worldweatheronline.com/weather-api/) so you need to get an API key first and then set your [environment variables](https://vitejs.dev/guide/env-and-mode) in the `.env` file.
### Locally 🖥️
Start by installing [nodejs](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)
#### Development 👨💻
1. run `npm install` at the root of the project
2. run `npm run dev`
#### Production 🏭
for a production build use
```bash
npm run build
npm run preview
```
### Docker 🐋
start by downloading [Docker](https://www.docker.com/get-started/)
#### Development 👨💻
Uses a nodejs container image and runs the app on the vite development server
```bash
docker compose -f .\docker-compose.dev.yml up --build --watch
```
#### Production 🏭
Uses a multi-stage image building process starting from nodejs image to generate the build, and then uses [goStatic](https://github.com/PierreZ/goStatic) image as a static web server built with Go. It's commonly used with the Jamstack although the app is MERN oriented.
```bash
docker compose up
```
## Testing 🧪
### Unit Testing 🔎
vitest
### End-To-End Testing 🎭
[Playwright](https://playwright.dev/) is the right choice, you can find a standalone testing repo [here](https://github.com/KareimGazer/A-Eggaw-E2E).
## Project Structure 📂
```
A-Eggaw
├── src
| ├── App.jsx main react app
│ ├── assets
│ │ └── weather-icon.webp
│ ├── day components for daily forecast section
│ │ └── DailyBoard.jsx
│ ├── history components for historical weather trends section
│ │ ├── Graph.jsx
│ │ ├── GraphSelector.jsx
│ │ ├── HistoryDashboard.jsx
│ │ └── TimeSelector.jsx
│ ├── main.jsx React entry point
│ ├── month components for monthly forecast section
│ │ └── MonthlyBoard.jsx
│ ├── search search bar componets
│ │ ├── CitySelector.jsx
│ │ └── SearchBar.jsx
│ └── week components for weekly forecast section
│ ├── WeekCards.jsx
| ├── WeekGraph
| └── WeeklyBoard
├── dist static site built files (git ignored)
├── .gitignore
├── .dockerignore
├── dev.Dockerfile Image for running the development server
├── docker-compose.dev.yml development compose file
├── Dockerfile The production container image of the server
├── Dockerfile production compose file
└── index.html
```