Part 0: Prerequisites and summary of the project

Table Of Contents

• Prerequisites
• Why I created this project?
• What I will build?
• Next step

Prerequisites

To feel comfortable to follow along with the implementation of this project you should have at least basic knowledge of Javascript, VueJS, CSS (I will be using CSS framework Bulma), GitHub and how to use Terminal on your computer.

Why I created this project?

In one of my job interviews for the frontend developer role I have been asked to write a code with Vue 3 and provide it for review together with a link to the deployed (live) version.
I have decided to write detailed tutorial how I have solved this task, because I like to learn. And I learn a lot when explain to others how I approached to solve tasks.

I have chosen to store my code on public GitHub repository to make it available for review. Once a code is ready on GitHub repo, then it is really easy to deploy it free of charge to GitHub Pages to make it available online.

What I will build?

Hence, I have been asked to code a demo website with a list of products. Following conditions should have been met:

• Loaded page should have several demo products stored.
• It should be available to add, edit and delete a product.
• Backend or database shouldn't be used, but products should be stored for each particular user who uses demo website.
• Product code, name and price should be available to add manually by the user.
• When a price of the product is added by the user, then subtotal price should be displayed immediately with a tax of 21% added.
• Values should be reactive.
• Input fields should have validation rules, so that invalid values wouldn't be accepted.
• Demo website should have only 2 pages. Main (index) page to display, add, delete, edit products and billing page to display a list of products and subtotal price of all the products.

Next step

So, let's get started on the action!