WORK IN PROGRESS!!!
This is a solution to the Weather app challenge on devchallenges.io.
- 💅 Styled components
React hooks (useState , useEffect)
- Api requests with axios
- GitHub action for automatically deploying the project to GitHub pages.
- Testing with Jest and Cypress
-
Styled components
- css color variables (themes) https://styled-components.com/docs/advanced#theming
- global styles https://scalablecss.com/styled-components-global-styles/
- styled-normalize https://github.com/sergeysova/styled-normalize
-
react-icons
- library with icons https://react-icons.github.io/react-icons
- npm https://www.npmjs.com/package/react-icons
-
toLocaleString() to define current date
-
Dealing with long word in text box:
- https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/
- Location text can be long, so I added width in % to textbox and overflow-wrap: break-word;
-
User Location
- We can find user location by Geolocation API and IP address.
- On Weather Info we find location by IP address, but on find current location button we will use Geo API
- https://blog.logrocket.com/detect-location-and-local-timezone-of-users-in-javascript-3d9523c011b9/
- https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
-
Weather API
-
How to save API key secretly
- https://www.twilio.com/blog/2017/08/working-with-environment-variables-in-node-js.html
- https://www.npmjs.com/package/dotenv
- But with create react app it's easy https://create-react-app.dev/docs/adding-custom-environment-variables/
- https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env