🛒 Mechanical Keyboard Store – Vue.js E-Commerce Project

📚 Table of Contents

Overview

• The Challenge

• Screenshots

• Live Demo

• Tech Stack

• What I Learned

• Testing Strategy

• SEO & Optimization

• Project Structure & Code Quality

• Future Development

• Acknowledgements

• Author

🧭 Overview

This e-commerce project blends my interest in custom mechanical keyboards with my goal of mastering modern frontend technologies. Built with Vue.js, TypeScript, and Tailwind CSS, this store delivers a smooth shopping experience with a minimalist UI and key features such as:

• Dynamic product pages and categories

• A responsive layout for mobile and desktop

• Persistent shopping cart using local storage

• SEO-friendly metadata and fast-loading content

🗻 The Challenge

I wanted to create a professional-grade store while learning:

• Routing and page generation using Vue Router

• Centralized state with Pinia and VueUse

• Typed development with TypeScript

• E2E testing with Cypress

• SEO and page performance with modern tools

📷 Screenshots

🔗 Live Demo 👉 https://e-commerce-store-hazel-xi.vercel.app/

🔧 Tech Stack

• Vue 3 – Frontend Framework

• Vue Router – SPA Navigation

• Pinia + VueUse – State Management

• TypeScript – Static Typing

• TailwindCSS – Utility-first Styling

• Vite – Fast Build Tooling

• Cypress – Testing Suite

• Unhead – Document Head Management

• ESLint + Prettier – Code Quality

• HTML5 + WebP – Semantic Structure & Optimized Images

💡 What I Learned

• Vue Router

• Dynamic routing with params and props

• Scroll position handling and lazy-loading routes

• 404 route handling and back-navigation behavior

• State Management (Pinia + VueUse)

• Reactive cart and form data storage

• Reload-persistent state using useStorage

• Form validation using centralized logic

• TypeScript

• Stronger prop typing and function contracts

• Defined interfaces for product data

• Safer development and better autocompletion

• TailwindCSS

• Responsive design using flex/grid and viewport units

• Conditional styling based on data

• Cart overlay and layered UI interactions

✅ Testing Strategy

• Cypress E2E: Happy/unhappy path testing

• Component Tests: Unit-level confidence in UI elements

• Integration Tests: Basic test coverage for workflows

• Viewport Tests: Ensuring mobile/tablet/desktop responsiveness

📈 SEO & Optimization

• Dynamic meta tags via Unhead

• Open Graph support for sharing

• HTML semantics for better crawling

• WebP image optimization & lazy loading

• Lighthouse for performance tuning

🗂️ Project Structure & Code Quality

• Directory organization for scalability

• ESLint for code consistency

• Tailwind Prettier plugin for class ordering

• Git-based version control and commit discipline

🚀 Future Development

• I'm planning to refactor and expand this app by:

• Rebuilding with Nuxt 3 for SSR, content management, and better SEO

• Adding a backend with Express or Django for:

• Authentication (login, sign-up, account cart)

• Admin panel for CRUD product management

• Purchase analytics and dashboards

• Integrating Stripe or PayPal for real payment workflows

• Improving test coverage and adding PWA features

🍰 Acknowledgements

• LearnVue – Vue fundamentals

• Make Apps with Danny – Vuex & Pinia

• freeCodeCamp – TypeScript & Cypress tutorials

• Web Dev Simplified – Responsive image strategies

• Big thanks to the creators of the product render images and to Frontend Mentor for layout inspiration.

👨‍💻 Author Thabiso Mokone GitHub: @mokone-september