SHOWARMA

Live version:https://react-course-proje.web.app/

Shawarma delivery app with a twist

Table of contents

• Introduction
• Tech stack
• Project walk-through
• Setup/Launch
• Status

Introduction

A(nother) food delivery app, where users can buy shawarma and watch Youtube videos during delivery and afterwards. The app uses a series of APIs, like Google Maps API to embed a map in the app, convert coordinates to addresses and search for restaurants near a point on the map; Youtube Data v3 API to search for content and embed a Youtube player inside the app.

Tech Stack

• React
• Redux
• React Router
• SASS
• React Testing Library

Walk Through

You can check the app's pages walk-through down below:

Project's pages walkthrough:

Landing Page

Used ChatGPT for text content and Midjourney for images.

Meals

Here the users can choose from available Shawarmas :

And customize the order:

Checkout

Here the users can modify their order before sending it:

Then they can pick their address using a Google Maps map embedded in the page:

Then they pick a restaurant to prepare their Shawarma:

And then send the final order:

Delivery Status

Here the users can check the status of their order:

Entertainment Page

The twist of the app, users can watch youtube videos untill their food arrives, and while they eat their shawarma.

Here they can pick a video category:

And here they can watch videos from that category (a shuffle button is placed at the bottom of the screen):

Setup

To run the the app on your machine and play around, just clone the repo and run npm install command in your terminal, then run npm run start command to start a development server - and you're done.

Status

The project is done, it's time for a new one.