Meta Weather

This project was bootstrapped with Create React App.

Table of Contents

• Meta Weather
  • Table of Contents
  • Introduction
  • Preview
  • Features
  • Flow diagram
    • Getting current weather based on user location
  • Prerequisites
  • Installation
  • Code coverage
  • End to end testing with Cypress
    • Prepare environment
    • GUI mode
      • Main UI to interact
      • Chrome browser test runner
    • Headless mode
  • Technologies
  • Responsive UI
    • Dashboard
      • On large screen
      • On small screen
      • On mobile screen
    • Search city page
      • On large screen
      • On small screen
      • On mobile screen
    • City weather page
      • On large screen
      • On small screen
      • On mobile screen
  • Learn More
  • Changelog
  • License

Go to top ⏫

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

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%

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

Chrome browser test runner

Headless mode

$ yarn cy:open

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

Go to top ⏫

Responsive UI

Go to top ⏫

Dashboard

On large screen

Go to top ⏫

On small screen

Go to top ⏫

On mobile screen

Go to top ⏫

Search city page

On large screen

Go to top ⏫

On small screen

Go to top ⏫

On mobile screen

Go to top ⏫

City weather page

On large screen

Go to top ⏫

On small screen

Go to top ⏫

On mobile screen

Go to top ⏫

Learn More

• You can learn more in the Create React App documentation.

• Learn React, check out the React documentation.

• Learn Redux

• Learn Cypress End to end testing

• Getting started with Material UI

• Getting started with [Sentry](https://material-ui.com/getting-started/installation/)

• Learn GitHub Actions

• Learn ESLint

• Learn Commitlint

• Learn Release-it

Go to top ⏫

Changelog

See CHANGELOG.md

License

MIT © Phát Nguyễn (Fast)