Kave Home es un proyecto web de comercio electrónico que ofrece una amplia variedad de productos de muebles y decoración. Este repositorio fue creado como parte de una prueba técnica para demostrar habilidades en desarrollo web y diseño accesible.
El objetivo de esta prueba técnica es diseñar e implementar el siguiente portal, siguiendo las directrices proporcionadas por el equipo de UX en Figma.
- Figma: Kave Challenge
- Productos destacados y categorías.
- Listas de favoritos para los usuarios.
- Accesibilidad mejorada con etiquetas ARIA.
- Diseño responsivo y amigable.
Asegúrate de tener Node.js y npm instalados en tu sistema.
-
Clona el repositorio:
git clone https://github.com/camibuldin/kavehome.git
-
Navega al directorio del proyecto:
cd kavehome -
Instala las dependencias:
npm install
-
Inicia el servidor de desarrollo:
npm run dev
-
Abre el navegador en http://localhost:3000 para ver la aplicación.
- Para añadir un producto a la lista de favoritos, haz clic en el icono del corazón en la tarjeta del producto.
- Para eliminar un producto de la lista de favoritos, haz clic de nuevo en el icono del corazón.
La aplicación incluye etiquetas ARIA para mejorar la accesibilidad y la experiencia de los usuarios con discapacidades.
/app: Contiene los componentes principales del proyecto./public: Archivos públicos como imágenes y estilos./styles: Archivos de estilos CSS y módulos.
layout.tsx: Componente de diseño global que incluye el encabezado y pie de página.page.tsx: Página principal que muestra los productos destacados.favoritos.tsx: Lista de productos favoritos del usuario.productos.tsx: Página que muestra todos los productos disponibles.details/[id].tsx: Página de detalles de un producto específico.
Disfruté mucho desarrollando este proyecto para Kave Home. Fue un reto divertido e interesante que me permitió aprender y aplicar nuevas habilidades en Next.js, accesibilidad y diseño responsivo.