Meta Weather

License

This project was bootstrapped with Create React App.

Preview

Meta Weather

Introduction

This project inspired on building a weather forecast website. Using Meta Weather Public API to get weather forecast data.

*Warning: Cause of CORS issue on Meta Weather Public API, so I decided to build a simple proxy server to serve API data for my webapp.*

Go to top ⏫

Preview

Deployed ✅ on Vercel: ➡ Click here to access!

Features

Get current weather forecast.
Detect current location by: Geolocation API, IP.
Search city by keyword.
Show weather forecast in the next 5 days.
Monitor and manage error by Sentry
Automate workflow with GitHub Actions
Automate release versioning with release-it
Redux modular files structure
Custom hooks

Go to top ⏫

Flow diagram

Getting current weather based on user location

Flow diagram for getting current weather based on user location

Go to top ⏫

Prerequisites

NodeJS from version 10 installed
Yarn Package manager installed
IDE (ex: Visual Studio Code)
Clone my meta-weather API proxy / create your own.
Register and get your IP-Geolocation API access key
Register and get Sentry DSN for your React project

Go to top ⏫

Installation

Step 1: Open terminal on change directory to your clone folder
```
$ cd path/to/some/where/you/clone
```
Step 2: Install node_modules
```
$ yarn install
```

Step 3: Prepare your own environment variables

$ cp .env.sample .env.local

# ACCESS_KEY from https://ip-geolocation.whoisxmlapi.com
REACT_APP_GEO_ACCESS_KEY=<YOUR KEY>

# META WEATHER PROXY URL
REACT_APP_META_WEATHER_PROXY_URL=<YOUR PROXY URL>

# SENTRY DSN
REACT_APP_SENTRY_DSN=<SENTRY DSN FOR YOUR PROJECT>

PORT=<PORT TO SERVE WEB APP>

Step 4: Start meta-weather proxy server (mentioned in Prerequisites)
Step 5: Start react app
```
$ yarn start
```
Step 6: Drink coffee ☕ and enjoy 😁

Go to top ⏫

Code coverage

Usage

$ yarn test --coverage --watchAll

Current code coverage is 97%

Code-coverage-97-percent

Go to top ⏫

End to end testing with Cypress

Prepare environment

Install Cypress system requirements to make sure you can run Cypress later.
Create your own cypress.env.json from cypress.env.json.example

$ cp cypress.env.json.example cypress.env.json

{
  "host": "
    web host to test (can be your deployed url)
    localhost can only use in cypress open not cypress run.
    Use IP address of your local instead 
    Example: 
     - http://xxx.yyy.zz.tt:port
     - https://www.your-website.com
  "
}

In case you want to test browser permissions, you can refer to this package cypress-browser-permissions to know how to override and set fixed permissions for each test case.

GUI mode

$ yarn cy:open

Main UI to interact

Cypress-GUI-mode

Chrome browser test runner

Cypress-Chrome

Headless mode

$ yarn cy:open

Cypress-headless-mode

Go to top ⏫

Technologies

ReactJS - Main library for building UI with components approach
React Hooks - Custom hooks to reuse logic
TypeScript - Typed JavaScript at Any Scale.
Redux - State Management
Redux Saga - redux middleware providing application side effects like asynchronous data fetching
Material UI - React Components based on Material Design, higher customization
React router - Supports router in ReactJS single page application
Geolocation API - WebAPI supports Geolocation
Jest - delightful JavaScript Testing Framework with a focus on simplicity.
React Testing Library - a very light-weight solution for testing React components
Cypress - JavaScript End to end testing framework
Sentry - Application Monitoring and Error Tracking Software
GitHub Actions - Automate workflow in GitHub
ESlint - JavaScript linter plugin
Husky - Git hooks
Lint staged - Lint staged git files and don't let 💩 slip into your code base
Commitlint - Lint commit messages
Prettier - Code auto formatter
Release-it - Automate versioning and package publishing
GitHub Pages - Free GitHub place to serve static websites
Codecov - Code coverage integration
Vercel - the best place to deploy any frontend app