Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmikaia/product-list-fm
Product list with cart a Frontend Mentor challenge.
https://github.com/dmikaia/product-list-fm
astrojs nanostores radix-ui reactjs shadcn-ui
Last synced: 2 days ago
JSON representation
Product list with cart a Frontend Mentor challenge.
- Host: GitHub
- URL: https://github.com/dmikaia/product-list-fm
- Owner: DMikaia
- Created: 2024-08-14T15:20:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-15T18:52:55.000Z (4 months ago)
- Last Synced: 2024-11-03T07:42:47.634Z (about 2 months ago)
- Topics: astrojs, nanostores, radix-ui, reactjs, shadcn-ui
- Language: TypeScript
- Homepage: https://product-list-fm.vercel.app
- Size: 2.44 MB
- Stars: 2
- 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)
- [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
### Links
- Live Site URL: [demo](https://product-list-fm.vercel.app/)
## My process
- I first created the basic UI/UX using astro and mainly react.
- I had to learn more about nanostores to create the basket state management.
- The last step I had to take was to create the modal and I used shadcn to create it.
### Built with
- [Astro](https://docs.astro.build/en/getting-started/)
- [React](https://reactjs.org/) - JS library
- [Shadcn](https://ui.shadcn.com) - For styles
- [Nanosotores](https://github.com/nanostores/nanostores) - For state management
### What I learned
I've learned some of the basic concepts of Astro and Nanostores and still have a lot to learn about them.
```astro
---
import Layout from '../layouts/Layout.astro';
import MainLayout from '../layouts/MainLayout.astro';
import ProductLayout from '../components/product';
import Cart from '../components/cart';
---
```
### Continued development
I'm going to concentrate on developing websites using astro and fewer react components to develop my knowledge of its features.
### Useful resources
- [Stack Overflow](https://stackoverflow.com)
- [Medium](https://medium.com)
## Author
- Frontend Mentor - [@dmikaia](https://www.frontendmentor.io/profile/dmikaia)
## Acknowledgments
For anyone wishing to learn a new framework or even a new language, the best way is to practice right away and avoid as much as possible **'tutorial hell'** you can learn more about this [here](https://www.linkedin.com/pulse/escaping-tutorial-hell-guide-progress-your-learning-journey-jatasra-dvdgf#:~:text=Tutorial%20Hell%20is%20a%20state,them%20can%20hinder%20your%20progress.). Instead, you can learn by researching and reading books.