A mini weather app created with Create React App, Typescript, React Hooks, and the Weatherbit rapidAPI.
Getting started
🌦️ Clone repo in teminal: git clone https://github.com/dani-boo/weather-app.git
🌦️ Change directory with cd weather-app
🌦️ Run yarn to install dependencies
NB: You need an API key from weatherbit - subscribe here.
Once you've generated that, you'll need to create a .env file in the root of the project, and add your API key like so:
REACT_APP_WEATHER_API_KEY=${insert-your-shiny-new-key-here} (double quotation marks preferred, eg: REACT_APP_WEATHER_API_KEY="notARealKeyItNeedsNumbers")
yarn start
runs the "app" in dev mode.
Open http://localhost:3000 to view it in your browser.
yarn test
launches the test runner in interactive watch mode.
Unfortunately jest has idiosyncracies re. coverage if nothing test-wise has changed between commits: you'll need to run yarn test --coverage --watchAll=false to see 100% code coverage in the terminal.
yarn test --coverage will still generate a coverage report in the project's root directory: coverage/lcov-report
(reveal in finder to open coverage index.html files)
THE TASK (in a nutshell):
Build a 2-page app that receives data from the weatherbit API. Page 1 shows current weather for one of 5 major locations. Page 2 shows the 16 day forecast for those same cities, and also has the option to filter data according to min and max temperatures.
Requirements:
✔️ Use React and TypeScript
✔️ Focus on architecture, code quality, security and test coverage
✔️ Responsive
Considerations:
This was a deep dive into React functional components, hooks, and TypeScript. Challenging and thoroughly enjoyable for someone who has to use React JS class components with MobX at work daily.
Room for improvement (stretch goals due to time constraints):
⭐ Refactor by moving all helper functions into utils
⭐ Remove all any types (I think there are 2) and create types files, not just floating interface modules
⭐ Capture performance metrics and improve
⭐ Make provision for all "unhappy" paths
⭐ Design and implement proper UI