Mausam is a web app that fetches the weather data for the next 6 days from the Metaweather API.
-
Where can you see my demo?
The demo is live at mausam.vercel.app.
-
What was my experience?
I took up this project as an opportunity to learn Typescript and TailwindCSS, as well as fetching data from APIs. I was completely new to all these technologies and I truly learnt a lot about them while working on this project.
-
What have I learned/improved?
I have learnt refactoring my code better so that it's cleaner and easier to manage and debug. I also learnt about custom hooks in React and how they can be used to fetch data.
-
What would I do differently in hindsight?
I realised about halfway into the project that using Next.js would have saved me a lot of time, especially while dealing with CORS issues with the Metaweather API. Oh well, I guess I'll use it in my Next project (sorry).
-
Total time spent: Approximately 31 hours over 5 days.
This application was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
The features I implemented are as follows:
- Request for your current location's forecast.
- Request for the forecast of any city.
- Forecast contains today and the next 5 days' weather, along with today's highlights about the wind, humidity, visibility and air pressure.
- Switch between the units of measurement for all entities in Settings.
- Location autocomplete when the user searches for their city, using the OpenStreetMap API.
To clone and run this application, 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/ananyalohani/mausam.git
# Install dependencies
$ npm install
# Run the app
$ npm start- SWR
- Material-UI
- React Icons
- Geolocation API
- Weather Forecast illustrations provided by DevChallenges.
- Website: ananyalohani.me
- GitHub: @ananyalohani
- Email: contact@ananyalohani.me