Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/othmanenissoukin/fem-products-list

The Product List with Cart app lets users manage their cart, view a confirmation modal, and reset orders. Created using Styled Components, React Compound Components, React Portal, and Context API for state management
https://github.com/othmanenissoukin/fem-products-list

compound-components context-api frontendmentor-challenge frontmentor reactjs reactportal styled-components

Last synced: 4 days ago
JSON representation

The Product List with Cart app lets users manage their cart, view a confirmation modal, and reset orders. Created using Styled Components, React Compound Components, React Portal, and Context API for state management

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)

  - [Useful resources](#useful-resources)

- [Author](#author)



## 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



![](./images/ss-1.jpg)

![](./images/ss-2.jpg)

![](./images/ss-3.jpg)

![](./images/ss-4.jpg)



### Links



- Solution URL: [Add solution URL here](https://your-solution-url.com)

- Live Site URL: [Add live site URL here](https://your-live-site-url.com)



## My process



### Built with



- ReactJS

  - Context API

  - Compound Compenents Pattern

  - React Portal

  - Semantic HTML5 markup

- Styled Components Library

  - CSS custom properties

  - CSS Grid

  - Flexbox

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

- [Styled Components](https://styled-components.com/) - For styles



### What I learned



This project allowed me to deepen my understanding of state management, reusable components, and styling in React.



- **Styled Components:** Leveraged styled components for reusable and flexible styling, enabling dynamic content and event handling without cumbersome props.



- **Compound Components Pattern:** Implemented compound components to simplify state management and enhance reusability, particularly useful for modal implementations.



- **Context API:** Used Context API to manage cart state, avoiding props drilling and ensuring seamless state access and mutation across the component tree.



- **React Portal:** Utilized for elements that need to appear above other elements, such as modals, context menus, and toasts. createPortal() allows placing these elements at any position in the DOM tree while maintaining their position in the React component tree.



### Useful resources



- [The Compound Component](https://www.patterns.dev/react/compound-pattern/) - This article explains how to implement a new compound component with straight forward examples.



## Author



- Website - [Othmane Nissoukin](https://nissoukin-othmane-portfolio.free.nf)

- Frontend Mentor - [@OthmaneNissoukin](https://www.frontendmentor.io/profile/yourusername)

- GitHub - [@OthmaneNissoukin](https://github.com/OthmaneNissoukin/)