⚽ Barrio Gol

Plataforma web para la gestión de torneos, equipos y jugadores de fútbol barrial. El sistema incorpora autenticación segura mediante JWT, control de acceso con rutas privadas en backend y frontend, comunicación en tiempo real a través de sockets y gestión de archivos multimedia.

Este proyecto fue desarrollado como resultado de un año de trabajo continuo durante el programa Tecnólogo del SENA, en el marco de nuestra formación profesional. A lo largo de su desarrollo, se aplicaron buenas prácticas de desarrollo web moderno, utilizando Vue.js en el frontend y FastAPI en el backend, integrando ambas capas con una base de datos MySQL.

Durante el proceso, se implementaron y exploraron tecnologías complementarias como Node.js, Vite para la construcción y optimización del proyecto, y CSS puro para el diseño responsivo mediante media queries, garantizando compatibilidad y usabilidad en distintos dispositivos.

Mi rol dentro del equipo fue Full Stack Developer, siendo responsable de la integración entre frontend y backend, la administración y modelado de la base de datos, así como la implementación de funcionalidades clave, entre ellas el envío automático de correos electrónicos durante el proceso de registro de usuarios.

---

🚀 Tecnologías

Backend

• Python 3.11
• FastAPI
• SQLAlchemy
• MySQL
• JWT (python-jose)
• Autenticación con cookies
• bcrypt (hash de contraseñas)
• Socket.IO (tiempo real)

Frontend

• Vue 3
• Vue Router
• Axios
• JWT en cookies / localStorage

---

🔐 Seguridad y Autenticación

✔ Login con JWT ✔ Token firmado con HS256 ✔ Payload con:

• sub (correo del usuario)
• exp (expiración)

✔ Contraseñas hasheadas con bcrypt ✔ Private Routes protegidas en backend y frontend ✔ Middleware de validación de token

---

📂 Estructura del Proyecto (Backend)

backend/
│── venv/
│── vista.py
│── modelo.py
│── schemas.py
│── conexion.py
│── private_routes.py
│── requirements.txt
│── .env
│── images_container/
│── uploads/

---

🧪 Requisitos Previos

• Python 3.11.x
• MySQL activo
• Node.js (para frontend)

---

⚙️ Instalación Backend (PASOS IMPORTANTES)

1️⃣ Clonar el repositorio

git clone https://github.com/tu-usuario/Barrio-Gol.git
cd Barrio-Gol/backend

---

2️⃣ Crear entorno virtual

python -m venv venv

Activar:

Windows

venv\Scripts\activate

Linux / Mac

source venv/bin/activate

---

3️⃣ Instalar dependencias

pip install -r requirements.txt

📌 Nota importante: este proyecto usa un requirements.txt limpio (solo dependencias principales). pip instala automáticamente las dependencias internas.

---

4️⃣ Variables de entorno (.env)

Crear archivo .env en /backend:

SECRET_KEY=piniasHello
ALGORITHM=HS256
DATABASE_URL=mysql+mysqlconnector://user:password@localhost/registro

---

5️⃣ Configuración de la Base de Datos (MySQL)

Para que el sistema funcione correctamente, es obligatorio crear la base de datos manualmente antes de iniciar el backend. El conector de MySQL y el ORM dependen de la existencia de esta base para realizar el mapeo de los modelos y generar automáticamente los esquemas (tablas).

Abre tu terminal de MySQL o una herramienta como MySQL Workbench / phpMyAdmin.

Ejecuta el siguiente comando SQL:

SQL CREATE DATABASE barriogol; [!IMPORTANT] ¿Por qué este paso es necesario? > El backend utiliza un conector que busca específicamente el nombre de la base de datos definida en la cadena de conexión. Una vez detectada, el sistema se encarga de sincronizar los modelos de Python/Node con la base de datos para crear las tablas, relaciones e índices automáticamente. Sin este paso previo, la conexión fallará y el servidor no podrá arrancar.

6️⃣ Ejecutar el servidor

uvicorn vista:app --reload

Servidor disponible en:

http://127.0.0.1:8000

---

🔒 Rutas Privadas (Backend)

El proyecto incluye:

• Dependencias Depends(get_current_user)
• Validación del token JWT
• Expiración automática

Archivo clave:

private_routes.py

---

🔐 Rutas Privadas (Frontend)

Guard global con Vue Router: ✔ Protege rutas privadas

---

📦 Manejo de Dependencias (Python)

✔ Se usa:

fastapi
uvicorn
sqlalchemy
python-jose[cryptography]
bcrypt
python-dotenv
mysql-connector-python
firebase-admin
python-multipart

📌 Buenas prácticas:

• NO usar pip freeze en producción
• Solo dependencias directas
• Profesional y mantenible

---

📡 Tiempo Real (Socket.IO)

Permite:

• Mensajes en tiempo real
• Notificaciones
• Chats

---

📁 Archivos Estáticos

Soporte para:

• Imágenes
• Videos
• Logos

Configurados con:

app.mount("/images_container/...", StaticFiles(...))

---

🧠 Estado del Proyecto

✔ Login / Registro ✔ JWT + Cookies ✔ Rutas privadas ✔ Sockets ✔ Multimedia ✔ Arquitectura profesional

---

🧑‍💻 Autor

Kevin Beltrán Proyecto full stack con FastAPI + Vue 3

---

⭐ Recomendaciones

• Usar .env en producción
• Activar HTTPS
• Rotar SECRET_KEY
• Validar expiración del token

---

⚽ Barrio Gol – Tecnología al servicio del fútbol barrial