PIZZERIA WEBSITE
PIZZERIA WEBSITE is aplication to simulate restarant website working - selecting order and booking table.
How it works
Link
https://gentle-ridge-92329.herokuapp.com/#/home
Getting Started
- git clone git@github.com:Webster2020/PIZZERIA_WEBSITE.git
- npm run install
- npm run watch - run the project and than You can see it on Your device
*...or use link if You only want to check how it works
Used technologies:
- Vanilla JS
- SCSS for styling
- HTML5 for content
- Handlebars to HTML templates
- JSON Server to simulating the operation of the server
- Eslint to control bugs
- Flickity for slider
- Range-slider
Implemented solutions:
** STRUCTURE: **
- application divided into three subpages: home, order and booking
- code responsible for routing creating in app.js
- js code divided into classes and objects, placed in separeted files
- every order and booking is sending on server (json server) - if You clone this repo, server is on http://localhost:3131/
** HOME: **
- basic information about page
- slider created with Flickity
** ORDER: **
- cart on the top with selected products and form to making order
- accordions with products
- in every product user can select amount of product, ingredients, additives and add thems to cart
** BOOKING: **
- form to select data
- bar (with range-slider) to select time of booking
- clickable picture to select free table
- widgets to select amount of people and hours
- form to select additives
Project architecture
- content in index.html file
- templates with Handlebars
- styles in scss files - general file with import styles from partials
- JS files divided into:
- app.js - main file
- settings.js - select, templates, class and DOM elemenst objects
- ustils.js - other functions
- components catalog with js (e.g. Cart, Booking, Product ...) files
- server simulation:
- server.js - simple server
- db / app.json - data base with all registred users
- images catalog with svg and jpg files
- vendor catalog with range-slider files
- configuration files: gitignore, package.json, stylelintrc etc.
How did I create this project?
Project was developed during the course - step by step.
Plan for future development
- notification when user make order or booking table
- forms full validation
Authors
- Michal Szwajgier - Webster2020 -
License
Free licence