UPS Clone React Native App

This is a clone of the UPS (United Parcel Service) app built using React Native. It provides a user interface similar to the original UPS app, allowing users to track packages, view delivery details, and manage their shipments.

Prerequisites

Before running this app, ensure that you have the following dependencies installed:

• Node.js
• NPM (Node Package Manager)
• Expo CLI (Command Line Interface)

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/your-username/ups-clone.git

2. Change into the project directory:

   cd ups-clone

3. Install the required dependencies using NPM:

   npm install

Running the App

To start the app, use the following commands:

1. Change into the stepzen directory:

   cd stepzen

2. Start the StepZen GraphQL server:

   stepzen start

   This will start the StepZen server and provide a GraphQL API for the app to consume.

3. In a separate terminal, go back to the project root directory:

   cd ..

4. Start the Expo development server:

   expo start

   This will open the Expo DevTools in your default browser.

5. In the Expo DevTools, you have multiple options to run the app:

   • Run on Android emulator: Select "Run on Android device/emulator" or press "a" in the terminal to launch the app on an Android emulator.
   • Run on iOS simulator: Select "Run on iOS simulator" or press "i" in the terminal to launch the app on the iOS simulator.
   • Scan the QR code with the Expo Go app: Install the Expo Go app on your Android or iOS device, scan the QR code shown in the Expo DevTools, and wait for the app to load.

   Ensure that your mobile device/emulator is connected to the same network as your development machine.

Customizing Tailwind CSS

This project utilizes Tailwind CSS for styling. If you need to make changes to the Tailwind configuration, you can follow these steps:

1. Open the tailwind.config.js file located in the project root directory.

2. Modify the configuration according to your needs. You can change colors, fonts, spacing, breakpoints, and more.

3. Save the file and run the following command to generate the updated CSS:

   npm run tailwind:dev

   This command will process the Tailwind CSS classes and generate the updated CSS file used in the app.

Screenshoots:

Customers Screen

Orders Screen