React-E-Mall - E-Restaurant

A webdevelopment project built with Javascript, React JS, JSX, React Bootstrap, Tailwind, CSS3, and HTML5

Deployment and live demo links:

• https://react-e-mall.vercel.app/
• https://emallrestaurant.netlify.app/

About

IRT Restaurant / E-Restaurant is an Online Restaurant Web Application

Selection / Add to Cart Page:

• On the first page you will be presented with a group of food categories and a search bar
• You can choose the category of food/product you would like to order from or simply write the name of the item in the search bar
• Matching items will then show up right infront of you with an add (+) button on the top right of each of them
• Each click on an add button will add 1 item to your shopping cart
• After you are done adding items, you can then go to the shopping cart page by using the navbar link.

Shopping Cart / Cashier Page:

• On the shopping cart page you will be able to see the list and details of your items including all clalculations (reviewing your order)
• You can increase or decrease the quantities of any item and see a live change in the results and calculations and total (live editing your order)
• After you have reviewed your order and are satisfied with your order quantities/items you can then click on the 'confirm and send order' button.
• Clicking on the 'confirm and send button' will open the 'Finish Order' modal form.

Finish Order Modal

• In the 'Finish Order' modal you can enter information including delivery and payment information.
• Your location's city and ZIP may be automatically calculated
• It also includes a JavaScript credit card validation/guessing program
• Your shopping cart will be reset after you successfull submit your information and place the order by clicking the 'Place Order' button

Notes

• Refreshing your page or even restarting your app or even your laptop/tablet/mobile will not lead you to lose any progress. All items that you added to your cart will still be there waiting for you even after a restart.
• You do not have to worry about losing your progress by going from one step to the other and you can still go back to the selection page to select more items even after editing your order on the cart page.
• Jumping from one page to the other is extremel fast and seamless
• I am fetching the images and some other products' information/resources live from remote databases by using their relative APIs in order to retrieve those resources using the GET request method.

Technologies and Languages

Some technologies and programming languages that I used used in the building of this project include:

• JavaScript
• JSX
• Tailwind CSS
• CSS3
• HTML5
• React JS
• React Bootstrap

Snapshots

Note:

This project is a part of the E-Mall project which included a main landing/routing website by Rami, an online restaurant by Rami, an online music records shop by Izabella, and a music albums app by Thili.