Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasjonstrup/product-list-with-cart
Frontend Mentor challenge with Svelte
https://github.com/thomasjonstrup/product-list-with-cart
frontend-mentor-challenge svelte sveltekit tailwindcss
Last synced: 30 days ago
JSON representation
Frontend Mentor challenge with Svelte
- Host: GitHub
- URL: https://github.com/thomasjonstrup/product-list-with-cart
- Owner: thomasjonstrup
- License: mit
- Created: 2024-07-16T13:35:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T11:37:33.000Z (5 months ago)
- Last Synced: 2024-07-17T16:37:42.064Z (5 months ago)
- Topics: frontend-mentor-challenge, svelte, sveltekit, tailwindcss
- Language: Svelte
- Homepage: https://product-list-with-cart-fm.netlify.app/
- Size: 4.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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.
[](https://app.netlify.com/sites/product-list-with-cart-fm/deploys)
## 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)
- [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: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [product-list-with-cart-fm.netlify.app](https://product-list-with-cart-fm.netlify.app)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [Svelte](https://svelte.dev) - Svelte
- [Svelte-kit](https://svelte.dev) - Svelte-kit framework
- [Tailwind](https://tailwindcss.com) - For styles
**Note: These are just examples. Delete this note and replace the list above with your own choices**
### What I learned
Learned more about Svelte and learning about their state management.
### Useful resources
- [Svelte docs](https://svelte.dev/docs) - This helped me with learning Svelte
- [Tailwind](https://tailwindcss.com/docs) - This helped me with classes for tailwind
## Author
- Website - [Thomas Jonstrup](https://thomasjonstrup.dk)
- Frontend Mentor -
[@thomasjonstrup](https://www.frontendmentor.io/profile/thomasjonstrup)
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.