WeatherApp

Conventions

I used React Native, TypeScript, OpenWeatherAPI.
Variable and function names use camelCase.
Component names are in PascalCase.

Architecture

It follows a simple architecture with key components:

Screens: It handles data fetching, location access, and rendering the UI.
Styles: A separate module containing styling definitions for the components. It enhances code readability and maintainability.
Assets: Contains images and icons used in the application, organized based on weather conditions.
AsyncStorage: Used for storing weather data locally when there is no internet connection.
Hooks: Custom hooks for the Weather App
Utils: Custom Utils for dates abd Weather
Types: Type definitions

General Considerations

The API key is stored as an environment variable for security.
It checks for internet connectivity using the NetInfo library and retrieves data from local storage when offline.
Location permission is requested using the Expo Location library to get the user's coordinates for weather data retrieval.
Weather conditions are categorized, and appropriate background images and icons are displayed based on the weather condition.
Temperature units are displayed in Celsius (°C).
The application handles errors and provides feedback to the user.

Third-Party Dependencies

The Weather App relies on the following third-party libraries and dependencies:

React: The core library for building the user interface.
React Native: A framework for building native mobile apps using React.
@react-native-community/netinfo: Allows checking the device's internet connectivity status.
@react-native-async-storage/async-storage: Provides an asynchronous storage system for storing weather data locally.
@react-native-community/geolocation: Enables access to device location information.
OpenWeatherMap API: Used for fetching weather data based on the user's location.

How to Build the Project

To build and run the Weather App project, follow these steps:

Clone the project repository.
Install the project dependencies by running:
```
npm install
```
Use your API key on REACT_WEATHER_KEY in .env.example ad rename it to .env. The url for REACT_BASE_URL is already there.
Run the app on the device by executing:
```
npm start
```
Follow the instructions in the terminal to open the app on your device or simulator.

Additional Notes

The application uses React hooks like useState and useEffect for state management and side effects.
It includes error handling using try...catch blocks to log errors.
The application includes a responsive design that adapts to different screen sizes.
Forecast data is displayed for the next five days.
Location access is requested explicitly to ensure proper functionality.
Weather data is stored locally using AsyncStorage to improve user experience when offline.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

For iOS

# using npm
npm run ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

hanielchids/TSWeatherApp