![logo](https://user-images.githubusercontent.com/99184393/210092556-9aba6b25-f11e-46e2-a145-58d47565bff2.png)
UPS 2.0 with REACT NATIVE
UPS 2.0 with REACT NATIVE! (TypeScript, Firebase, StepZen & Tailwind CSS with RN, GraphQL backend directly connected to Firebase Realtime database effortlessly with StepZen, React Native Navigation)
View Demo · Documentation · Report Bug · Request Feature
📔 Table of Contents
🌟 About the Project
📷 Screenshots
👾 Tech Stack
Client
Database
Graphql
🧰 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.jsx
)
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
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
🏃 Run Locally
Clone the project
git clone https://github.com/SashenJayathilaka/UPS-Clone.git
change directory
cd UPS-Clone
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
Sashen - @twitter_handle - sashenjayathilaka95@gmail.com
Project Link: https://github.com/SashenJayathilaka/UPS-Clone.git