# PROYECTO 4: La Ratita Gamer - App React Restaurante Bootcamp Desarrollo Web Fullstack UDD, Cohorte 10

Índice

1. Introducción
2. Demostración
3. Instalación
4. Uso
5. Stack Tecnológico
6. Mockups/Bocetos
7. Aprendizajes

---

1. Introducción

El proyecto "La Ratita Gamer" es una aplicación desarrollada por el equipo conformado por Sebastián Aburto, Diego Pizarro, José Ángel Valdés y Paulina Moraga como parte del Proyecto 4 del Bootcamp UDD DWFS10. La aplicación tiene como objetivo proporcionar una experiencia completa para los usuarios al presentar un restaurante que combina la gastronomía de una pizzería con la temática de los videojuegos.

2. Demostración

3. Instalación

Para instalar y ejecutar este proyecto localmente, sigue estos pasos:

1. Clona el repositorio: git clone https://github.com/Pepeoawvh/Proyecto4DWFS.git
2. Ingresa al directorio del proyecto: cd Proyecto4DWFS
3. Instala las dependencias: npm install
4. Ejecuta la aplicación: npm run buildt

4. Uso

El proyecto "La Ratita Gamer" es una página web que presenta un restaurante ficticio especializado en pizzas. Aquí se detalla cómo utilizar las diferentes secciones de la aplicación:

Menú de Pizzas

• Descripción: La sección de menú muestra una lista de productos que consisten en variedades de pizzas. Estos productos son cargados desde un archivo .json previamente creado.
• Funcionalidad: Al hacer clic en la sección de Menú, se despliegan las distintas opciones de pizzas disponibles con sus respectivas descripciones y precios.

Reservas

• Descripción: La sección de Reservas permite a los usuarios realizar reservas de mesa con detalles específicos.
• Funcionalidad: Los usuarios pueden completar un formulario detallado con campos para la fecha, hora, número de personas y datos de contacto. Estos datos se envían y se almacenan en una base de datos Firestore de Firebase para su recepción y posterior gestión por parte del restaurante.

Encuéntranos (Integración con Google Maps API)

• Descripción: La sección Encuéntranos muestra información sobre la ubicación y horarios del restaurante, integrando un mapa de Google mediante la Google Maps API.
• Funcionalidad: Los usuarios pueden visualizar el mapa interactivo en la página web, el cual les permite ubicar fácilmente la dirección del restaurante, obtener indicaciones y realizar consultas in-app utilizando la funcionalidad proporcionada por Google Maps.

Estas funcionalidades se encuentran integradas en la página web para brindar una experiencia completa a los usuarios que deseen explorar el menú, realizar reservas detalladas o encontrar la ubicación del restaurante de manera interactiva.

5. Stack Tecnológico

• React.js
• Vite
• Firebase
• Api Externa: Google Maps API
• Tailwind CSS**
• Git
• npm

6. Mockups/Bocetos

Para visualizar cómo esperábamos que quedara el proyecto, se crearon los siguientes bocetos:

• Mockup de la Página de Inicio
• Mockup del Menú de Pizzas
• Mockup del Formulario de Reservas
• Mockup de la Página 'Encuéntranos'

7. Aprendizajes

Durante el desarrollo del proyecto, el equipo adquirió conocimientos significativos:

1. Uso de Vite: Facilitó la configuración del entorno de desarrollo, proporcionando una experiencia más ágil y rápida.
2. React: Se exploraron y aplicaron conceptos fundamentales de React.js, incluyendo componentes, props y hooks.
3. Firebase: Se aprendió a utilizar Firebase para el almacenamiento de datos en tiempo real.