E-Store built with Vue's Composition api script setup, mocked a server, vuex, vue-router

Overview

Frontend Mentor - E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

Screenshot

Links

My process

Approached building this project with the Agile Methodology

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Desktop-first workflow
  • Vue - JS Framework
  • vuex - State Management Pattern + Library
  • vue-router Vue Router is the official router for Vue.js.
  • TailwindCss - Css Framework For Styles

What I learned

  • Mocking client-server processing

Continued development

Useful resources

  • Stack Overflor - This project would have been nothing without this guy.
  • Nike - Where I got some product Image and other resources.
  • puma - Where I got some product Image and other resources.

Author

Acknowledgments

  • Segun Mustafa: For creating an awesome community

  • To everyone in the segsalerty community, for helping me get better with each review, helping me pay more attention to details, helping me see the need for a proper documentation (this is the very start, explains why it might not be all that great), among other things

  • Folafunmi: Taught me Responsive Driven Development (RDD)

You might also like...
A project to demonstrate the use of Store and state, getters, mutations in Vuex and VueJS

Vuex State Sample ๐ŸŽ ๐ŸŽฏ A project to demonstrate the use of Store and state, getters, mutations in Vuex and VueJS. Create Vuex Store and use it to hol

Reactivity system for Angular. Based on Vue Composition API.
Reactivity system for Angular. Based on Vue Composition API.

Note This repository is no longer maintained. The story continues at Angular Composition API. Reactivity system for Angular. Based on Vue Composition

A tiny state management library for Vue Composition API.
A tiny state management library for Vue Composition API.

vue-unstated A tiny state management library for Vue Composition API based on unstated-next which is for React. ๐Ÿ‡ Demo ๐Ÿ”Œ Installation $ npm install

Vue3 composition api exmaple

๋ฐ๋ชจ(Demo) click here . . ๋ฐœ๋‹จ Vue3๋กœ ๋„˜์–ด์˜ค๋ฉด์„œ composition api ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์ง์— ๋”ฐ๋ผ Vuex๋ฅผ ๋”์ด์ƒ ์“ฐ์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋Š” ๋ง์„ ๋“ค์—ˆ๋‹ค. Vue2์—์„œ๋Š” ํ•„์ˆ˜์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€๋Š”๋ฐ, ๊ทธ๋ ‡๋‹ค๋ฉด Vue3์—์„  ์–ด๋–ป๊ฒŒ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š”๊ฒƒ์ธ์ง€ ๊ถ๊ธˆ

A Store Website Built with Vue.js and Laravel
A Store Website Built with Vue.js and Laravel

โœ Frontend Store Sobre ๐ŸŽ“ Descriรงรฃo Front-end com Vue.js para consumir API feita com Laravel 8. ๐Ÿ”ฅ Funcionalidades Sistema de login Sistema de pedidos

Modular security for Vue, Vuex, Vue-Router and Nuxt

vue-kindergarten Introduction vue-kindergarten is a plugin for VueJS 2.0 that integrates kindergarten into your VueJS applications. It helps you to au

Use Vuex and V-Router

TrafficLights Project setup npm install Compiles and hot-reloads for development npm run start Compiles and minifies for production npm run build C

vuex-module-generator - It allows you to create a vuex module easily.

Vuex Module Generator (VMG) VMG allows you to create a vuex module easily. See All implementations. See Customer Example. Supported module types Clone

Sync and store vue state with browser URL params

vue-sync NOTE: Check out nuxt-url-sync to use it with SSR Sync Vue Component state with browser URL params Makes for easy bookmarking and sharing of v

Owner
_Chi_
Frontend Developer (JavaScript/VueJs,TailwindCSS) || Budding Full Stack Developer || Design Enthusiast
_Chi_
Saving Quick Notes - Vue, Vuex, Vue Router, Vue Composition API

Saving Quick Notes - Vue Project setup yarn install Compiles and hot-reloads for development yarn run serve Compiles and minifies for production yar

Karol Fabjaล„czuk 5 Mar 31, 2022
๐Ÿ“ฆ Fast, Simple, and Lightweight State Manager for Vue 3.0 built with composition API, inspired by Vuex.

v-bucket NPM STATUS: ?? Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex. Table of Contents Mai

mehdi 42 Aug 10, 2022
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Vuex ORM ?? HEADS UP! Currently, Vuex ORM Next project is on going, and we are hoping it is going to be the foundation of the version 1.0.0 release. W

Vuex ORM 2.4k Dec 29, 2022
Use a JSONAPI api with a Vuex store, with data restructuring/normalization.

jsonapi-vuex A module to access JSONAPI data from an API, using a Vuex store, restructured to make life easier. Vue 3 - v5 and later supports only Vue

Matthew Richardson 145 Dec 22, 2022
A util package to use Vuex with Composition API easily.

vuex-composition-helpers A util package to use Vuex with Composition API easily. Installation $ npm install vuex-composition-helpers This library is n

Greenpress 276 Dec 30, 2022
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

MUWONGE HASSAN 2 Oct 12, 2021
Todos-VUEX - A todo list made using Vue, Vuex, Axios and JSON Placeholder API.

todos Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

Lasanja 0 Jan 3, 2022
A Vuex plugin to persist the store. (Fully Typescript enabled)

vuex-persist A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage. Info :

Arnav Gupta 1.6k Dec 30, 2022
Enable two-way data binding for form fields saved in a Vuex store

vuex-map-fields Enable two-way data binding for form fields saved in a Vuex store. Install npm install --save vuex-map-fields Basic example The follow

Markus Oberlehner 1.4k Dec 2, 2022
A plugin for syncing Vuex store with js-data

vuex-jsdata-plugin A simple attempt to help using jsdata alongside Vue.js: This plugin syncing Vuex store with js-data After each injection made by js

Alexandre Bonaventure Geissmann 20 Jul 30, 2020