This project is bootstrapped with Create React App with TypeScript.
Styling is done using Semantic UI and custom CSS. I used Semantic UI because it is highly customizable and I wanted to display my component building skills.
I used Recharts to display bar chart due to its simple nature.
I have also used redux and redux-thunk for state management.
You can find the version deployed on Netlify here. It is built and deployed automatically every time you make a commit.
There are 8 components in this App with App.tsx being the main one.
List of weather details are rendered in WeatherList.tsx and an individual item in WeatherCard.tsx.
Temperature type can be changed from TempType.tsx.
The bar chart is displayed in TempChart.tsx. You can see error and loading status in Error.tsx and Loader.tsx respectively.
- Interfaces are preceded with
I - Enums are preceded with
E - Types are preceded with
T - Components are named in TitleCase and function are named camelCase.
In the project directory, you can run:
yarn start
Runs the app in the development mode.
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.
yarn test
Launches the test runner in the interactive watch mode. Testing is done using react-test-renderer