Funnie Travel - E-commerce website (Chinese)

Introduction - Read this in Chinese : 繁體中文

Demo Website : Link

Simulated travel e-commerce website, including shopping cart, favorites, product list, and FAQ pages. Users can add products to the shopping cart or favorites, add or remove products, apply coupons, and place orders. They can also view detailed information about individual products. 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
  • About Us Page
  • Products Page：Product classification and sort products by price : low to high or high to low
  • Product Page : Product details
  • Favorites Page: Add items to Favorites and remove items as needed
  • FAQs Page
  • 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
• vue-router - v4.3.3
• axios - v1.7.7
• vue-axios - v3.5.2
• vue-loading-overlay - v6.0
• aos - v2.3.4
• sweetalert2 - v11.14.2
• swiper - v11.1.14
• vee-validate - v4.13.2
• vue3-marquee - v4.2.2
• bootstrap - v5.3.3
• bootstrap-icons - v1.11.3