Restaurant Page

Dynamically rendering a restaurant homepage with JS and webpack
🖊️ Assignment 🐞 Report a Bug 🙋‍♂️ Request Feature

The Project

Plaza Athénée is a fictional restaurant based in USA. They have requested your help to build a website that will help them reach to younger public. They want it to be fast, dynamic and responsive.

Well...

In fact this is for Microverse based in this requirements.

Restaurant Page project is part of a series of projects to be completed by students of Microverse.

The Restaurant Page is a JavaScript project, built using DOM manipulation and webpack. The restaurant shows a description of the services, a menu with some dishes (with a delicate animation), and a welcoming contact page. Most of the web is created using JavaScript String Templates, changing the view dynamically with event listeners.

I created the design, configured the project and coded the webpage, so I was the designer, UI/UI engineer, Web Programmer, etc.

Features

• Data Structures
• Object Oriented Programming
• Factory Functions
• Single Responsibility
• Tightly Coupled Objects
• Module Pattern
• ES6 syntax
• Export/import ES6+ notation
• Linters
• Basic VanillaJS app with a single script or few commands
• JS modules and ES6+ available for most browsers
• Sets stickler on the repo
• Sets eslint rules
• Tests made with ESLint
• Unit Testing with Jest
• Add jest and eslint to be callable with npm

Tests

Eslint

Built With

• Webpack
• ESLint
• npm
• vscode with ESLint extension
• Linux/GNU
• Love and Passion for code

Live Demo HERE

Prerequisites

• git
• npm 6.13 +
• node 11.15 +
• A Text Editor like VSCode
• A browser like Firefox or Chrome

Quick Start

git clone https://github.com/Israel-Laguan/SUSHI-FUSION.git
cd sushi-fusion
npm i && npm start

Then open http://localhost:3000/ to see the app.

Where are the generated files?

In development mode webpack does not write generated files to disk, in order to change it switch devServer.writeToDisk to true in webpack.dev.js. When you use production mode, the generated files are on dist/ folder.

Run development build

To run the development build (the one that don't generate files) just run in the terminal npm start

Production

• npm run build to prepare html, css, js files in dist/ directory. The gerated files are ready to put in production, also you can open the index.html in your local browser so you can see the result.

Run tests

Run ESlint with npm run lint to verify linter rules are applied correctly. If you want to auto correct you can run npm run lint-fix. Optionally you can run the linter and tests: npm run linter && npm test

Future/planned features

• Reservation with a form
• Contact Form with a custom message
• Improve Home View
• Add Dishes and their description
• When you click a dish, you have a button to reservate that dish in the form
• Integrate Reservation with a Calendar/Events feature
• Add tests

Author

Israel Laguan

Email me to israellaguan@gmail.com Connect to my Linkedin Check my GitHub Profile

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

🤗 Show your support

Give a ⭐️ if you like this project!

🏅 Acknowledgements

• Microverse
• The Odin Project
• Readme header author

I created this websites inspired form an original art created by freepik - www.freepik.com

License

📝 This project is licensed under the MIT
Feel free to fork this project and improve it