A modern e-commerce application built with Vue.js 3, featuring a responsive design and seamless shopping experience.

• Modern Vue 3 composition API
• Responsive design using Vuetify and Bootstrap
• State management with Pinia
• Secure payment processing with Stripe integration
• Toast notifications for better user feedback
• Material Design Icons
• Client-side routing with Vue Router

• Frontend Framework: Vue.js 3
• UI Components:
  • Vuetify 3
  • Bootstrap 5
  • Bootstrap Vue 3
• State Management: Pinia
• Payment Processing: Stripe
• Build Tool: Vite
• Icons: Material Design Icons
• Notifications: Mosha Vue Toastify

• Node.js (Latest LTS version recommended)
• npm or yarn package manager

1. Clone the repository:

   git clone [your-repository-url]
   cd vue-commerce-app

2. Install dependencies:

   cd frontend
   npm install

3. Start the development server:

   npm run dev

   The application will be available at http://localhost:5173

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint with auto-fix

The project uses Vite as the build tool. Configuration can be found in vite.config.js.

frontend/
├── public/          # Static assets
├── src/            # Source files
│   ├── assets/     # Project assets
│   ├── components/ # Vue components
│   ├── views/      # Page components
│   ├── router/     # Vue Router configuration
│   ├── stores/     # Pinia stores
│   └── App.vue     # Root component
├── index.html      # Entry HTML file
└── package.json    # Project dependencies and scripts

Create a .env file in the frontend directory with the following variables:

VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key

• Duc Anh Tran - Initial work

• Vue.js team for the amazing framework
• Vuetify team for the beautiful UI components
• Stripe for secure payment processing
• Educative.io team for their comprehensive e-commerce project guide and implementation insights