Este proyecto es un reto de la web Frontend Mentor que te proporciona el diseño de la web. Se trata de crear una tienda de dispositivos de audio.
-
Astro: He utilizado Astro como el framework principal del proyecto, creando la gran mayoría de componentes. Astro es un framework que no carga JavaScript por defecto en el cliente, es SSR (Server Side Rendering), y eso provoca que la carga de la web sea prácticamente instantánea.
-
React: He utilizado React para todos los componentes que sean interactivos con el usuario, es decir, todos aquellos componentes que disparen un evento.
-
CSS Modules: He usado CSS Modules para darle estilos a los componentes de React.
-
Zustand: He usado Zustand para manejar el estado global del carrito de compras. Zustand es una solución de gestión de estados pequeña, rápida y escalable. Su gestión de estado es centralizada y basada en acciones.
Esta es la estructura que he utilizado en este proyecto:
/
├── public/
│ └── assets/
│ └── folder/
│ └── image.jpg
│
├── src/
│ ├── components/
│ │ └── Component.astro
│ │ └── Component/
│ │ └── index.jsx
│ │ └── Component.module.css
│ ├── hooks/
│ │ └── useHook.js
│ ├── layouts/
│ │ └── Layout.astro
│ ├── lib/
│ │ └── products.json
│ ├── pages/
│ │ └── index.astro
│ │ └── [category]/
│ │ └── [slug].astro
│ ├── scripts/
│ │ └── script.js
│ ├── store/
│ │ └── store.js
│ └── utils/
│ └── util.js
└── package.json
