Kalles Vue Ecommerce

This is a Vue 3 project built with Vite and Vuetify. It serves as an e-commerce platform with features like user authentication, product and category management, and a responsive design.

Live Demo

Check out the live version of the project: Kalles Vue

API

This project uses the DummyJSON API to handle:

• Product data
• Categories
• User login

Dependencies

Below is a list of the dependencies used in this project:

Core Dependencies

• vite: Build tool for modern web projects.
• vue: The progressive JavaScript framework.
• vuetify: Material Design Component Framework for Vue 3.
• typescript: Adds type definitions to JavaScript for better code reliability.

UI and Icons

• @mdi/font: Material Design Icons for Vuetify.
• @iconify/vue: Icon framework for customizable and scalable icons.
• swiper: Modern slider library for carousels.

Forms and Validation

• vee-validate: Form validation for Vue.js.
• @vee-validate/yup: Schema-based form validation using Yup.

State Management

• pinia: Store management for Vue 3.
• pinia-plugin-persistedstate: Plugin to persist the Pinia state across sessions.

Networking

• axios: Promise-based HTTP client for making API requests.

Toast Notifications

• vue-toastification: Toast notifications for Vue.js.

Stripe Integration

• @stripe/stripe-js: JavaScript library for Stripe payment integrations.

SEO and Meta Tags

• @unhead/vue: Head management for SEO-friendly meta tags.

Image Optimization

• vite-plugin-image-optimizer: Optimizes images for better performance.

Routing

• vue-router: Official router for Vue.js.

DevDependencies

• Tools and plugins to enhance development and build processes.

Project Structure

• src/: Main application source files.
• components/: Vue components.
• store/: Pinia state management.
• router/: Vue Router configuration.
• assets/: Static files like images and styles.
• utils/: Helper functions.

Features

• User authentication using DummyJSON API.
• Product and category management.
• Fully responsive design with Vuetify.
• Search functionality to find products quickly.
• Filter products by categories.
• Cart and wishlist to manage user-selected items.
• Toast notifications for user feedback.
• Optimized images for faster load times.
• Stripe integration for payment handling.
• Form validation with Vee-Validate and Yup.

Screenshots

Homepage

Cart Screen

Payment Screen

Search Screen

Wishlist Screen

Cart Drawer

Login Drawer

Contribution

Contributions are welcome! Feel free to fork the repository and submit a pull request.

Disclaimer

This code is for educational purposes only and not for commercial use.