Weather SPA

A modern Single Page Application (SPA) for tracking weather in selected cities, built with React, TypeScript, Redux Toolkit, and OpenWeatherMap API.

Features

• City Cards:
  • Show brief weather info for each city (temperature, description, icon, etc.)
  • Update weather for a city with a button
  • Remove city from the list
  • Click card to view detailed info
• Add/Remove Cities:
  • Add new cities via autocomplete form (with OpenWeatherMap Geocoding API)
  • Fetch and display weather instantly
• Details Page:
  • Shows detailed weather info for the city
  • Displays a temperature chart (hourly forecast)
• Persistence:
  • Cities list is saved in LocalStorage
  • On reload, cities are restored and weather is refreshed
• Responsive Design:
  • Works on desktop and mobile
• Testing:
  • Main components covered by Jest and React Testing Library
• Code Quality:
  • ESLint and Prettier configured

Technologies Used

• React (with functional components and hooks)
• TypeScript
• Redux Toolkit (with Redux Thunk for async logic)
• React Router (for navigation)
• Material UI (for UI elements)
• OpenWeatherMap API (for weather and geocoding)
• Jest & React Testing Library (for tests)
• ESLint & Prettier (for code style)

Project Structure

weather-spa/
├── public/                # Static assets
├── src/
│   ├── components/        # Reusable UI components
│   │   └── __tests__/     # Component tests
│   ├── pages/             # Page components (HomePage, CityDetailsPage)
│   │   └── __tests__/     # Page tests
│   ├── store/             # Redux slices and store setup
│   ├── utils/             # API utilities
│   ├── types/             # TypeScript types
│   ├── features/          # (Reserved for larger features)
│   ├── App.tsx            # Main app component
│   ├── index.tsx          # Entry point
│   └── ...
├── package.json           # Project metadata and scripts
├── jest.config.js         # Jest configuration
├── babel.config.js        # Babel configuration
├── .eslintrc.json         # ESLint configuration
├── .prettierrc            # Prettier configuration
└── README.md              # Project documentation

Setup & Usage

1. Install dependencies:

   npm install
   

2. Set up OpenWeatherMap API key:

   • Create a .env file in the root:

     REACT_APP_OPENWEATHER_API_KEY=your_api_key_here
     

3. Run the app:

   npm start
   

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

4. Run tests:

   npm test
   

5. Build for production:

   npm run build
   

Possible Improvements

• Add SCSS modules for better style isolation
• Improve mobile responsiveness
• Add more tests (reducers, utils, edge cases)
• Enhance error handling and loading states
• Deploy to Vercel/Netlify
• Add CI/CD (e.g., GitHub Actions)

License

MIT