VueJS Webstore for a bookshop

• About
• Features
• Project Structure
• Customize configuration
• Project Setup
  • Compile and Hot-Reload for Development
  • Compile and Minify for Production
  • Run Unit Tests with Vitest
  • Run End-to-End Tests with Cypress
  • Lint with ESLint
• Technologies

This is a webstore built with VueJs for front-end. It uses a MariaDB to store the data and a PHP API to communicate with the database and handle the requests. For more information about the API, please visit this repository.

• Bookshop live Demo

• Responsive design
• Search for books
• Add books to cart
• Remove books from cart
• Checkout (purchase using Stripe)
• View all orders as admin
• Change product quantity as admin
• Authentication

The project is structured in the following way:

• src contains the source code of the project
  • assets contains the static assets of the project
  • components contains the Vue components of the project
  • router contains the Vue router configuration
  • store contains the Vuex store configuration
  • views contains the Vue views of the project
  • App.vue is the root component of the project
  • main.ts is the entry point of the project

See Vite Configuration Reference.

npm install

npm run dev

npm run build

npm run test:unit

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

npm run lint

• VueJs
• Vite
• MariaDB
• PHP
• Stripe
• Vitest