Proyecto integrador Mercado Liebre 📦

Mercado Liebre es una aplicación web de comercio electrónico donde los usuarios pueden buscar productos, registrarse, iniciar sesión y ver ofertas basadas en sus visitas anteriores.

Tabla de Contenidos

1. _Inicio
2. _{Características}
3. _{Tecnologías Utilizadas}
4. _{Estructura del Proyecto}
5. _{Hoja de Ruta}
6. _Instalación
• _{Servidor local en Visual Studio Code}
• _{Despliegue en Servidor Web Render}

📑 Características

• Página principal: Muestra un banner y secciones de productos basados en visitas anteriores y ofertas.
• Formulario de Registro: Permite a los usuarios crear una cuenta proporcionando su información personal.
• Formulario de Inicio de Sesión: Permite a los usuarios iniciar sesión en su cuenta.
• Barra de Búsqueda: Permite a los usuarios buscar productos en el sitio.

👨🏻‍💻 Tecnologías Utilizadas

• HTML5: Estructura de la aplicación.
• CSS3: Estilos para la aplicación.
• JavaScript: Funcionalidades dinámicas en la aplicación.
• Node.js y Express: Backend para manejar las solicitudes del formulario de registro y login.

📂 Estructura del Proyecto

El proyecto está organizado de la siguiente forma:

.
├── public/
│   ├── css/
│   │   └── styles.css            # Estilos CSS de la aplicación
│   └── images/
│        ├── img-cafetera-moulinex.jpg
│        ├── img-home-banner.jpg
│        ├── img-macbook-pro-2019.jpg
│        ├── img-samsung-galaxy-s10.jpg
│        ├── img-tv-samsung-smart.jpg
│        ├── logo-mercado-liebre.svg
│        └── logo.png              # Logo de la aplicación                 
├── views/
│   ├── index.html                # Página principal de la aplicación
│   ├── login.html                # Formulario de inicio de sesión
│   └── register.html             # Formulario de registro de usuario
├── app.js                        # Archivo principal del servidor Node.js
├── package.json                  # Archivo de configuración del proyecto y dependencias
├── README.md                     # Documentación del proyecto
└── .gitignore                    # Archivos y directorios a ignorar por Git

🎯 Hoja de Ruta

Clase	Descripción	Hoja de ruta	Enlace
N17	Estructura de un sitio web	☑ ⬜ ⬜ ⬜ ⬜ ⬜	Ver
N18	Agregando estilos	☑ ☑ ⬜ ⬜ ⬜ ⬜	Ver
N19	Diseño adaptativo	☑ ☑ ☑ ⬜ ⬜ ⬜	Ver
N20	Posicionamiento avanzado FlexBox	☑ ☑ ☑ ☑ ⬜ ⬜	Ver
N21	Formularios	☑ ☑ ☑ ☑ ☑ ⬜	Ver
N22	Organizando Elementos	☑ ☑ ☑ ☑ ☑ ☑	Ver

🚀 Instalación

💻 Servidor local en Visual Studio Code

1. Clona el repositorio en tu máquina local con el siguiente comando a continuación:

   git clone https://github.com/fabrixh/Mercadoliebre.git
   

2. Instala las dependencias necesarias:

   npm install
   

3. Inicia el servidor local:

   node app.js
   

4. Abre tu navegador web y escribe en la barra de direcciones:

     http://localhost:3030/

🌐 Despliegue en Servidor Web Render

1. Crea una cuenta en Render usando el enlace a continuación. Si tienes más preguntas, consulta la Guía Detallada Deploy.pdf.

      https://dashboard.render.com/create?type=web

   Continúa en New WebServer > Build and deploy from a Git repository > Next

2. Puedes copiar el enlace del repositorio debajo en Public Git repository:

      https://github.com/fabrixh/Mercadoliebre

3. Define la configuración con los comandos más importantes:

   • Name: descriptivo del proyecto
   • Build Command: npm install
   • Start Command: npm start

4. Ejecutar el boton Deploy Web Service Si todo se cumple, el servidor estará en línea con el enlace para acceder al sitio. O accede a este enlace para verlo activo:

      https://ml-fabrixh.onrender.com/

(Volver arriba)