Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sashenjayathilaka/ups-clone
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)
https://github.com/sashenjayathilaka/ups-clone
apollo-client bottom-tabs expo expo-status-bar firebase-realtime-database graphql learn native-stack react-dom react-native react-native-maps react-native-safe-area-context react-native-screens react-native-vector-icons react-navigation stepzen tailwind-rn typescript
Last synced: 23 days ago
JSON representation
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)
- Host: GitHub
- URL: https://github.com/sashenjayathilaka/ups-clone
- Owner: SashenJayathilaka
- Created: 2022-04-18T11:00:38.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T03:21:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T12:49:28.128Z (about 1 month ago)
- Topics: apollo-client, bottom-tabs, expo, expo-status-bar, firebase-realtime-database, graphql, learn, native-stack, react-dom, react-native, react-native-maps, react-native-safe-area-context, react-native-screens, react-native-vector-icons, react-navigation, stepzen, tailwind-rn, typescript
- Language: TypeScript
- Homepage:
- Size: 1.91 MB
- Stars: 32
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
## :notebook_with_decorative_cover: Table of Contents
- [About the Project](#star2-about-the-project)
- [Screenshots](#camera-screenshots)
- [Tech Stack](#space_invader-tech-stack)
- [Getting Started](#toolbox-getting-started)
- [Prerequisites](#bangbang-prerequisites)
- [Installation](#gear-installation)
- [Run Locally](#running-run-locally)
- [Deployment](#triangular_flag_on_post-deployment)
- [Contact](#handshake-contact)
## :star2: About the Project
### :camera: Screenshots
### :space_invader: Tech Stack
Client
Database
Graphql
## :toolbox: Getting Started
### :bangbang: Prerequisites
- Sign up for a Firebase account HERE
- Sign up for a StepZen account HERE
- Install Node JS in your computer HERE
### :gear: 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
```jsx
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`)
```tsx
import { TailwindProvider } from "tailwind-rn";
import utilities from "./tailwind.json";
```
Wrap the root of your app into TailwindProvider
```tsx
// @ts-ignore -TailwindProvider is missing a type defination
```
update `tailwind.config.js` file
```jsx
module.exports = {
content: ["./**/*.tsx"],
theme: {
extend: {},
},
plugins: [],
corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};
```
useTailwind
```tsx
import { useTailwind } from "tailwind-rn";
const MyComponent = () => {
const tw = useTailwind();
return Hello world;
};
```
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:
```bash
stepzen login
```
You'll see a series of command prompts asking for your StepZen account name and admin key:
```bash
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.
```bash
stepzen init
```
curl
```bash
curl <>
```
#### GET requests
Auto-generate your schemas and resolvers using the following StepZen CLI command:
Order
```bash
stepzen import curl <> --query-type Order --query-name getOrders --name orders
```
Customer
```bash
stepzen import curl <> --query-type Customer --query-name getCustomer --name customer
```
Trackingitems
```bash
stepzen import curl <> --query-type Trackingitems --query-name getTrackingitems --name trackingitems
```
Deploy
```bash
stepzen start
```
Other dependencies info
### :running: Run Locally
Clone the project
```git
git clone https://github.com/SashenJayathilaka/UPS-Clone.git
```
change directory
```bash
cd UPS-Clone
```
Install dependencies
```bash
npx expo install
```
or
```
npm install
```
Start the server
```bash
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
### :triangular_flag_on_post: Deployment
To deploy this project run
#### Expo Publish
publish your project
```
expo publish
```
## :handshake: Contact
Sashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - [email protected]
Project Link: [https://github.com/SashenJayathilaka/UPS-Clone.git](https://github.com/SashenJayathilaka/UPS-Clone.git)