Mo Weather

?️ MO Weather React App

A modern and interactive Weather Application built with React.js that provides real-time weather data, multi-day forecasts, and rich weather-related content through a clean and user-friendly interface.

? Overview

MO Weather App allows users to:

Search for any city and view current weather and upcoming forecasts

Display detailed weather data: temperature, wind speed, condition, date, and day

Watch live weather-related camera streams from around the world

Browse a photo gallery representing different weather conditions

Read top weather-related news

Contact the site owner through a contact form

Handle invalid routes with a custom 404 page

? Components

Home – Main page with city search and weather display

News – Weather-related news (Static / Fake API)

LiveCameras – Live weather camera streams

Photos – Weather photo gallery

Contact – Contact form

NotFound – Custom 404 page

BasicCard – Reusable weather data card

Header & Footer – Main layout components

Loader – Enhances UX during data fetching

⚡ Features

Dynamic city search with real-time weather & forecasts

Detailed weather info display (temperature, wind, condition, date, city)

Smooth loading experience using a loader component

Active navigation highlighting using NavLink

Multiple content pages (News, Photos, Live Cameras, Contact)

Centralized state management using Context API

Scalable state architecture using Redux Toolkit

Fully responsive modern UI using Tailwind CSS & Material UI

?️ Tech Stack

Frontend

React.js

React Router (NavLink)

Tailwind CSS

Material UI

Context API

Redux Toolkit (Redux, Thunk, Middleware, Redux DevTools)

React Hooks (useState, useEffect, useContext, useRef)

API

WeatherAPI

(API calls isolated in a dedicated service file)

Deployment

Vercel

Version Control

Git & GitHub