Weather App

Table of Contents

• Description
• Deployment Site
• Tech Used
• Testing
• Interface Design
• Installation and Prerequisites
• Getting Started
• Directory Structure
• Version Control
• NPM scripts dictionary

Description

Weather app displays the current weather conditions of Australia’s major capital cities. The weather data is retrieved from the OpenWeather API.

This application showcases:

• Minimalistic, Clean and Intuitive design with an strong focus on accessibility and good color contrast ratio.

• It follows Best coding standards, strict code organisation practices to improve Maintainability.

• Global state management and caching API calls for Performance, and Scalability.

• Styling using styled-components & Design-system using styled-system allowing for theming support for a Scalable and Responsive user interface.

• Code splitting and Dynamic loading based on page routes bundled into individual javascript chunk files to Speed up initial load times and improve Performance by building smaller bundle files sizes.

• Use of Typescript for strong & static type checking, unit tests, es-lint, prettier and git-commit hooks with Husky for delivering Consistency and Reliability.

• Conventional-Commit messages to improve Readability of commit message and Automatic Changelogs Generation for semantic versioning and Release notes. See CHANGELOG.md for details.

• Continuous Integration and Deployment using Netlify.

• Dark Mode - Showcase theming capabilities and enable dark mode. Switch between theme mode by clicking or button.

Deployment Site

The production deployment and Continuous Delivery is setup with Netlify.com.

The live project site can be found at: https://weather-app-vic.netlify.app.
For branch based build previews follow the link above in the nelify build badge.

Tech used

This project mainly relies on the following libraries:
Typescript, React, React-Hooks & React-Query(for state management), Styled-components & Styled-system(for React styling), @reach/router, Axios, Jest, React-testing/library, create-react-app, Eslint, Prettier, Git-hooks with Husky and Lint-staged.

Testing

For testing, this project is setup with the following testing tools and libraries:

Unit tests: jest and @testing-library/react. Typescript types coverage: tscov -> 90%+ coverage. Linting: eslint with typescript support

Interface Design

The application has two page types:

1. Home Page - displays current weather information for major Autralian Capital cities:

Clicking on the City Weather Box opens the city's detailed weather conditions page.

2. City Page - displays weather conditions and details for the selected city:

Installation and Prerequisites

Node.js

Install Node.js. And use the latest version of NodeJS (>= v10 preferred).

Yarn

Yarn is used of the development of this project, alternatively npm can be used which is installed along with Node.js. Note: If you decide to you npm instead, just replace yarn with npm run in the below commands;

Install Yarn

Getting started

1. Clone this repo.

$ git clone https://github.com/praneybehl/weather-app
$ cd weather-app

2. Important! Setup environment variables.

 - Create a copy of the file '.env-sample' and name it '.env' in the same directory.
 - Replace the content <REPLACE_THIS_WITH_YOUR_OPEN_WEATHER_API_KEY> with your OpenWeather API Key or check email for a sample key provided.

3. NPM scripts dictionary Install Dependencies.

$ yarn
or if using npm:
$ npm install

4. Build the project and start local development server.

$ yarn start
or if using npm:
$ npm run start

The development server can be accessed at http://localhost:3000

5. Build the project for production.

$ yarn build
or if using npm:
$ npm run build

6. Run Unit tests.

$ yarn test
or if using npm:
$ npm run test

Directory Structure

This project was bootstrapped with Create React App. The the structure of the project is set to follow the hierarchy:

App <- Pages <- Blocks <- Components.

The project doesn't make use of any css frameworks, just the simple resets. The rest of the folders and files only exist to make your life easier, and should not need to be changed.

Below you can find full details about significant files and folders.

.
├── public                                // All public static assets go here.
├── src                                   // All source code go here.
│   ├── __mocks__                         // Jest mocks
│   ├── api                               // Api integration
│   │   ├── __tests__                     // API tests
│   │   ├── index.tsx                     // API custom react-hooks, methods and state management
│   │   └── types.ts                      // Types for api methods 
│   ├── blocks                            // All blocks are here
│   │   └── Header                        // Block directory
│   │       ├── Header.spec.tsx           // Block specs and tests
│   │       ├── index.tsx                 // Block component
│   │       └── styles.tsx                // Block styles and styled-components
│   ├── components                        // All components live here
│   │   ├── Container                     // Component directory
│   │   │   ├── index.tsx           	  // Component logic and exports
│   │   │   └── styles.tsx                // Component styles and styled-components
│   ├── constants                         // All app constants can be found here
│   ├── layouts                           // Reusage layout templates are here
│   ├── pages                             // All pages live here
│   │   └── Home                          // Page directory
│   │       ├── index.tsx                 // Page component definition
│   │       └── styles.tsx                // Page styles
│   ├── routes                            // Apllication routes
│   ├── theme                             // Application theme and design system lives here
│   │   ├── global.ts                     // Global css styles and resets
│   │   └── index.ts                      // App default theme 
│   ├── typings                           // Global typescript type definitions
│   └── utils                             // Resuable methods and utility functions 
│       ├── __tests__                     // Tests for common utils
│       ├── index.ts                      // Common utility methods
│       └── test-utils.js                 // Jest and react-testing library setup and utilities
│   ├── App.tsx                           // Appilcation component
│   ├── index.tsx                         // main entry file
│   ├── setupTests.ts                     // Jest testing setup config
├── .editorconfig                         // Editor configuration
├── .env-sample                           // Environment variables
├── .eslintignore                         // Ignored eslint files and folders
├── .eslintrc.json                        // Eslint config
├── react-app-env.d.ts                              
├── tsconfig.json                         // Typescript config
└── yarn.lock

Version Control

This project is git version controlled along with Conventional Commits specification for adding human and machine readable meaning to commit messages.

Reference

<type>(<scope>): <short summary>
  │       │             │
  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
  │       │
  │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
  │                          elements|forms|http|language-service|localize|platform-browser|
  │                          platform-browser-dynamic|platform-server|platform-webworker|
  │                          platform-webworker-dynamic|router|service-worker|upgrade|zone.js|
  │                          packaging|changelog|dev-infra|docs-infra|migrations|ngcc|ve
  │
  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test

NPM scripts dictionary

yarn start: Start local development server.
yarn build: Creates a production build.
yarn test: Runs unit tests.
yarn test:watch: Runs unit tests in watch/development mode.
yarn type-check: Runs typescript type checking.
yarn test-all: Runs linting, type checks and unit tests.
yarn lint: Runs eslint.
yarn format: Runs Prettier in 'write' mode to fix code styling.
yarn tscov: Runs typescript types coverage report.
yarn release: Runs standard-version to bump version, and generate changelogs.