Skip to content

juanmaxdev/PadelClub

Repository files navigation

Introducción

Este proyecto consiste en una aplicación destinada a la gestión de un club de pádel: pistas, academia, torneos, noticias etc.


Equipo de Desarrollo

Este proyecto ha sido realizado de forma colaborativa entre 4 personas:


Principales funcionalidades

Un usuario registrado en el sistema puede:

  • Registrarse / Iniciar sesión en el sistema.
  • Editar sus datos personales.
  • Reservas pista en el club.
  • Cancelar una reserva.
  • Encontrar jugados con quién jugar.
  • Inscribirse en la academia del club.

Un administrador registrado en el sistema puede:

  • Crear un torneo.
  • Crear una noticia.

Estructura del Proyecto

El proyecto está organizado de la siguiente manera:

Proyecto/
├── backend/                # Código fuente del backend
│   ├── appsettings.json    # Configuración de la aplicación
│   ├── Program.cs          # Punto de entrada del backend
|   ├── Controller   
|   ├── Service
|   ├── Repository
|   ├── Model                  
│   └── ...                 # Otros archivos relacionados con el backend
├── frontend/               # Código fuente del frontend
│   ├── src/                # Código fuente de la aplicación React
│   │   ├── app/            # Páginas principales de la aplicación
│   │   ├── components/     # Componentes reutilizables
│   │   └── ...             # Otros directorios y archivos
│   ├── public/             # Archivos estáticos
│   ├── package.json        # Dependencias del frontend
│   └── ...                 # Otros archivos relacionados con el frontend
└── README.md               # Documentación del proyecto

Para comenzar

Instalación de componentes (frontend y backend):

Frontend (React + Next.js)

  1. Verificar que Node.js esté instalado:

     node -v
    
  2. Crear el proyecto con Next.js:

     npx create-next-app@19.0.0 nombre-del-proyecto
    

Backend (.NET)

  1. Compilar programa:

     dotnet build
    

Tecnologías Utilizadas

Base de datps

  • Microsoft SQL Server: Sistema de gestión de bases de datos relacional desarrollado por Microsoft.

Frontend

  • React: Biblioteca para construir interfaces de usuario.
  • Next.js: Framework para aplicaciones React con renderizado del lado del servidor.
  • Tailwind: Para los estilos de la aplicación.
  • Flowbite: Biblioteca de componentes de interfaz.
  • Mui: Biblioteca de componentes de interfaz.
  • Lucide react: Biblioteca de iconos de código abierto.

Backend

  • .NET: Framework para construir aplicaciones web robustas.
  • Swagger: Herramienta para documentar y probar APIs.
  • Cors: Política de seguridad implementada por los navegadores web para controlar qué recursos pueden ser solicitados desde un dominio diferente al de origen.
  • JWT: Formato compacto y seguro para transmitir información entre partes como un objeto JSON.
  • Entity frameworks: ORM de Microsoft que permite trabajar con bases de datos utilizando clases y objetos.

Ejecución del Proyecto

Backend

Desde la carpeta del backend, ejecutar:

dotnet run

Frontend

Desde la carpeta del frontend, ejecutar:

npm run dev

Arquitectura del Proyecto: MVC (Modelo-Vista-Controlador)

¿Qué es MVC?

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes principales para organizar el código de forma clara y mantenible. Esta división permite desarrollar y mantener la aplicación de manera más eficiente, facilitando también el trabajo en equipo.

  • Modelo se encarga de la lógica de negocio y del acceso a los datos, como guardar o consultar información en una base de datos.
  • Vista es la parte que muestra la información al usuario, como una interfaz web o una pantalla.
  • Controlador actúa como intermediario entre ambos: recibe las acciones del usuario, las procesa con ayuda del modelo y devuelve la vista adecuada.

¿Por qué vamos a usar MVC?

  • Para separar bien las responsabilidades.
  • Para que la lógica del negocio esté clara y no mezclada con la base de datos o los controladores.
  • Para que el sistema sea más fácil de mantener, escalar y entender.
  • Para facilitar la división del trabajo en el equipo.
  • Para mejorar la organización del código.

Pruebas

Frontend

  • Jest: Framework de pruebas para JavaScript.
  • Testing Library: Utilizado para pruebas de componentes React.

Para ejecutar las pruebas del frontend:

npm run test

Backend

  • MSTest: Framework de pruebas para .NET.

Para ejecutar las pruebas del backend:

dotnet test

Configuración de Entorno

Frontend

El archivo frontend/.env debe contener las siguientes variables de entorno:

NEXT_PUBLIC_API_URL=http://localhost:5000

Backend

El archivo backend/appsettings.json debe configurarse con los valores necesarios para la conexión a la base de datos y otros servicios.

About

Esta aplicación web permite gestionar un club de pádel con reservas de pistas, inscripción a la academia y búsqueda de jugadores. Los administradores pueden crear torneos dinámicos y publicar noticias que se muestran en la página principal. Todo el sistema facilita la organización y comunicación entre usuarios y gestores del club.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages