# MallApp - Tech Stack Overview

## Overview

This project is a mobile app built with React Native using Expo, and it integrates several libraries and tools to enhance functionality, user experience, and state management. The app is designed to support multiple platforms, including Android, iOS, and Web.

## Tech Stack

### 1. **Expo**
   - **Version**: ~51.0.28
   - **Description**: Expo is a framework and platform for universal React applications. It provides a set of tools and libraries for building native iOS, Android, and Web apps with JavaScript and React. Expo abstracts away much of the native development, enabling faster development and cross-platform compatibility.

   - **Scripts**:
     - `start`: Starts the Expo development server.
     - `android`: Launches the app on an Android emulator or connected device.
     - `ios`: Launches the app on an iOS simulator or connected device.
     - `web`: Starts the web version of the app.

### 2. **React Native**
   - **Version**: 0.74.5
   - **Description**: React Native is a popular JavaScript framework for building native mobile apps using React. It allows developers to write native applications using JavaScript and React, sharing code between platforms (iOS, Android) and providing access to native device APIs.

### 3. **React**
   - **Version**: 18.2.0
   - **Description**: React is the core JavaScript library for building user interfaces. It allows you to build reusable components and manage the app's state and lifecycle. React is used here for both mobile and web versions of the app.

### 4. **React Navigation**
   - **Version**:
     - `@react-navigation/native`: 6.1.18
     - `@react-navigation/stack`: 6.4.1
   - **Description**: React Navigation is a routing and navigation library for React Native apps. It provides components and hooks for navigating between screens, including stack, tab, and drawer navigation.

### 5. **Redux & React-Redux**
   - **Version**:
     - `redux`: 5.0.1
     - `react-redux`: 9.1.2
   - **Description**: Redux is a state management library that helps to manage the global state of your app. React-Redux binds React with Redux to make the state accessible throughout the application. It's particularly useful for handling complex state changes in larger apps.

### 6. **Formik**
   - **Version**: 2.4.6
   - **Description**: Formik is a popular form library for React that simplifies form management, validation, and error handling. It helps in building user-friendly forms that are easy to validate and manage.

### 7. **Yup**
   - **Version**: 1.4.0
   - **Description**: Yup is a JavaScript schema builder for value parsing and validation. It is often used in combination with Formik for schema-based form validation.

### 8. **Axios**
   - **Version**: 1.7.7
   - **Description**: Axios is a promise-based HTTP client for making requests to external APIs. It is commonly used for fetching or sending data to a backend server.

### 9. **Expo Camera**
   - **Version**: 15.0.16
   - **Description**: Expo Camera provides an API to access the device's camera, allowing you to capture photos and videos in your app.

### 10. **React Native Gesture Handler**
   - **Version**: 2.20.0
   - **Description**: React Native Gesture Handler is used to manage gestures in React Native apps. It provides more customizable and performant touch gesture handling than the default React Native gesture system.

### 11. **React Native Keychain**
   - **Version**: 9.0.0
   - **Description**: React Native Keychain allows you to securely store sensitive information such as user credentials, tokens, and other secrets using the native keychain/keystore on iOS and Android.

### 12. **React Native OTP Input**
   - **Version**: 1.0.12
   - **Description**: This library provides a customizable OTP (One Time Password) input component, typically used in authentication processes for verifying user identity.

### 13. **SendGrid**
   - **Version**: 5.2.3
   - **Description**: SendGrid is an email API service used for sending emails programmatically. It is used for email notifications or user communication within the app.

### 14. **Expo Status Bar**
   - **Version**: ~1.12.1
   - **Description**: Expo Status Bar provides a simple way to manage the status bar on mobile devices, such as controlling the visibility, style, and background color.

## Development Tools

### 1. **Babel**
   - **Version**: ^7.20.0
   - **Description**: Babel is a JavaScript compiler used to transform ES6+ code into a backward-compatible version of JavaScript. It allows you to use the latest JavaScript features in your React Native app.

## How to Run the App

To run the app in development mode, you can use the following commands:

1. **Start the app in Expo**:
   ```
   npm start
   ```

2. **Run on Android**:
   ```
   npm run android
   ```

3. **Run on iOS**:
   ```
   npm run ios
   ```

4. **Run on Web**:
   ```
   npm run web
   ```

## Conclusion

This tech stack provides a solid foundation for building a modern, cross-platform mobile app with features like navigation, state management, form handling, and secure storage. The combination of React, React Native, Expo, and other libraries like Axios and Formik ensures a smooth development experience and high-quality user experiences across Android, iOS, and web platforms.