Pizza Biola

• Pizza Biola
  • Live demo
  • ⭐ Features
  • 🔧 How to setup and run
  • 🏞 Images from the website
    • Homepage most wanted section
    • Entire homepage
    • Menu page
    • Dish details page
    • About us
    • Login Page
    • Admin page
    • Add New Dish page
    • Edit Dish page
  • Resources used in this project

Live demo

Pizza Biola

Since I am using the free version , please give a couple of minutes to start

⭐ Features

• Admins can add dishes to the menu

• Admin can update and delete dishes

• Admins can make dish appear for the users

• Users can view to most liked dishes

• Users can vote for favorite dish

• See the ingredients of certain dish

• See allergens of certain dish

🔧 How to setup and run

first you need to make sure you have node install in your terminal type

  node --version

Install the dependencies

  npm install

start the application

  npm start

Login credentials email: [email protected] password:example

🏞 Images from the website

Homepage most wanted section

Entire homepage

The homepage is the place where we show our most wanted dishes which are essentially the top 3 most liked (voted) dishes. And all of our public dishes.

Menu page

In the menu page we can see each dish withing their category in a nice way. With the price and ingredients if any.

Dish details page

The details page presents more information such as allergies that the dish may contain and the total votes it has. This is the page where the user can vote for a dish as well. We also have the ingredients and the description.

About us

The about us page is a just simple page with placeholder information. About what we provide and who we are.

Login Page

The login page consist of warning message saying that this page is for staff only and if you are staff , but do not have account you should just contact the manager.The part of the page is the form basic email field and password field with login button.

Admin page

The admin page is a simple dashboard having the title category description price and whether is public or not for each dish. As well as edit and delete button. And of course button to add new dish.

Add New Dish page

This page have centered form with all the fields needed in order to create new dish. The most interesting part is how we handle adding ingredients and allergies. I wanted to make it easier for everything trying to add new dish so every ingredient is separated by ", " (comma and whitespace.

Edit Dish page

The for is exactly the same with the only difference being that every field is pre-populated with the information from the existing model.

Resources used in this project

Name	Usage	Link
Tailwind css	Styling - CSS framework	Tailwind
Google fonts	Fast font provider	Google fonts
Hero icons	Svg icons	Hero icons
Unsplash	Stock images	Unsplash