# Panel de Creador y Login/Registro

En esta carpeta se encuentra principalmente desaroollado el panel de creador, pero tiene dos pestañas: "Jugador" y "Creador".

## Características

- La pestaña "Jugador" muestra las sesiones disponibles para jugar.
- La pestaña "Creador" permite a los usuarios crear nuevas sesiones, duplicar sesiones existentes y ver estadísticas de sesiones.
- Cada sesión muestra el nombre del juego, la fecha y hora de la sesión, y tres íconos para jugar, duplicar y ver estadísticas respectivamente. (aún no tiene funcionalidades los botones)
- Los usuarios pueden navegar entre las pestañas utilizando el componente de navegación "Nav".
- La paginación se utiliza para mostrar un número limitado de sesiones por página.
- Solo es el aspecto del panel de creador, aun no contiene funcionalidades.
- Login/Registro funcional.

## Tecnologías utilizadas

- React.js: biblioteca de JavaScript para construir interfaces de usuario.
- React Bootstrap: una implementación de Bootstrap para React.
- Material-UI: un framework de diseño y componentes para React.
- React Router: biblioteca de enrutamiento para React que permite la navegación entre páginas, en este caso las "Tabs"

## Instalación

1. Navega al directorio del proyecto: `cd panel_creador`.
2. Instala las dependencias: `npm install`.

## Ejecución

1. Ejecuta la aplicación en modo desarrollo: `npm start`.
2. Abre tu navegador y ve a `http://localhost:3000` para ver el panel del creador.

## Estructura del proyecto



- `src/`: Contiene todos los archivos de código fuente.
  - `login-registro/`: Contiene los archivos de código fuente del login y registro.
    - `Components/`: Contiene los componentes reutilizables utilizados en diferentes partes de la aplicación.
    - `CSS/`: Contiene los archivos de estilos CSS.
  - `panel-creador/`: Contiene los archivos de código fuente del panel del creador.
    - `Components/`: Contiene los componentes reutilizables utilizados en diferentes partes de la aplicación.
    - `CSS/`: Contiene los archivos de estilos CSS.
  - `img/`: Contiene las imágenes utilizadas en la aplicación.
  - `App.js`: El componente raíz de la aplicación.
  - `index.js`: Archivo de entrada de la aplicación.

## Demo
<img src="src/panel_creador/img/jugador.jpg" alt="Panel del jugador" width="1080px" height="720px">

<!-- otro salto de página -->
<div style="page-break-after: always;"></div>

<!-- Otra imagen con tamaño ajustado -->
<img src="src/panel_creador/img/creador.jpg" alt="Panel del creador" width="1080px" height="720px">

