Skip to content

Latest commit

 

History

History
130 lines (99 loc) · 5.66 KB

README.md

File metadata and controls

130 lines (99 loc) · 5.66 KB
Raw

Weather App

This is the repository for the Weather application.

📷 Screenshots

Weather App Login Weather App Locations Weather App Create Location Weather App Location Details

🛠️ Technologies Used

  • React Native: A framework for building native apps using React, enabling a rich mobile experience.
  • Expo: A framework and platform for universal React applications, streamlining development and deployment.
  • TypeScript: A superset of JavaScript that adds static typing, improving code quality and maintainability.
  • Redux: A predictable state container for JavaScript apps, facilitating the management of application state across components.
  • React Navigation: A library for routing and navigation in React Native apps, enabling seamless transitions between screens.
  • React Hook Form: A library for managing form state and validation, allowing for easy integration of form controls and enhancing performance by reducing re-renders.
  • Yup: A JavaScript schema builder for validating and parsing user input, used in conjunction with React Hook Form to ensure data integrity and provide user-friendly error messages.
  • Styled Components: A library for styling React components with tagged template literals, enhancing the visual presentation of the app.
  • React Native MMKV: A fast key-value storage library for React Native, used for persisting data locally.
  • i18next: A powerful internationalization framework for JavaScript, enabling multilingual support in the application.
  • Jest: A JavaScript testing framework for unit testing, ensuring code quality and reliability.

⚙️ Features

  • Data Fetching: Fetch and display live weather data from an external API, providing users with up-to-date information.
  • State Management: Use Redux and Redux Toolkit for efficient state management, with React Native MMKV providing fast and persistent local storage.
  • Dynamic Routing: Implement React Navigation to create a smooth and intuitive navigation experience across the app’s screens.
  • Form Validation: Combine React Hook Form with Yup for robust form validation, ensuring that user inputs are properly validated, enhancing user experience and data integrity.
  • Persistent Storage: Store user preferences and application data locally using React Native MMKV for quick access and offline support.
  • Multilingual Support: Implement i18next to provide support for multiple languages, automatically selecting the language based on the user's location, making the app more accessible to a global audience.
  • Animation Effects: Leverage React Native Reanimated for smooth transitions and animations, enhancing the overall user interface.
  • Unit Testing: Ensure code quality with unit tests using Jest and React Native Testing Library, verifying component functionality and behavior.

📦 Project Structure

src/
├── @types/              # TypeScript type definitions
├── assets/              # Static files like images, fonts, etc.
├── components/          # Reusable components across the application
├── domain/              # Domain logic and entities of the application
├── enums/               # Enum definitions used in the project
├── features/            # Redux reducers, organized by module
├── hooks/               # Custom hooks for reusable logic
├── lib/                 # External libraries and configurations
├── mock/                # Mock data for testing and development
├── query/               # API request functions
├── routes/              # Navigation route definitions
├── schemas/             # Form validation schemas
├── screens/             # Main screens of the application
├── services/            # Service functions related to APIs and other integrations
├── storage/             # Persistent storage configurations
├── store/               # State management
├── theme/               # Application styles and themes
└── utils/               # Utility functions and helpers

📚 Documentation

Installation

To run the project locally, follow the steps below:

  1. Clone the project:
git clone https://github.com/enzoodev/weather-app.git
  1. Install dependencies:
yarn install
# or
npm install
  1. Configure json-server for API mocking:
  • Specify your private IP and desired port in the .env file.
  • Update the server script in package.json with your private IP and chosen port.
  1. Start the API server:
  • Open a terminal and run.
yarn server
# or
npm run server
  1. Start the development server:
  • Open other terminal and run.
yarn start
# or
npm run start
  1. Run on iOS:
  • Open other terminal and run.
yarn ios
# or
npm run ios
  1. Run Android:
  • Open other terminal and run.
yarn android
# or
npm run android

📝 Observations

The original testing requirements specified the use of MirageJS for mocking the API. However, MirageJS caused issues when running the app on both Android and iOS platforms. As a result, I opted to use json-server for API mocking to streamline the development process without compromising functionality.

Authentication (Mock): The application implements mock authentication, allowing users to log in with any valid email and any password. This is intended for testing purposes only.