Pizza Delivery App

#atlashackathon #react #node #mongodb

Overview of My Submission

This app is pizza ordering app. You can browse through different pizzerias from my favorite local pizzerias. Goal of the app is to order your selected pizza easily and quickly.

Submission Category:

E-Commerce Creation

Link to Code

GitHub repository - frontend: https://github.com/eruj22/pizza-delivery
GitHub repository - backend: https://github.com/eruj22/pizza-delivery-backend
Working demo: https://pizza-delivery-33.netlify.app/

Additional Resources / Info

Technologies used:

ReactJS
NodeJS
mongoDB
Atlas Search
Stripe

Overview of the app

Let's start with the backend. NodeJS backend is connected with mongoDB. There are 3 collections:

Orders: finished orders
Pizzas: information about each pizza
Pizzerias: basic information about pizzerias

I also implemented search option. It is made for the pizzas collection and you can search for pizzas name and ingredients. The backend is deployed to Heroku. I have used free option so some users can wait for the dynos to wake up. Well, it's free, you can't argue with that.

So, when the app finally starts, you will see home page. There you can select from 3 pizzerias. After clicking on one, you will see all the pizzas that it offers. You can freely select which one you would like and in modal select its size. You can see your selected pizzas on the right side.

When you click order items you are navigated to the checkout page. There you have a form to fill with inputs validated. In the payment section you have option to pay with cash or card. When you choose with cash, you can submit form and pizza should be on its way to you. When you choose card, you need to input credit card number (it's in testing mode). I have used stripe CardElement for displaying card payment element.

When your inputs are all correct and you submit your order, then you are navigated to the success page. It informs you that your order was successful. All the information about it is sent to the mongoDB collection named orders.

One more thing to note. When you are in selected pizzeria page and you navigate to another page, your selected pizzas are deleted. This is because you can't order from many different pizzerias at the same time.

Last but not least, the search function. It has been there the whole time, hiding in the navigation section. When you input at least 2 letters the autocomplete function is activated (presuming you tried to write pizza name or some ingredient). When you submit the searching term you are navigated to the search page, where you can see all the results. It is using mongoDB search option for the collection of pizzas.

If you have any additional questions or improvements, write a comment down below.

Top comments (19)

Nandan S • Jan 17 '22

It's great bro...I liked the UI and functions u have added are very much creative and realistic ...and of course the whole project is a challenging one... especially for beginners who are trying to learn react by doing projects...