Solution for a challenge from daba front end advanced coding exercise.
- Plase note, in order for this web application to work properly live online or locally on your computer you will need to access it on Google chrome web browser preferrably and install this extension found here this is to prevent failure when data is being fetched due to CORS error from the metaweather api which was used. The other fix asides this requires resources which I currently do not have.
-
The Demo video for this project can be found here. Also a video explaining my deployment process for deploying this web application live online as well as the challenges faced in that process can be found here
-
My experience building this was quite exciting as I had the opportunity to flex my love for Redux as this helped me with managing the state of this application effectively during the various data fetching procedures.
- Next.js
- React
- Redux
- TailwindCSS
- TailwindCSS
- metaweather api
- Vercel for deployment
Some of the features I developed are?
- User can see a city weather as default.
- User can search for city
- User can see weather of today and the next 5 days
- User can see the date and location of the weather
- User can see according to image for each type of weather
- User can see the min and max degree each day
- User can see wind status and wind direction
- User can see humidity percentage
- User can see a visibility indicator
- User can see the air pressure number
- User can convert temperature in Celcius to Fahrenheit and vice versa
To clone and run this application locally, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone https://github.com/elminhoemmanuel/mayweather.git
# Install dependencies
$ npm install
# Run the app
$ npm run dev