DEMO: https://basic-shop.stsft.me/
This template should help get you started developing with Vue 3 in Vite.
Write an application that contains three pages:
- A page with a list of categories and products
- product page
- shopping cart page
Store data must be accessed using Ecwid REST API
The easiest way is to use a demo store. It's access info is like this:
- StoreID: 58958138
- Token: public_7BxbJGWyDaZfSQqjVS5Ftr4jzXkS43UD
The page contains a list of products and categories in any convenient format: grid, list table.
Category page content:
- category name
- category image
Product page content:
- product name
- product price
- product image
- buy button
When you click on a category, the app takes you to a page with subcategories and products belonging to that category.
When you click on a product, the app goes to the Product Details page.
The page contains details about the product:
- product name
- product description
- product image
- product price
- buy button
The button adds an item to the "cart" Shopping cart - any local storage with a list of added items.
All pages display a cart icon with the number of items added to it. When you click on the icon, the application goes to the "Shopping cart" page
The page contains a list of added items and the "Place order" button. Any item in the list can be deleted by clicking on the "Delete" button.
The page state is displayed in the url. When you navigate to a url, the page that belongs to that url is displayed.
When you click on the button, a text congratulating you on your purchase is shown.
- Typescript
- VueJS
- HTML/CSS
Pages should look nice and readable. You can use any CSS framework.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
npm installnpm run devnpm run buildRun Unit Tests with Vitest
npm run test:unitLint with ESLint
npm run lint