Welcome to the Windrunner App, my first project built with Next.js and TailwindCSS. This application is designed to provide a simple yet effective way to check the weather for any city around the world. It's a testament to my journey into the world of modern web development, showcasing my exploration of the Next.js framework, TailwindCSS for styling, and the power of React Query for state management.
The Windrunner App is deployed on two platforms for redundancy and ease of access:
- Vercel: https://windrunner.vercel.app/
- Netlify: https://windrunner.netlify.app/
Feel free to use either link to access the application.
- City Search: Type in the name of any city, and the app will fetch and display the current weather conditions for that location.
- Location-Based Weather Check: For a more personalized experience, you can check the weather for your current location by clicking a specific button.
- Validation: The app includes validation to ensure that the city name entered exists. If it doesn't, the app will prompt you to enter a valid city name.
- Responsive Design: The application is fully responsive, ensuring a seamless experience across all devices.
- 5-Day Forecast: In addition to today's weather, the app provides a 5-day forecast for the selected city, giving you a glimpse into the upcoming weather conditions.
- Next.js: A React framework that enables features like server-side rendering and static site generation.
- TailwindCSS: A utility-first CSS framework for rapidly building custom designs.
- React Query: A library for fetching, caching, and updating data in React applications.
- Axios: A promise-based HTTP client for making API requests.
- Prettier: An opinionated code formatter to ensure consistent code style.
- TypeScript: A statically typed superset of JavaScript that adds optional types to the language.
To get started with this project, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory.
- Run
npm installto install all the necessary dependencies. - Start the development server by running
npm run dev.
This project marks my first dive into the Next.js ecosystem and my initial foray into TailwindCSS. The process of building this application has been incredibly rewarding, and I've gained a deeper appreciation for the power and flexibility of these technologies. I'm excited to continue exploring and expanding my skills in web development.