Skip to content

leoreyes07/bela-and-luna-petshop

Repository files navigation


🇺🇸 English Version

Desktop View

Store desktop view (Example, replace this image)

Mobile View Mobile Cart

Mobile view and shopping cart

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.

Key Features

  • 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).

Technologies Used

  • Frontend: React, HTML5, Vanilla CSS3 (BEM methodology), JavaScript
  • Build Tools: Vite
  • Backend/API: Node.js, Express

Installation and Execution

Prerequisites: Make sure you have Node.js (v18 or higher) installed.

  1. Clone the repository and navigate to the project folder.
  2. Install the dependencies:
    npm install
  3. Run the development server:
    npm run dev
  4. Open your browser to the URL provided by Vite (usually http://localhost:5173/).

Color Palette and UI

Primary Colors:

  • White: #FFFFFF
  • Green: #00CC99
  • Pink: #E2006E
  • Brown: #790438

Secondary Colors:

  • Purple: #8C52FF
  • Yellow: #FFEE88
  • Light Blue: #00C2CB

🇺🇸 English | 🇪🇸 Español

Bela & Luna Petshop

Vista Desktop

Vista de la tienda en escritorio (Ejemplo, reemplazá esta imagen)

Vista Mobile Carrito Mobile

Vista móvil y carrito de compras

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.

Características Principales

  • 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).

Tecnologías Utilizadas

  • Frontend: React, HTML5, Vanilla CSS3 (metodología BEM), JavaScript
  • Herramientas de Construcción: Vite
  • Backend/API: Node.js, Express

Instalación y Ejecución

Requisitos previos: Asegúrate de tener Node.js (v18 o superior) instalado.

  1. Clona el repositorio e ingresa a la carpeta del proyecto.
  2. Instala las dependencias:
    npm install
  3. Ejecuta el servidor de desarrollo:
    npm run dev
  4. Abre tu navegador en la URL indicada por Vite (normalmente http://localhost:5173/).

Paleta de Colores y UI

Colores Principales:

  • Blanco: #FFFFFF
  • Verde: #00CC99
  • Rosado: #E2006E
  • Café: #790438

Colores Secundarios:

  • Morado: #8C52FF
  • Amarillo: #FFEE88
  • Celeste: #00C2CB

About

Pet shop e-commerce website built to showcase modern UI design and a seamless shopping experience for pet accessories.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors