Aplicación web Quiniela Formula 1 con Vue, TypeScript, Laravel y MySQL.

31/01/2023
Portada de la aplicación web quiniela fórmula uno con laravel y vue3
447
Views

Saludos, desde hoy empezaré a compartir el desarrollo paso a paso de una aplicación web como un proyecto personal, para actualizar una versión existente de una aplicación de quiniela para la Fórmula 1 donde estoy registrado con unos amigos desde hace ya 2 años

Desde esta publicación en adelante iré mostrando el paso a paso del desarrollo de la aplicación web, desde la instalación de las diferentes herramientas hasta su despliegue en un servidor, donde se subirá para ser probado y utilizado en la próxima temporada de la fórmula uno.

En que consistirá la aplicación web.

La aplicación consta de crear por cada carrera de la temporada un pronóstico de como será el resultado final de los diferentes eventos de un fin de semana de competición, a esto le llamamos una quiniela, estos eventos consta de una fase de clasificación y una carrera en un fin de semana normal, pero hay fines de semana especiales que constas de una fase de clasificación para la cerrera sprint, la segunda fase es la carrera sprint, y por último la carrera.

Los usuarios deben cargar su pronóstico final de la carrera, indicando como cree que será el resultado final desde el primer lugar hasta el décimo, por cada acierto obtendrá puntos que se irán acumulando carrera a carrera, al final de la temporada los primeros 5 usuarios con más puntos se repartirán el acumulado de la suma del pago de las inscripciones de los usuarios.

Para poder participar se debe cancelar una inscripción, y la suma de todas ellas se repartirá a los ganadores mencionados, esta inscripción será entre 5 a 10 dólares de manera de ponerle más emoción a la competencia en la aplicación web que será desarrollada.

Módulos que conformaran la aplicación.

La aplicación consiste en crear un panel administrativo para gestionar los módulos necesarios para el funcionamiento de la misma, estos módulos serían:

  1. Gestión de usuarios.
    • Desde este módulo poder crear, editar, eliminar usuarios de la aplicación.
  1. Gestión de pistas.
    • Desde este módulo serán registradas las pistas del campeonato en curso.
  1. Gestión de equipos.
    • Desde este módulo se podrá crear, editar, y eliminar a los equipos del campeonato en curso.
  1. Gestión de pilotos.
    • Este módulo consiste en la gestión de pilotos activos para el campeonato en curso, estos pilotos serán asociados a un equipo.
  1. Gestión de carreras.
    • Acá en este módulo podremos crear, editar o eliminar las carreras del campeonato en curso, agregando la fecha, hora, y pista donde será el evento.
  1. Gestión de pagos.
    • Los usuarios de la aplicación deben cancelar una inscripción de una suma mínima para participar, esto con el fin de poner un poco más de emoción a la competencia.
    • Desde acá los usuarios pueden cargar su pago, con su comprobante, y el administrador podrá revisar y validar estos pagos para activar el usuario en la aplicación.
  1. Gestión de quinielas.
    • Este módulo es el más completo de la aplicación y en donde se basa toda la lógica de la misma.
    • Los usuarios podrán crear sus quinielas por carrera o editarla siempre y cuando estén en el tiempo límite para ser cargada.
    • Los usuarios podrán ver el historial de sus quinielas por carrera, los puntos obtenidos por quiniela, al igual que ver la quiniela de los demás participante después de ya haber culminado la carrera de ese fin de semana.

Herramientas a utilizar para el desarrollo de la aplicación web.

Para el frontend, estoy utilizando las tecnologías de vanguardia de JavaScript, incluyendo Vue 3 como framework principal, TypeScript para una mayor claridad y consistencia en el código, Axios para realizar peticiones HTTP y Bootstrap para proporcionar un diseño atractivo y profesional.

Para el backend, he elegido Laravel 9 con PHP 8.2 como framework y MySQL como gestor de base de datos. Juntas, estas herramientas me permitirán crear una aplicación full-stack sólida y fácil de usar para los usuarios finales.

Roles de usuario que serán utilizados en la aplicación web.

La aplicación consistirá en dos tipos de usuarios, el usuario con rol «Administrador» y un usuario con rol «Usuario – Jugador». El administrador tendrá acceso a todos los módulos de la aplicación, y el usuario jugador solo tendrá acceso a su cuenta, crear sus pronósticos, y consultar el historial de quinielas de la competencia, así como el resultado de puntos.

Link a repositorios y enlace al Template HTML que utilizaré para el frontend.

Por acá dejaré enlace a los repositorios donde iré subiendo los avances que estaré publicando en los diferentes Posts en el blog, después de este, como mencione anteriormente, iré paso a paso mostrando los avances del desarrollo para aquellos que quizás están buscando un tutorial para ver como es crear una aplicación de uso real, sencilla, pero que puedan aprender o guiarse y también si deseen aportar con sus comentarios, serán bienvenidos.

Frontend: https://github.com/th3khan/frontend-quiniela-f1

Backend: https://github.com/th3khan/api-quiniela-f1

Hasta luego, estoy emocionado de ver cómo mi proyecto evolucionará y crecerá muchas gracias por leer.

Article Categories:
Programación · Desarrollo web · Laravel · MySQL · PHP · Quiniela F1 · TypeScript · Vue

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

El tamaño máximo de subida de archivos: 2 MB. Puedes subir: imagen, texto. Los enlaces a YouTube, Facebook, Twitter y otros servicios insertados en el texto del comentario se incrustarán automáticamente. Suelta el archivo aquí