Deliveroo-Clone
Deliveroo-Clone copied to clipboard
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)
![logo](https://user-images.githubusercontent.com/99184393/196014260-dfc68631-1abb-4635-ac6d-787ad0805dcd.png)
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
- Screenshots
- Tech Stack
-
Getting Started
- Prerequisites
- Installation
- Run Locally
- Deployment
- Contact
:star2: About the Project
:camera: Screenshots
![React](https://user-images.githubusercontent.com/99184393/184466112-3d639a7d-e292-43f1-96ff-0d7506be7d5a.jpg)
![React](https://user-images.githubusercontent.com/99184393/184466143-c95e743f-eff5-4acf-ad9d-4f33142ca088.jpg)
![React](https://user-images.githubusercontent.com/99184393/184466211-d27ca927-7a3f-4a36-8920-3d7d62e7ab29.jpg)
![React](https://user-images.githubusercontent.com/99184393/184466252-59874cd9-bd09-48c5-8122-715d4f386ce3.jpg)
🔴 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
: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 <TailwindProvider>{children}</TailwindProvider>;
}
Configure your babel.config.js
// babel.config.js
module.exports = {
plugins: ["tailwindcss-react-native/babel"],
};
Install dependencies
:running: Run Locally
Clone the project
git clone https://github.com/SashenJayathilaka/Deliveroo-Clone.git
change directory
cd Deliveroo-Clone
Install dependencies
npx expo 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
:triangular_flag_on_post: Deployment
To deploy this project run
Expo Publish
publish your project
expo publish
:handshake: Contact
Sashen - @twitter_handle - [email protected]
Project Link: https://github.com/SashenJayathilaka/Deliveroo-Clone.git