Implement shopping cart

[brolag]

Implement shopping cart functionality allowing users to add products, view cart items, and proceed to checkout.

• Subtasks:

  1. Create Cart UI: Build a cart interface allowing users to view products, adjust quantities, and remove items.
  2. State Management: Implement state management for the cart using Zustand or Server Side State (TBD)
  3. Integrate with Backend: Connect the cart to backend APIs to manage cart data and persist user selections.

• Acceptance Criteria: Users can add products to the cart, update quantities, and view total prices before proceeding to checkout.

[muguika]

This is what we have as first step for the cart (products + quantities + prizes) at design level we only have the option to remove at the moment... we could include the adjust quantity option!

When the user clicks on "buy" it goes to the checkout, and still has some decisions to make (delivery method, address, etc.)

[Benjtalkshow]

Hello @brolag,

Can I work on this task? I am ready and available to take it on. I’m an experienced full-stack JavaScript developer with 4 years of experience and a passion for developing frontend web applications. I specialize in using Next.js to build full-stack applications. I have made over 18 contributions on OnlyDust in Next.js, Cairo, TypeScript, starknet react and JavaScript projects. I would be glad if this task is assigned to me.

[onlydustapp[bot]]

Hey @Benjtalkshow! Thanks for showing interest. We've created an application for you to contribute to Cofiblocks. Go check it out on OnlyDust!

[0xdevcollins]

Hello @brolag,

I am Collins Ikechukwu, and I am eager to take on this task. With 4 years of experience as a full-stack JavaScript developer, I have a strong background in developing frontend web applications, particularly using Next.js. I’ve contributed to OnlyDust in projects involving Next.js, Cairo, TypeScript, and JavaScript. I’m confident that I can handle this task effectively and would be grateful if you could assign it to me.

[onlydustapp[bot]]

Hey @devcollinss! Thanks for showing interest. We've created an application for you to contribute to Cofiblocks. Go check it out on OnlyDust!

[t0fudev]

Hello @brolag I'm Hellen Xie, also known as t0fudev.

I´m currently a passionate computer science student and also a web3 developer. I´ve been continuously practicing and diving more about the Cairo programming language. I'm really excited to have the opportunity to contribute on this repository since projects like this one catch my attention, and also I can consider myself capable of completing this task successfully.

[brolag]

@t0fudev assigning this to you.

[brolag]

@t0fudev this could be useful

Project Overview

Build a shopping cart page that allows users to add and remove items from their cart, and view the total cost of the items in the cart.

Core Functionalities

• Add and remove items from the cart
• View the total cost of the items in the cart
• Persist the cart items in the local storage
• Use the useAtom hook to manage the cart items
• Add a shopping cart icon in the header that shows the number of items in the cart

Documentation

This is an example of the shopping cart page:

"use client"

import { useState } from 'react'
import { Trash2 } from 'lucide-react'

type CartItem = {
  id: string
  name: string
  quantity: number
  price: number
  imageUrl: string
}

type ShoppingCartProps = {
  initialItems?: CartItem[]
}

export default function Component({ initialItems = [] }: ShoppingCartProps) {
  const [cartItems, setCartItems] = useState<CartItem[]>(initialItems.length ? initialItems : [
    {
      id: "1",
      name: "GeishaPoa2490",
      quantity: 5,
      price: 90,
      imageUrl: "/placeholder.svg"
    },
    {
      id: "2",
      name: "GeishaPoa1660",
      quantity: 1,
      price: 10,
      imageUrl: "/placeholder.svg"
    },
    {
      id: "3",
      name: "GeishaPoa9382",
      quantity: 2,
      price: 40,
      imageUrl: "/placeholder.svg"
    }
  ])

  const handleRemove = (id: string) => {
    setCartItems(cartItems.filter((item) => item.id !== id))
  }

  const totalPrice = cartItems.reduce((total, item) => total + item.price, 0)

  return (
    <div className="w-full max-w-md p-6 bg-white rounded-lg shadow-sm">
      <div className="space-y-4">
        {cartItems.map((item) => (
          <div key={item.id} className="flex items-center gap-4 py-2">
            <img
              src={item.imageUrl}
              alt={item.name}
              className="w-12 h-12 rounded bg-gray-100 object-cover"
            />
            <div className="flex-1">
              <h3 className="font-medium text-base">{item.name}</h3>
              <p className="text-sm text-gray-500">quantity: {item.quantity}</p>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-base">{item.price} USD</span>
              <button
                onClick={() => handleRemove(item.id)}
                className="text-red-500 hover:text-red-700 transition-colors"
              >
                <Trash2 className="h-5 w-5" />
                <span className="sr-only">Remove {item.name} from cart</span>
              </button>
            </div>
          </div>
        ))}
      </div>
      <div className="flex items-center justify-between pt-4 mt-4 border-t border-gray-200">
        <span className="text-base font-semibold">TOTAL</span>
        <span className="text-base font-semibold">{totalPrice} USD</span>
      </div>
    </div>
  )
}

Current File Structure

. ├── CHANGELOG.md ├── COMMUNITY_GUIDELINES.md ├── README.md ├── apps │   ├── snfoundry │   │   ├── contracts │   │   │   ├── Scarb.lock │   │   │   ├── Scarb.toml │   │   │   ├── src │   │   │   └── target │   │   ├── deployments │   │   │   ├── devnet_1730126468782.json │   │   │   ├── devnet_1730126549433.json │   │   │   ├── devnet_1730126950593.json │   │   │   ├── devnet_1730128066645.json │   │   │   ├── devnet_1730128770022.json │   │   │   ├── devnet_1730136697823.json │   │   │   ├── devnet_1730147754135.json │   │   │   ├── devnet_1730148629232.json │   │   │   └── devnet_latest.json │   │   ├── package.json │   │   ├── scripts-ts │   │   │   ├── deploy-contract.ts │   │   │   ├── deploy.ts │   │   │   ├── helpers │   │   │   └── types.ts │   │   └── tsconfig.json │   └── web │   ├── README.md │   ├── biome.json │   ├── next-env.d.ts │   ├── next-i18next.config.js │   ├── next.config.js │   ├── package.json │   ├── postcss.config.cjs │   ├── prettier.config.js │   ├── prisma │   │   ├── migrations │   │   ├── schema.prisma │   │   └── seed.js │   ├── public │   │   ├── favicon.ico │   │   ├── images │   │   └── locales │   ├── src │   │   ├── app │   │   ├── atoms │   │   ├── constants │   │   ├── contracts │   │   ├── env.js │   │   ├── i18n.ts │   │   ├── middleware.ts │   │   ├── providers │   │   ├── server │   │   ├── stories │   │   ├── styles │   │   ├── trpc │   │   └── utils │   ├── start-database.sh │   ├── tailwind.config.ts │   ├── tsconfig.json │   └── turbo.json ├── biome.json ├── bun.lockb ├── docs │   └── prompt-guide.md ├── instructions │   └── shopping_cart.md ├── lefthook.yml ├── package.json ├── packages │   ├── eslint-config │   │   ├── README.md │   │   ├── library.js │   │   ├── next.js │   │   ├── package.json │   │   └── react-internal.js │   ├── typescript-config │   │   ├── base.json │   │   ├── nextjs.json │   │   ├── package.json │   │   └── react-library.json │   └── ui │   ├── biome.json │   ├── package.json │   ├── postcss.config.cjs │   ├── src │   │   ├── alert.tsx │   │   ├── badge.tsx │   │   ├── button.tsx │   │   ├── carousel.tsx │   │   ├── carouselCard.tsx │   │   ├── form │   │   ├── iconButton.tsx │   │   ├── modal.tsx │   │   ├── nftCard.tsx │   │   ├── pageHeader.tsx │   │   ├── particle.tsx │   │   ├── productCard.tsx │   │   ├── skeleton.tsx │   │   ├── tooltip.tsx │   │   └── typography.tsx │   ├── tsconfig.json │   ├── tsconfig.lint.json │   └── turbo │   └── generators ├── prompts │   ├── generate-component.sudo │   ├── perplexity.sudo │   └── v0.sudo ├── pull_request_template.md └── turbo.json

[evgongora]

🙋🏻‍♂️