UPS-App with REACT NATIVE

This is a delivery tracking app using React-Native for iOS & Android. This is scenerio based build and the JSON data is already given, the GraphQL interface backend of StepZen is directly connected to the Firebase Realtime database and implemented for the app. Tailwind CSS is used for the UI and React Native Elements to style the UI. Custom React Hooks has been also implemented and it has nested navigation to navigate between screens including Nested and Tab Navigators. TypeScript is used with React-Native.

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

📷 Screenshots

📹 Demo

🔴 Install the Expo Go app on your device and scan the code below (live demo)

or Enter the below URL manually

exp://exp.host/@priyanshu_pandey/ups-clone?release-channel=default

👾 Tech Stack

Client

• Typescript
• Expo
• React Native
• tailwind-rn

Database

• Firebase

Graphql

• StepZen

🧰 Getting Started

‼️ Prerequisites

• Sign up for a Firebase account HERE
• Sign up for a StepZen account HERE
• Install Node JS in your computer HERE

⚙️ Installation

Install my-project with expo

Installing Expo CLI

npm install --global expo-cli

Initializing the project

npx create-expo-app --template my-app

cd my-app

Install dependencies

---

Setup Tailwind CSS

Install

npm install tailwind-rn

Run the following command to automatically add tailwind-rn to your React Native project:

npx setup-tailwind-rn

Import TailwindProvider and tailwind.json in the root of app (App.tsx)

import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";

Wrap the root of your app into TailwindProvider

// @ts-ignore -TailwindProvider is missing a type defination
<TailwindProvider utilities={utilities}>
  <MyComponent />
</TailwindProvider>

update tailwind.config.js file

module.exports = {
  content: ["./**/*.tsx"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};

useTailwind

import { useTailwind } from "tailwind-rn";

const MyComponent = () => {
  const tw = useTailwind();

  return <Text style={tw("text-blue-600")}>Hello world</Text>;
};

Build Tailwind styles in watch mode.

npm run dev:tailwind

---

Setting Up StepZen

Create an account

• Sign up for a StepZen account HERE

Running StepZen

Install the CLI

npm install -g stepzen

After installing the CLI, you can connect it to your account.

Start by logging in using the following command:

stepzen login

You'll see a series of command prompts asking for your StepZen account name and admin key:

What is your account name?: {ACCOUNT}
What is your admin key?: {ADMINKEY}

Your Admin Key and API Key**

When you get your account, log in to StepZen and navigate to the StepZen dashboard, where you will find your account name, and the two keys you need for API authentication:

stepzen init

Initialize a StepZen workspace in the current directory.

stepzen init

curl

curl <<firebase_realtime_database/customers file link>>

GET requests

Auto-generate your schemas and resolvers using the following StepZen CLI command:

Order

stepzen import curl <<firebase_realtime_database/orders.json file link>> --query-type Order --query-name getOrders --name orders

Customer

stepzen import curl <<firebase_realtime_database/customer.json file link>> --query-type Customer --query-name getCustomer --name customer

Trackingitems

stepzen import curl <<firebase_realtime_database/trackingitems.json file link>> --query-type Trackingitems --query-name getTrackingitems --name trackingitems

Deploy

stepzen start

---

Other dependencies info

🔶 Dependency Info

🏃 Run Locally

Clone the project

git clone https://github.com/Priyanshu88/UPS-App.git

change directory

cd UPS-App

Install dependencies

npx expo install

or

npm install

Start the server

npx expo start

---

Creating a Build

• Optimize the assets for speed - npx expo-optimize (formerly expo optimize)
• Bundle the project for production - npx expo export:web (expo build:web in the legacy Expo CLI).
• Creates a production ready static bundle in the web-build/ directory. Don't edit this folder directly.
• If you make any changes to your project, you'll need to re-build for production.
• For more help use npx expo export:web --help
• More Info

🚩 Deployment

To deploy this project run

Expo Publish

publish your project

expo publish

🤝 Contact

Your Name - @twitter_handle - 2040020@sliet.ac.in

Project Link: https://github.com/Priyanshu88/UPS-App.git