Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sashenjayathilaka/deliveroo-clone
Deliveroo Clone with REACT NATIVE! (Navigation, Implement Redux, Tailwind CSS & Sanity.io, React Native Heroicons, React Native Navigation to navigate between screens, sleek animated checkout flow)
https://github.com/sashenjayathilaka/deliveroo-clone
expo expo-cli heroicons-react learn react-currency-formatter react-native react-native-animatable react-native-maps react-native-progress react-native-safe-area-context react-native-web react-navigation-native react-redux sanity-client sanity-io student-vscode tailwindcss tailwindcss-plugin
Last synced: 13 days ago
JSON representation
Deliveroo Clone with REACT NATIVE! (Navigation, Implement Redux, Tailwind CSS & Sanity.io, React Native Heroicons, React Native Navigation to navigate between screens, sleek animated checkout flow)
- Host: GitHub
- URL: https://github.com/sashenjayathilaka/deliveroo-clone
- Owner: SashenJayathilaka
- Created: 2022-08-09T11:49:27.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-01T02:51:58.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T12:42:06.502Z (about 1 month ago)
- Topics: expo, expo-cli, heroicons-react, learn, react-currency-formatter, react-native, react-native-animatable, react-native-maps, react-native-progress, react-native-safe-area-context, react-native-web, react-navigation-native, react-redux, sanity-client, sanity-io, student-vscode, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 1.87 MB
- Stars: 87
- Watchers: 2
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Deliveroo Clone with REACT NATIVE!
Deliveroo Clone with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)
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
#### 🔴 Open the camera app on your device and scan the code below (live demo)
### :space_invader: Tech Stack
Client
Database
## :toolbox: Getting Started
### :bangbang: Prerequisites
- Sign up for a Sanity 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 deliveroo-clone
```
```
cd deliveroo-clone
```
Install dependencies
### Setup Tailwind CSS
```
npm install tailwindcss-react-native
npm install --save-dev tailwindcss
```
Tailwindcss requires a `tailwind.config.js` file with the content section configured to include the paths to all of your components and any other source files that contain Tailwind class names.
```
// tailwind.config.js
module.exports = {
content: [
"./screens/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
// ...
};
```
Add `TailwindProvider` at the top level of your application. The `TailwindProvider` creates the context for reactive styles and the atomic style objects.
```
import { TailwindProvider } from "tailwindcss-react-native";
function MyAppsProviders({ children }) {
return {children};
}
```
##### Configure your babel.config.js
```
// babel.config.js
module.exports = {
plugins: ["tailwindcss-react-native/babel"],
};
```
Install dependencies
### :running: Run Locally
Clone the project
```bash
git clone https://github.com/SashenJayathilaka/Deliveroo-Clone.git
```
change directory
```bash
cd Deliveroo-Clone
```
Install dependencies
```bash
npx expo 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/Deliveroo-Clone.git](https://github.com/SashenJayathilaka/Deliveroo-Clone.git)