Skip to content

RohitSah04/Weather-app

Repository files navigation

WeatherCast

React TypeScript Vercel

📌 Overview

WeatherCast is a modern weather forecasting web application built with React and TypeScript. It provides users with accurate, up-to-date weather information in a clean and intuitive interface.

🔗 Live Demo: WeatherCast App

✨ Features

  • Real-time Weather Data: Get current weather conditions for any location
  • Detailed Forecasts: View hourly and daily weather forecasts
  • Location Search: Find weather information for any city worldwide
  • Responsive Design: Optimized for both desktop and mobile devices
  • Interactive UI: User-friendly interface with intuitive controls
  • TypeScript Integration: Type-safe code for better development experience

🖼️ Screenshots

Screenshot placeholder - Consider adding actual screenshots of your application here

🛠️ Technologies Used

  • Frontend: React, TypeScript
  • Styling: CSS/SCSS (or other styling libraries you might be using)
  • API: Weather data provider (OpenWeatherMap/WeatherAPI/etc.)
  • Deployment: Vercel

🚀 Installation and Setup

Prerequisites

  • Node.js (v14.0.0 or later)
  • npm (v6.0.0 or later) or yarn (v1.22.0 or later)

Local Development Setup

  1. Clone the repository
git clone https://github.com/yourusername/weathercast.git
cd weathercast
  1. Install dependencies
npm install
# or
yarn install
  1. Set up environment variables

Create a .env file in the root directory and add your API keys:

REACT_APP_WEATHER_API_KEY=your_weather_api_key
  1. Start the development server
npm start
# or
yarn start
  1. Open your browser

The application will be available at http://localhost:3000

🏗️ Building for Production

npm run build
# or
yarn build

This will create an optimized production build in the build folder.

📂 Project Structure

weathercast/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   ├── hooks/
│   ├── pages/
│   ├── services/
│   ├── types/
│   ├── utils/
│   ├── App.tsx
│   └── index.tsx
├── .env
├── tsconfig.json
├── package.json
└── README.md

🔍 API Integration

WeatherCast uses [Weather API Provider Name] to fetch weather data. To use this application, you'll need to register for an API key at [Provider's website] and add it to your environment variables.

🧪 Testing

npm test
# or
yarn test

📱 Responsive Design

WeatherCast is designed to work seamlessly across all device sizes:

  • Desktop
  • Tablet
  • Mobile

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👏 Acknowledgements

  • [Weather API Provider]
  • [Any other libraries or resources you used]

Made with ❤️ by Somesh

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published