Welcome to MOSUM, a weather forecast website built using modern web development technologies! MOSUM allows users to access real-time weather data, track forecasts, and visualize temperatures with interactive charts. This project was designed as both a learning experience and a fully functional application for anyone to use.
MOSUM is a weather forecast website that provides up-to-date weather information for any city worldwide. Users can instantly see the current weather, a 5-day forecast, and dynamic charts displaying "feels like" temperatures. The website also supports features like search suggestions, saving favorite cities, and managing recent searches.
- Tanstack Query: For efficient data fetching, caching, and managing API requests.
- Shadcn & Tailwind CSS: For building a responsive, clean, and aesthetically pleasing frontend.
- Recharts: To render interactive and visually appealing temperature graphs.
- TypeScript: To ensure a type-safe and production-grade coding experience.
- Sonner: For handling notifications in the app.
- Date-fns: For formatting dates and times effectively.
- OpenWeather API: For providing real-time weather data and forecasts.
I developed MOSUM as part of my journey to deepen my understanding of React, TypeScript, and modern web development tools. The primary goal was to learn how React’s Virtual DOM works and how it efficiently updates the UI without performance degradation. By utilizing a modern tech stack, I also aimed to create an intuitive user experience while learning best practices for building scalable web apps.
- Real-Time Weather Data: Instantly retrieves the current weather for the user's location.
- City Search: Allows users to search for weather data for any city and provides a 5-day forecast.
- Dynamic Graphs: Visualizes actual temperature vs. "feels like" temperature using Recharts.
- Favorite Cities: Users can add cities to a favorites list for quick access.
- Recent Searches Management: View, clear, or access recent searches with timestamps.
- Autocomplete Search: Suggests cities with country matching as you type.
- Local Storage: Stores search history using a custom React hook and localStorage.
I’ve made sure that the website is fully responsive, ensuring an optimal experience on all screen sizes, whether on desktop, tablet, or mobile devices. The UI was designed using Shadcn and TailwindCSS, giving the project a modern and sleek look while maintaining performance. I also designed the MOSUM logo on Canva to add a personal touch to the project.
The project was entirely built in TypeScript to ensure type safety and to gain hands-on experience working with it in a production-grade environment. This approach helped eliminate potential bugs and provided a smooth development experience.
- Live Demo: MOSUM - Weather Forecast Website
Feel free to explore the project, test out the features, and share your feedback!
Check out how the website adapts seamlessly across all devices:
- Desktop
- Tablet
- Mobile
I’d love to hear your thoughts! If you have any suggestions or find any bugs, feel free to open an issue or submit a pull request.
#WebDevelopment #React #TypeScript #TailwindCSS #TanstackQuery #OpenWeatherAPI #FrontendDevelopment #Shadcn #LearningByDoing #FullstackDevelopment #TechStack #ResponsiveDesign
Thank you for visiting my project, and I hope you enjoy using MOSUM! 🌤️