🌈 Weather App

Watch the Weather App Demo on Loom

I crafted this dynamic Weather App leveraging the prowess of Next.js, React, Tailwind CSS, and TypeScript. A special shout out to freecodecamp and @reactwithutkarsh for their invaluable resources that guided my journey.

🚀 Live Demo

🌟 Project Highlights

Hi there! 👋 I recently embarked on a journey to refine my skills in Next.js, Tailwind CSS, and TypeScript by developing a dynamic weather application utilizing the Open Weather API. This app is capable of displaying weather and forecasts for any searched city or the current location, thanks to the navigator's geolocation object.

The UI is crafted for simplicity and ease of use, streamlined by Next.js and styled swiftly with Tailwind CSS's utility-first approach. For state management, Jotai's minimalistic yet powerful atoms come into play, ensuring component-specific updates for an efficient rendering process. Moreover, React Query enhances the experience by managing data fetching, caching, and synchronization seamlessly.

Why Jotai? Jotai addresses React's extra re-render issues with a bottom-up approach inspired by Recoil. It simplifies state management by allowing atoms to derive and update each other, avoiding the complexity and overhead of multiple contexts or the need for memoization. Jotai stands out for its simplicity, offering a flexible solution to build complex state models with minimal API.

🛠️ Built With

• Next.js
• React
• Tailwind CSS
• TypeScript
• React Query
• Jotai

📸 Screenshots

💡 Features

• Weather search by city
• Current location weather and forecast
• Responsive design for all devices
• Skeleton loading state for a modern UX
• Deployed on Vercel for high availability

🚀 Deployment

This app is deployed on Vercel, ensuring optimal performance and scalability. Deploying on Vercel is straightforward, with environment variables securely managed and instantly applied across different stages (development, preview, and production).

📚 Learning Outcomes

• Next.js and SSR: Leveraging server-side rendering for faster page loads and SEO benefits.
• Tailwind CSS: Utilizing utility-first CSS for rapid UI development.
• State Management with Jotai: Simplifying state logic with atom-based management, reducing unnecessary re-renders.
• Data Fetching with React Query: Efficiently managing and caching API requests.

🙏 Acknowledgments

This project was inspired and guided by the resources from freecodecamp and the tutorials by @reactwithutkarsh.