Simple Cashier Web Application

Features:

1. Cashier landing page
2. Search the product in the top input
3. Add the item in the result list
4. Increase and decrease the item’s quantity by clicking the plus and minus of the button
5. Remove the item by clicking the X button or if the user is setting the item’s quantity to 0
6. Total amounts shown correctly based from the sum of all item’s price x item’s quantity
7. Eevery item added to the product list, it should not be shown again in the result list
8. "Not Found" Route implemented

How to use this app

1. First of all please visit the website's link: https://cashiers-app.vercel.app/
2. The first page you see is Landing Page called
3. Navigate to Lists Products Page by clicking "Products" menu in navbar / sidebar
4. You will redirect to Lists Products Page, you can search and add product to product lists by clicking the "Add Product" button
5. You can increase and decrease the item’s quantity by clicking the plus and minus button
6. You can remove the item by clicking the X button or setting the item’s quantity to 0
7. Product's amount and total's amount is dynamically based on product's price x product's quantity

Using ReactJS as UI library

TypeScript for JavaScript static typing layer

State Management with Zustand

Using CSS in JS for styling solution (because I love CSS)

Good separation of logical and UI layers

Reusable UI Components

Routing with React Router DOM

Github for Version Control System

Using Vite for build tool

Much more react hooks are used

Responsive mobile friendly