{"id":15654091,"url":"https://github.com/sashenjayathilaka/ups-clone","last_synced_at":"2025-04-30T22:44:04.955Z","repository":{"id":40697640,"uuid":"482814045","full_name":"SashenJayathilaka/UPS-Clone","owner":"SashenJayathilaka","description":"UPS 2.0 with REACT NATIVE! (TypeScript, Firebase, StepZen \u0026 Tailwind CSS with RN, GraphQL backend directly connected to Firebase Realtime database effortlessly with StepZen,  React Native Navigation)","archived":false,"fork":false,"pushed_at":"2023-01-22T03:21:38.000Z","size":2007,"stargazers_count":32,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-26T19:21:15.599Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SashenJayathilaka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-18T11:00:38.000Z","updated_at":"2023-10-10T14:16:30.000Z","dependencies_parsed_at":"2023-02-12T14:16:47.856Z","dependency_job_id":null,"html_url":"https://github.com/SashenJayathilaka/UPS-Clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FUPS-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FUPS-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FUPS-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FUPS-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SashenJayathilaka","download_url":"https://codeload.github.com/SashenJayathilaka/UPS-Clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232548599,"owners_count":18540145,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-10-03T12:49:28.562Z","updated_at":"2025-01-05T04:45:38.445Z","avatar_url":"https://github.com/SashenJayathilaka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://user-images.githubusercontent.com/99184393/210092556-9aba6b25-f11e-46e2-a145-58d47565bff2.png\" alt=\"logo\" width=\"200\" height=\"auto\" /\u003e\n  \n  # UPS 2.0 with REACT NATIVE\n  \n  \u003cp\u003e\nUPS 2.0 with REACT NATIVE! (TypeScript, Firebase, StepZen \u0026 Tailwind CSS with RN, GraphQL backend directly connected to Firebase Realtime database effortlessly with StepZen, React Native Navigation)\n  \u003c/p\u003e\n  \n  \n\u003c!-- Badges --\u003e\n\n\u003ca href=\"#\" target=\"_blank\"\u003e![](https://img.shields.io/badge/Ios%2FAndroid-Up-green)\u003c/a\u003e\n![](https://img.shields.io/badge/Maintained-Yes-indigo)\n![](https://img.shields.io/github/forks/SashenJayathilaka/UPS-Clone.svg)\n![](https://img.shields.io/github/stars/SashenJayathilaka/UPS-Clone.svg)\n![](https://img.shields.io/github/issues/SashenJayathilaka/UPS-Clone)\n![](https://img.shields.io/github/last-commit/SashenJayathilaka/UPS-Clone)\n\n\u003ch4\u003e\n    \u003ca href=\"\"\u003eView Demo\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/UPS-Clone/blob/master/README.md\"\u003eDocumentation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/UPS-Clone/issues\"\u003eReport Bug\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/UPS-Clone/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/h4\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003c!-- Table of Contents --\u003e\n\n## :notebook_with_decorative_cover: Table of Contents\n\n- [About the Project](#star2-about-the-project)\n  - [Screenshots](#camera-screenshots)\n  - [Tech Stack](#space_invader-tech-stack)\n- [Getting Started](#toolbox-getting-started)\n  - [Prerequisites](#bangbang-prerequisites)\n  - [Installation](#gear-installation)\n  - [Run Locally](#running-run-locally)\n  - [Deployment](#triangular_flag_on_post-deployment)\n- [Contact](#handshake-contact)\n\n\u003c!-- About the Project --\u003e\n\n## :star2: About the Project\n\n\u003c!-- Screenshots --\u003e\n\n### :camera: Screenshots\n\n\u003cdiv style=\"display: inline_block\" align=\"center\"\u003e\u003cbr\u003e\n \u003cimg align=\"center\" alt=\"React\"  width=\"180\" src=\"https://user-images.githubusercontent.com/99184393/210093332-fd712ebe-3568-4adb-9885-11e4c7c8863c.png\"\u003e\n  \u003cimg align=\"center\" alt=\"React\"  width=\"180\" src=\"https://user-images.githubusercontent.com/99184393/210093483-f0fb5956-9906-4d64-a7c9-4b96ed2ea7c1.png\"\u003e\n  \u003cimg align=\"center\" alt=\"React\"  width=\"180\" src=\"https://user-images.githubusercontent.com/99184393/210093740-0a4dbe15-b593-4f9d-b1e3-edc081d34e8a.png\"\u003e\n    \u003cimg align=\"center\" alt=\"React\"  width=\"180\" src=\"https://user-images.githubusercontent.com/99184393/210093858-679ef9df-c440-4ca5-a378-089f7c09c7d3.png\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)\n![forthebadge](https://forthebadge.com/images/badges/for-you.svg)\n![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)\n\n### :space_invader: Tech Stack\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://#/\"\u003eTypescript\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://docs.expo.dev/workflow/expo-cli\"\u003eExpo\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://reactnative.dev\"\u003eReact Native\u003c/a\u003e\u003c/li\u003e\n     \u003cli\u003e\u003ca href=\"https://github.com/vadimdemedes/tailwind-rn\"\u003etailwind-rn\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDatabase\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://firebase.google.com\"\u003eFirebase\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGraphql\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://stepzen.com\"\u003eStepZen\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003ca href=\"#facebook\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg\" alt=\"Facebook\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#instagram\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/183096870-fdf58e59-d78c-44f4-bd1c-f9033c16d907.png\" alt=\"Instagram\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/177784603-d69e9d02-721a-4bce-b9b3-949165d2edeb.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/179383376-874f547c-4e6f-4826-850e-706b009e7e2b.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#google\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png\" alt=\"Google\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#github\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/182531543-22e5cec1-bf41-444c-80b0-c2b7205b99ca.png\" alt=\"GitHub\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#github\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/182531694-325c7651-c586-4b79-9304-9b7d39fd2a95.png\" alt=\"GitHub\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#github\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/182531879-62dd069e-d5aa-456c-874e-fb5303a5fa3c.png\" alt=\"GitHub\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#github\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/186053966-2e630de4-096a-4668-8e4a-863b41b24a98.png\" alt=\"GitHub\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n\u003ca href=\"#instagram\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/210094642-427ffa8a-3ba6-4ade-99dd-7061ae6bf81c.png\" alt=\"Instagram\" width=\"\" height=\"30\" /\u003e\u003c/a\u003e\n\n## :toolbox: Getting Started\n\n### :bangbang: Prerequisites\n\n- Sign up for a Firebase account \u003ca href='https://firebase.google.com'\u003eHERE\u003c/a\u003e\n- Sign up for a StepZen account \u003ca href='https://stepzen.com'\u003eHERE\u003c/a\u003e\n- Install Node JS in your computer \u003ca href='https://nodejs.org/en/'\u003eHERE\u003c/a\u003e\n\n### :gear: Installation\n\n![](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n\nInstall my-project with expo\n\n![](https://img.shields.io/badge/Expo-02569B?style=for-the-badge\u0026logo=Expo\u0026logoColor=white)\n\nInstalling Expo CLI\n\n```\nnpm install --global expo-cli\n```\n\nInitializing the project\n\n```\nnpx create-expo-app --template my-app\n```\n\n```\ncd my-app\n```\n\nInstall dependencies\n\n\u003chr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"#instagram\"\u003e\u003cimg src=\"https://static-00.iconduck.com/assets.00/tailwind-css-icon-512x64-vzqzx6f0.png\" alt=\"Instagram\" width=\"\" height=\"30\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n### Setup Tailwind CSS\n\n![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\nInstall\n\n```jsx\nnpm install tailwind-rn\n```\n\nRun the following command to automatically add `tailwind-rn` to your React Native project:\n\n```\nnpx setup-tailwind-rn\n```\n\nImport TailwindProvider and `tailwind.json` in the root of app (`App.jsx`)\n\n```tsx\nimport { TailwindProvider } from \"tailwind-rn\";\nimport utilities from \"./tailwind.json\";\n```\n\nWrap the root of your app into TailwindProvider\n\n```tsx\n// @ts-ignore -TailwindProvider is missing a type defination\n\u003cTailwindProvider utilities={utilities}\u003e\n  \u003cMyComponent /\u003e\n\u003c/TailwindProvider\u003e\n```\n\nupdate `tailwind.config.js` file\n\n```jsx\nmodule.exports = {\n  content: [\"./**/*.tsx\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n  corePlugins: require(\"tailwind-rn/unsupported-core-plugins\"),\n};\n```\n\nuseTailwind\n\n\u003c!--- React hook, which returns a `tailwind` function, that accepts a string with class names. This function returns an object of styles, which can be applied to a React Native view via `style` property. ---\u003e\n\n```tsx\nimport { useTailwind } from \"tailwind-rn\";\n\nconst MyComponent = () =\u003e {\n  const tw = useTailwind();\n\n  return \u003cText style={tw(\"text-blue-600\")}\u003eHello world\u003c/Text\u003e;\n};\n```\n\nBuild Tailwind styles in watch mode.\n\n```\nnpm run dev:tailwind\n```\n\n\u003chr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"#instagram\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/210094642-427ffa8a-3ba6-4ade-99dd-7061ae6bf81c.png\" alt=\"Instagram\" width=\"\" height=\"45\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n### Setting Up StepZen\n\n#### Create an account\n\n- Sign up for a StepZen account \u003ca href='https://stepzen.com'\u003eHERE\u003c/a\u003e\n\n#### Running StepZen\n\nAfter installing the CLI, you can connect it to your account.\n\nStart by logging in using the following command:\n\n```bash\n\nstepzen login\n\n```\n\nYou'll see a series of command prompts asking for your StepZen account name and admin key:\n\n```bash\nWhat is your account name?: {ACCOUNT}\nWhat is your admin key?: {ADMINKEY}\n```\n\nYour Admin Key and API Key\\*\\*\n\nWhen you get your account, log in to StepZen and navigate to the \u003ca href='https://dashboard.stepzen.com'\u003eStepZen dashboard\u003c/a\u003e, where you will find your account name, and the two keys you need for API authentication:\n\n#### stepzen init\n\nInitialize a StepZen workspace in the current directory.\n\n```bash\nstepzen init\n```\n\ncurl\n\n```bash\ncurl \u003c\u003cfirebase_realtime_database/customers file link\u003e\u003e\n```\n\n#### GET requests\n\nAuto-generate your schemas and resolvers using the following StepZen CLI command:\n\nOrder\n\n```bash\nstepzen import curl \u003c\u003cfirebase_realtime_database/orders.json file link\u003e\u003e --query-type Order --query-name getOrders --name orders\n```\n\nCustomer\n\n```bash\nstepzen import curl \u003c\u003cfirebase_realtime_database/customer.json file link\u003e\u003e --query-type Customer --query-name getCustomer --name customer\n```\n\nTrackingitems\n\n```bash\nstepzen import curl \u003c\u003cfirebase_realtime_database/trackingitems.json file link\u003e\u003e --query-type Trackingitems --query-name getTrackingitems --name trackingitems\n```\n\nDeploy\n\n```bash\nstepzen start\n```\n\n\u003chr /\u003e\n\nOther dependencies info\n\n\u003ca href=\"https://github.com/SashenJayathilaka/UPS-Clone/blob/master/package.json\" target=\"_blank\"\u003e🔶 Dependency Info\u003c/a\u003e\n\n\u003c!-- Run Locally --\u003e\n\n### :running: Run Locally\n\n![](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n\nClone the project\n\n```git\n  git clone https://github.com/SashenJayathilaka/UPS-Clone.git\n```\n\nchange directory\n\n```bash\n  cd UPS-Clone\n```\n\nInstall dependencies\n\n```bash\n  npx expo install\n```\nor\n```\n  npm install\n```\n\nStart the server\n\n```bash\n  npx expo start\n```\n\n\u003chr /\u003e\n\n### Creating a Build\n\n- Optimize the assets for speed - `npx expo-optimize` (formerly expo optimize)\n- Bundle the project for production - `npx expo export:web` (`expo build:web` in the legacy Expo CLI).\n- Creates a production ready static bundle in the `web-build/` directory. Don't edit this folder directly.\n- If you make any changes to your project, you'll need to re-build for production.\n- For more help use `npx expo export:web --help`\n- \u003ca href=\"https://docs.expo.dev/eas\" target=\"_blank\"\u003eMore Info\u003c/a\u003e\n\n\u003c!-- Deployment --\u003e\n\n### :triangular_flag_on_post: Deployment\n\nTo deploy this project run\n\n#### Expo Publish\n\n![](https://img.shields.io/badge/Expo-02569B?style=for-the-badge\u0026logo=Expo\u0026logoColor=white)\n\npublish your project\n\n```\nexpo publish\n```\n\n## :handshake: Contact\n\nSashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com\n\nProject Link: [https://github.com/SashenJayathilaka/UPS-Clone.git](https://github.com/SashenJayathilaka/UPS-Clone.git)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Fups-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsashenjayathilaka%2Fups-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Fups-clone/lists"}