muddasir03/Deliveroo-clone-ReactNative

The project at hand is a React Native-based clone of the official Deliveroo app, which boasts several impressive features. These include the use of Redux for streamlined state management, Tailwind CSS for efficient and flexible styling, and Sanity.io for content management and many other useful libraries.

Deliveroo Clone with REACT NATIVE!

Deliveroo Clone with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Sanity.io)

🌟 About the Project

📷 Screenshots

👾 Tech Stack

Client

• Javascript
• Expo
• React Native
• TailwindCSS

Database

• Sanity

🧰 Getting Started

‼️ Prerequisites

• Sign up for a Sanity 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 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

🔶 Dependency Info

🏃 Run Locally

Clone the project

  git clone https://github.com/muddasir03/Deliveroo-clone-ReactNative.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

🚩 Deployment

To deploy this project run

Expo Publish

publish your project

expo publish

🤝 Contact

Email ID- muddasarhussain739@gmail.com

Project Link : https://github.com/muddasir03/Deliveroo-clone-ReactNative