Directory Structure of our Weather App

We’ll organize the app files for better readability and scalability. Inside src, create two folders:

mkdir src/components

mkdir src/api

Your final structure should look like this:

src/

├── api/

│   └── WeatherService.js       # Weather API logic

├── components/

│   ├── SearchBar.js            # Input + Search button

│   ├── WeatherCard.js          # Displays weather info

│   └── TimeDisplay.js          # Live clock

├── App.js                      # Main app component

├── App.css                     # Global styling

└── index.js                    # Entry point