A modern and friendly online store dedicated to pampering your pets with the best accessories. At Bela & Luna Petshop, we carefully choose each accessory to offer you products that stand out for their quality, comfort, and style, because your pet deserves the best in every detail.
- Product Catalog: Organized by intuitive categories (Harnesses, Collars, Beds, Bowls, Toys, and Others).
- Interactive Animations: Charming details like dog paw prints that appear when interacting or scrolling through the page.
- Shopping Cart: Client-side functionality to add items to the cart.
- Frontend Checkout: Checkout process flow implemented at the visual and user interface level.
- Responsive Design: Fully adaptable to mobile devices, tablets, and desktop screens.
- CSS Architecture: Use of methodologies like BEM and pure CSS (native HTML5 and CSS3, without frameworks like Tailwind or Bootstrap).
- Frontend: React, HTML5, Vanilla CSS3 (BEM methodology), JavaScript
- Build Tools: Vite
- Backend/API: Node.js, Express
Prerequisites: Make sure you have Node.js (v18 or higher) installed.
- Clone the repository and navigate to the project folder.
- Install the dependencies:
npm install
- Run the development server:
npm run dev
- Open your browser to the URL provided by Vite (usually
http://localhost:5173/).
Primary Colors:
- White:
#FFFFFF - Green:
#00CC99 - Pink:
#E2006E - Brown:
#790438
Secondary Colors:
- Purple:
#8C52FF - Yellow:
#FFEE88 - Light Blue:
#00C2CB
Una tienda en línea moderna y amigable dedicada a consentir a tus mascotas con los mejores accesorios. En Bela & Luna Petshop, elegimos cuidadosamente cada accesorio para ofrecerte productos que destacan por su calidad, confort y estilo, porque tu mascota merece lo mejor en cada detalle.
- Catálogo de Productos: Organizado por categorías intuitivas (Arneses, Collares, Camas, Comederos, Juguetes y Otros).
- Animaciones Interactivas: Detalles encantadores como huellas de perritos que aparecen al interactuar o desplazarse por la página.
- Carrito de Compras: Funcionalidad del lado del cliente para agregar artículos al carrito.
- Checkout Frontend: Flujo de proceso de pago implementado a nivel visual y de interfaz de usuario.
- Diseño Responsivo: Completamente adaptable a dispositivos móviles, tablets y pantallas de escritorio.
- Arquitectura CSS: Uso de metodologías como BEM y CSS puro (HTML5 y CSS3 nativo, sin frameworks como Tailwind o Bootstrap).
- Frontend: React, HTML5, Vanilla CSS3 (metodología BEM), JavaScript
- Herramientas de Construcción: Vite
- Backend/API: Node.js, Express
Requisitos previos: Asegúrate de tener Node.js (v18 o superior) instalado.
- Clona el repositorio e ingresa a la carpeta del proyecto.
- Instala las dependencias:
npm install
- Ejecuta el servidor de desarrollo:
npm run dev
- Abre tu navegador en la URL indicada por Vite (normalmente
http://localhost:5173/).
Colores Principales:
- Blanco:
#FFFFFF - Verde:
#00CC99 - Rosado:
#E2006E - Café:
#790438
Colores Secundarios:
- Morado:
#8C52FF - Amarillo:
#FFEE88 - Celeste:
#00C2CB


