Skip to content

Latest commit

 

History

History
60 lines (50 loc) · 2.99 KB

README.md

File metadata and controls

60 lines (50 loc) · 2.99 KB
Raw

CapitalWeather app

⛈️ Example of a simple app written in Vite, TypeScript and React, which uses data from a GraphQL API and a REST API.

Starting the dev server

  • Clone this repository
  • Enter the project's root directory (default: cd ./capital-weather)
  • Run npm install to install dependencies
  • Get an OpenWeather API key (sign up page)
  • Set up your .env.local file from the sample file:
    • mv .env.local.example .env.local
  • Copy your new OpenWeather API key in your .env.local file
  • Run npm run start
  • Navigate to http://localhost:5173

Running the test suite

  • Run npm run test

Overview of the project

This project is a simple Single Page Application developed using a sample of popular technologies used in modern-day web development:

  • Vite – a fast ECMAScript compiler/hot module replacement client providing lazy loading of modules, tree-shaking and code splitting
  • TypeScript – a superset of ECMAScript with syntax for types
  • React – the current bleeding edge library for front-end development
  • Apollo – popular GraphQL client
  • Tanstack-Query – popular querying library
  • React-Router v7 – popular client-side routing library
  • Tailwind – collection of utility CSS classes used to make the development of front-end technologies massively more convenient
  • DaisyUI – UI components built on top of Tailwind, with a focus on responsiveness and ergonomics

Other libraries used

  • Vitest – the testing companion to Vite. Excellent test runner which closely mirrors the configuration of the main Vite app
  • React Testing Library – the most popular React testing library
  • nock – Good library for network-level mocking and expectations

Overall architecture

This project is a SPA which renders a simple layout on the client side, depending on the user's device viewport.

Mobile devices will see a hamburger menu which, when clicked, will open a drawer on the left side of the screen. The drawer contains a list of country, which is also searchable via the search box at the top.

Devices having a wider viewport will see a 2-column layout. On the left side of the screen, the user will see a list of countries fetched from the Countries API.

Clicking one of the countries will display a card with country-specific information on the right side, including the name of the capital city, the coordinates (latitude and longitude), and the weather in the country's capital.

Next steps

  • Enhance the testing layer using the MSW network testing framework
  • Improve the loading and error states
  • Increase the quantity of information displayed in the country's card