Funnie Cafe - E-commerce website (English)

Introduction - Read this in Chinese : 繁體中文

Demo Website : Link

In this simulation of a fully English e-commerce website, users can add products to their shopping cart, manage items by adding or removing them, and place orders. They can search for products using keywords and view detailed information about individual items. The backend allows administrator to add and modify products and coupons.

Technologies Used

Vue.js, Vite, Pinia, ESLint, Bootstrap 5, SCSS

Key Contributions

• Created the project using Vue.js and Vite, optimizing build processes for improved performance and responsiveness.
• Integrated Vue Router and Vue Axios, enhancing route management and streamlining API requests, which led to a more intuitive user navigation experience.
• Configured ESLint to adhere to Standard specifications, ensuring robust code quality and maintainability throughout the project lifecycle.
• Utilized Pinia for state management, facilitating efficient data operations and promoting seamless communication among components.
• Employed Bootstrap 5 and SCSS to design a responsive interface that significantly improved user experience, based on user feedback and testing insights.

Website features

• Front-end
  • Home Page
  • Products Page：Product classification and keyword search for efficient product discovery
  • Product Page : Product details
  • Shopping Cart： Add items to cart and remove items as needed
  • Checkout Process：Create and submit order
• Back-end (Administrator)
  • Product management：Manage product functionalities by adding, removing, and modifying items
  • Order management： View order details
  • Coupon management：Manage coupon functions by adding, removing, and modifying coupons

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Deploy

npm run deploy

Packages

• vue - v3.4.29
• vite - v5.3.1
• pinia - v2.1.7
• vue-router - v4.3.3
• axios - v1.7.7
• vue-axios - v3.5.2
• vue-loading-overlay - v6.0
• sweetalert2 - v11.13.3
• aos - v2.3.4
• swiper - v11.1.12
• vee-validate - v4.13.2
• bootstrap - v5.3.3
• bootstrap-icons - v1.11.3