City Weather App

This is a simple Web Application for looking up the weather conditions for various locations around the world and adding them to a favorites list. It's built using React with Typescript.

Features

Real-time weather information using the Openweather API.
When users first the app asks the user for permission to get their current location and opens the details page for their city after they grant it.
Displays a list of the 15 largest cities in the world by population in alphabetical order with the current temperature for each.
Users can remove cities from the list.
Clicking on a city opens a page with more weather information and a textarea field for notes.
Notes Section
Users can search for weather details for other cities.
Users can add/remove cities as “favorites”, which appear at the top of the list on the home screen.
Basic functionality is retained offline, with the most up-to-date information cached and persisted in local storage.

Installation, Running and Testing

Prerequisites

Navigate to the project root and replace the values in the .env file with your keys.

Running in Development

Navigate to the root of the project directory and run npm install to install the project dependencies.
Run npm start. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Testing

I extended the app's testing to cover the full functionality and layout of the app based on the requirements, using Cypress. There are two modes to run the tests:

Open Mode

This launches the tests in Video mode, to see the UI interactions and console outputs as the tests run. Run npm test to launch this mode and select e2e tests and select your browser(Chrome is preferred) then proceed to the Cypress-controlled Browser environment. Select any of the spec files to run tests for that spec file.

Run Mode

This launches the tests in run mode in your console, and outputs the results of each spec file run on the console. Run npm test-all to launch this mode. All Tests will run one by one until every test in each spec file has been executed. Select any of the spec files to run tests for that spec file.

Folder Structure

📦 
├─ .env
├─ .gitignore
├─ README.md
├─ cypress.config.ts
├─ cypress
│  │   
│  ├─ e2e
│  │  ├─ 01-cities
│  │  │  └─ 01-citylist.cy.ts
│  │  ├─ 02-notes
│  │  │  └─ 02-notes.cy.ts
│  │  └─ 03-search
│  │     └─ 03-searchbar.cy.ts
│  ├─ fixtures
│  │  ├─ cities.json
│  │  ├─ profile.json
│  │  └─ users.json
│  ├─ support
│  │  ├─ commands.ts
│  │  └─ e2e.ts
|
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ manifest.json
│  └─ robots.txt
├─ src
│  ├─ App.css
│  ├─ App.test.tsx
│  ├─ App.tsx
│  ├─ assets
│  │  ├─ data
│  │  │  └─ cities.ts
│  │  ├─ images
│  │  │  ├─ BackgroundImage.jpeg
│  │  │  ├─ SunIcon.png
│  │  │  └─ WeatherBackground.jpeg
│  │  └─ screenshots
│  │     ├─ CityDetails.png
│  │     ├─ DefaultCities.png
│  │     ├─ FavoriteCities.png
│  │     ├─ Notes.png
│  │     ├─ SearchBar.png
│  │     └─ SpecFile.png
│  ├─ components
│  │  ├─ CityDetails
│  │  │  └─ CityDetails.tsx
│  │  ├─ CityList
│  │  │  └─ CityList.tsx
│  │  ├─ FavoritesList
│  │  │  └─ FavoritesList.tsx
│  │  ├─ Notes
│  │  │  ├─ NotesList.css
│  │  │  ├─ NotesList.tsx
│  │  │  ├─ cards
│  │  │  │  └─ NoteItemCard.tsx
│  │  │  └─ forms
│  │  │     ├─ create
│  │  │     │  ├─ CreateNoteForm.css
│  │  │     │  └─ CreateNoteForm.tsx
│  │  │     └─ edit
│  │  │        ├─ UpdateNoteForm.css
│  │  │        └─ UpdateNoteForm.tsx
│  │  ├─ SearchBar
│  │  │  ├─ SearchBar.tsx
│  │  │  └─ searchbar.css
│  │  ├─ UserCity
│  │  │  └─ UserCityDetails.tsx
│  │  └─ common
│  │     ├─ Cards
│  │     │  ├─ CityTempCard.tsx
│  │     │  └─ CityWeatherDetailsCard.tsx
│  │     ├─ CustomComponents
│  │     │  ├─ CreateUpdateButton.ts
│  │     │  ├─ DeleteButton.ts
│  │     │  └─ Spinner.ts
│  │     └─ Modals
│  │        ├─ Modal.css
│  │        └─ Modal.tsx
│  ├─ context
│  │  ├─ AppContext.ts
│  │  └─ ContextValues.ts
│  ├─ helpers
│  │  ├─ cities.ts
│  │  ├─ date.ts
│  │  ├─ favorites.ts
│  │  └─ notes.ts
│  ├─ hooks
│  │  ├─ useFetchCities.ts
│  │  └─ useUserLocation.ts
│  ├─ index.css
│  ├─ index.tsx
│  ├─ logo.svg
│  ├─ pages
│  │  ├─ CityDetailsPage.tsx
│  │  └─ Homepage.tsx
│  ├─ react-app-env.d.ts
│  ├─ reportWebVitals.ts
│  ├─ services
│  │  ├─ api.ts
│  │  ├─ getUserLocation.ts
│  │  └─ localStorage.ts
│  └─ types.ts
└─ tsconfig.json

Joseph-Mutua/city-weather-app