https://github.com/beckycode/product-list-with-card
A Frontend Mentor project built with vuejs, pinia, sass, svgloader
https://github.com/beckycode/product-list-with-card
pinia-vuejs sass vuejs
Last synced: 3 months ago
JSON representation
A Frontend Mentor project built with vuejs, pinia, sass, svgloader
- Host: GitHub
- URL: https://github.com/beckycode/product-list-with-card
- Owner: beckycode
- Created: 2025-03-18T01:34:18.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T03:01:45.000Z (3 months ago)
- Last Synced: 2025-04-01T03:33:41.490Z (3 months ago)
- Topics: pinia-vuejs, sass, vuejs
- Language: Vue
- Homepage: https://product-list-with-cart-beckycode.netlify.app/
- Size: 1.83 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Product list with cart solution
This is a solution to the [Product list with cart challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-list-with-cart-5MmqLVAp_d). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview
### The challenge
Users should be able to:
- Add items to the cart and remove them
- Increase/decrease the number of items in the cart
- See an order confirmation modal when they click "Confirm Order"
- Reset their selections when they click "Start New Order"
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [Repo](https://github.com/beckycode/product-list-with-card)
- Live Site URL: [Product list with cart in Netlify](https://product-list-with-cart-beckycode.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Sass
- Desktop-first workflow
- Vuejs
- Pinia
- Local storage
### What I learned
I enjoyed working in the structure of this projects. Thinking what's the best approach with different components and css, sass files. Also how to work with SVG files.
The benefits of working Flexbox and CSS Grid at the same time it's definitely useful and neccesary.
This project helped to brush up my skills with the different technologies that I use daily. Most of the times my work is based in build components and style them but not to structure a complete project. It was an enjoyable experience since the planning phase until the deployment in Netlify.
### Continued development
I'm going to add unit test files
## Author
- Website - [Beckycode](https://beckycode.com/)
- Frontend Mentor - [@beckycode](https://www.frontendmentor.io/profile/beckycode)
- LinkedIn - [@rebecagonzalezerazo](https://www.linkedin.com/in/rebecagonzalezerazo/)
## Acknowledgments
This template should help get you started developing with Vue 3 in Vite.
### Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
### Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
### Project Setup
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Compile and Minify for Production
```sh
pnpm build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
pnpm test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
pnpm lint
```