Challenge: Create a weather app using an API. Use Front-end libraries like React or Vue. Don’t look at the existing solution. Fulfill user stories below:
- User story: I can see city weather as default, preferably my current location
- User story: I can search for city
- User story: I can see weather of today and the next 5 days
- User story: I can see the date and location of the weather
- User story: I can see according to image for each type of weather
- User story: I can see the min and max degree each day
- User story: I can see wind status and wind direction
- User story: I can see humidity percentage
- User story: I can see a visibility indicator
- User story: I can see the air pressure number
- User story(optional): I can request my current location weather
- User story(optional): I can convert temperature in Celsius to Fahrenheit and vice versa
- React
- TypeScript
- Astro
- Sass
- BEM
- clsx
- zod
- zustand
- @hrc/button
- @hrc/input
- @hrc/material-icons
- @hrc/spinner
- react-loading-skeleton
- fontsource
- @material-design-icons/font
- Weather API
- Open-Meteo Weather Forecast API
- Loading spinner for Search Drawer
- Skeleton loaders
- More icons
- Error handling for external API's and Geolocation API
- Backend API's with Astro
- Retrieve current location with Geolocation API
- Geolocation API can only be used in a secure context (HTTPS)
- Compound components for a better code structure
- Create API's as middleware for secure requests to external API's
To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges
# install all workspace dependencies
cd dev-challenges && pnpm install
# Run weather-app in dev-mode
cd legacy/weather-app
pnpm run dev