E-Commerce Product Page with Cart Functionality
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 38/100
Línea de trabajo
Comienza localizando el punto de entrada de la página de productos y la configuración de estilos existente; después, revisa cómo se pueden cargar los datos de productos desde FakeStoreAPI o un archivo JSON. Implementa el listado de productos, la vista previa flotante del carrito, los controles de cantidad, el cálculo del total, la persistencia en localStorage y el toast de artículo añadido; se considerará completado cuando todas las interacciones del carrito indicadas funcionen tras recargar la página.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Build a dynamic e-commerce product page where users can:
- View a list of products fetched from a mock API (e.g., FakeStoreAPI or a JSON file).
- Add products to a cart with a button.
- Remove products from the cart from both the product listing and cart preview.
- See a floating cart preview that updates in real-time when items are added or removed.
- Use localStorage to persist the cart items across page reloads.
- Quantity Selector: Allow users to increase/decrease item quantity inside the cart.
- Total Price Calculation: Display the total cost of items in the cart.
- Toast Notifications: Show a small alert (e.g., "Item added to cart") when a product is added.
Requirements & Technologies
React: Use functional components and hooks (useState, useEffect).
Tailwind CSS: Style the product grid, buttons, and floating cart using Tailwind’s utility classes.
LocalStorage: Store cart data so that users don’t lose their cart on refresh.
Mock API (FakeStoreAPI or JSON file): Fetch product data dynamically instead of hardcoding it.
- Lenguaje dominante
- HTML
- Estrellas
- 10
- Forks
- 77
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de CommunityOfCoders/WebGenesis
-
Movie Night PlannerAbiertoHard Node + Express React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Hard Node + Express Vite React
Dificultad 4/5 3-5 días Aptitud para principiantes 45/100
-
Hard Node + Express Vite React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Flask Hard React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Framer Hard React
Dificultad 4/5 3-5 días Aptitud para principiantes 35/100
Todos los issues de CommunityOfCoders/WebGenesis
Issues similares
-
area-clientside-dartpad
Dificultad 2/5 1-3 horas Aptitud para principiantes 66/100
Los mantenedores suelen responder en 2 días
-
S: triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
Los mantenedores suelen responder en 2 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
apache/rocketmq-dashboard#7242 ·
Los mantenedores suelen responder en 3 días
-
dev-concern OS/Desktop release-notes/exclude
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
brave/brave-browser#60059 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
praetorianer777/Stator#465 ·
Los mantenedores suelen responder en 1 día