Weather Widget is a basic and simple web application that displays weather for six locations using mock data from weatherData.ts. It's built with React, TypeScript, SCSS and Vite. The application is designed with responsiveness in mind, ensuring that the layout and components adapt seamlessly to different screen sizes and orientations, providing an optimal user experience on a variety of devices, including desktops, laptops, tablets and smartphones. There are three versions of the App.tsx and WeatherCard.tsx files, showcasing different design patterns. In this repo you will find two more branches: with-compound-v1, with-compound-v2.
In this version, the WeatherCard component receives a cityWeather prop and directly utilizes sub-components like City, WeatherIcon, WeatherName, and Temperature.
In this version the WeatherCard component accepts a weather prop and children components. In the App component, child components are included as children of the WeatherCard component.
In this version the WeatherCard component accepts a weather prop and children components. In the App component, a single WeatherCardContent child component is included as children of the WeatherCard component.
Experience the Weather Widget App in action by visiting the live demo:
To set up the Weather Widget App locally, follow these steps:
git clone https://github.com/obrm/weather-widget.git
- Navigate to the project directory:
cd weather-widget
- Install the required dependencies:
npm install
- Start the development server:
npm run dev
The application should now be running at http://localhost:5173.
To use the Weather Widget App, simply open it in your browser. The application will display the weather for six locations, with data sourced from the weatherData.ts file.
The app is responsive, providing a seamless experience on both desktop and mobile devices. Resize your browser window to see the layout adapt to different screen sizes.
For any questions, concerns, or support, feel free to reach me out via email: obrm770@gmail.com.