DEV Community

Cover image for Pizza Delivery App
Jure Prnaver
Jure Prnaver

Posted on

Pizza Delivery App

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.
Single pizzeria page

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.
Checkout page

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.
Search page

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

Top comments (19)

Collapse
 
nandan_s profile image
Nandan S

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...

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you, I really appreciate your comment

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
optimbro profile image
Rahul

I liked the UI

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
iabdsam profile image
Abdul Samad

The aesthetics are good

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
parag18081994 profile image
Parag

UI is amazing, great work

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you very much

Collapse
 
yvesnrb profile image
yvesnrb

As others have mentioned, the UI work is awesome. I'm sure the back end took no less effort. Good one!

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
ijsathi profile image
Israt Zahan Sathi

Wow!!! Everything is very nice

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
tatiana profile image
EYEPISSGLITTER • TATIANA • DJCropTopTot

Great design and function!

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you

Collapse
 
sehgalspandan profile image
Spandan Sehgal

Awesome
Keep it up

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you, that I will

Collapse
 
eruj22 profile image
Jure Prnaver

Thank you