Este proyecto está construido con Next.js, una tecnología moderna que hace que las páginas web sean rápidas y fáciles de usar.
Esta es una aplicación web que te permite [breve descripción del propósito de la aplicación]. Está diseñada para ser fácil de usar y accesible para todos.
No te preocupes si no eres programador. Sigue estos pasos sencillos:
- Asegúrate de tener instalado Node.js en tu computadora
- Abre una ventana de terminal o símbolo del sistema
- Navega hasta la carpeta del proyecto
- Instala las dependencias necesarias para iniciar el servidor:
npm install # o puedes usar npm i- Ejecuta uno de estos comandos para iniciar el servidor:
npm run dev
# o si prefieres usar otras herramientas:
yarn dev
# o
pnpm dev
# o
bun dev- Abre tu navegador web y visita http://localhost:3000
¡Listo! Ahora deberías ver la página web funcionando en tu navegador.
Puedes explorar la página y todas sus funciones. Si quieres hacer cambios, puedes editar los archivos en la carpeta app, comenzando por app/page.tsx. La página se actualizará automáticamente cuando guardes los cambios.
- Diseño moderno y responsivo
- Carga rápida de páginas
- Experiencia de usuario intuitiva
- Fuentes optimizadas automáticamente con la familia tipográfica Geist
Si te interesa aprender sobre la tecnología detrás de esta página web:
- Documentación de Next.js - aprende sobre las características y API de Next.js
- Aprende Next.js - un tutorial interactivo para principiantes
El proyecto implementa un sistema de autenticación utilizando Supabase Auth:
1. Configuración de Middleware (middleware.ts)
- Intercepta todas las rutas y gestiona las sesiones automáticamente
- Utiliza
@supabase/ssrpara mantener las sesiones sincronizadas entre servidor y cliente - Excluye archivos estáticos y optimiza el rendimiento
2. Cliente de Supabase Server-Side (lib/supabase/server.ts)
- Crea instancias del cliente de Supabase usando cookies del servidor
- Maneja la persistencia de sesiones con Next.js cookies API
- Utiliza la directiva
"use server"para operaciones del servidor
3. Verificación de Roles (app/actions/auth.ts)
// Verificación de usuario administrador
export async function isAdmin();
// Verificación de usuario autenticado
export async function isAuthUser();4. Protección de Rutas
- Rutas con prefijo
(auth-users)/requieren autenticación (login) - Rutas con prefijo
(admin)/requieren permisos de administrador (rol de profile) - Cada layout verifica los permisos antes de renderizar el contenido
Server Components:
- Todos los componentes en
/app/components/dashboard/son Server Components - Se ejecutan en el servidor y pueden acceder directamente a la base de datos
- Ejemplo:
CompetitionsGrid.tsxobtiene datos sin API routes
Server Actions:
- Ubicadas en
/app/actions/con la directiva"use server" - Permiten mutaciones de datos directamente desde client components
- Utilizan
useActionStatehook para manejo de estado y formularios.(Basandose en codigo de Ramos UC Frontend)
- Ejemplo de flujo:
// En el componente (client)
const [state, action] = useActionState(ActionLogin, initialState);
// La action se ejecuta en el servidor
("use server");
export async function ActionLogin(prevState, formData) {
// Lógica de autenticación en el servidor
}1. Suspense en Layouts:
<Suspense fallback={<p>Checking admin access...</p>}>
<AdminChecker>{children}</AdminChecker>
</Suspense>2. Suspense en Componentes de Datos:
<Suspense fallback={<div>Loading teams...</div>}>
<TeamsGrid />
</Suspense>3. Patrones de Loading:
- Boundaries por sección: Cada componente que solicite datos tiene su propio Suspense
- Loading UI descriptivo: Mensajes específicos para cada tipo de contenido
- Fallbacks no bloqueantes: Los usuarios ven contenido parcial mientras carga el resto
Si tienes preguntas o encuentras algún problema con la página, no dudes en contactarnos a través de [información de contacto].
La forma más sencilla de publicar esta página web es usar Vercel, la plataforma de los creadores de Next.js.
Ellos hacen que publicar tu sitio web sea tan fácil como hacer unos pocos clics.
