Skip to content

Latest commit

 

History

History
99 lines (70 loc) · 2.86 KB

README.md

File metadata and controls

99 lines (70 loc) · 2.86 KB

Viddeo

image

Tutorial Youtube 📽️

Descripción

Viddeo es un proyecto desarrollado como parte de una prueba técnica con el objetivo de construir una aplicación funcional de reproducción de videos. Aunque su enfoque principal es cumplir con los requisitos indicados, se han agregado funcionalidades adicionales para mejorar habilidades y explorar nuevas tecnologías. La mayor parte de la lógica se encuentra en el reproductor de video.

Características Principales

  • Listado de videos con opciones para visualizarlos en detalle.
  • Página de detalles del video:
    • Reproductor de video.
    • Información del creador del video.
    • Contador de reproducciones.
    • Botón de "like" (disponible solo para usuarios registrados y logueados).
    • Descripción del video.

Tecnologías Utilizadas

  • Next.js 15: Framework para aplicaciones React.
  • TailwindCSS: Estilizado con clases de utilidad.
  • Shadcn: Componentes para interfaces de usuario consistentes.
  • tRPC: API type-safe para comunicación entre frontend y backend.
  • TypeScript: Tipado estático.
  • MongoDB: Base de datos.
  • Prisma: ORM para interactuar con la base de datos.
  • Auth.js: Manejo de autenticación.

Configuración y Uso

Requisitos Previos

  • Node.js (v18 o superior).
  • Cuenta en MongoDB.

Instrucciones de Configuración

  1. Clona el repositorio y navega a la carpeta del proyecto:

    git clone https://github.com/CarlosPProjects/viddeo-pt.git
cd viddeo

  2. Instala las dependencias:

    npm install --force

  3. Configura las variables de entorno en un archivo .env:

    • Genera un secreto para Auth.js: 
      npx auth secret
    • Agrega la URL de tu base de datos de MongoDB.

  4. Configura Prisma:

    npx prisma generate
npx prisma db push

  5. Inicia el servidor de desarrollo:

    npm run dev

Despliegue en Vercel

  1. Configura los comandos de build:

    • Build Command: prisma generate && next build
    • Install Command: npm i --force

  2. Asegúrate de configurar las variables de entorno en el panel de configuración de Vercel.

Estructura de tRPC

Se han implementado los siguientes procedimientos de tRPC:

  • Auth:
    • Registro y login.
  • Like:
    • Obtener y crear likes (en base al ID del usuario y el ID del video).
  • User:
    • Crear usuario, validar contraseña, obtener usuario por ID o email.
  • Video:
    • Subir videos, listar videos, obtener detalles de un video, incrementar vistas.

Captura de Pantalla

Hero

Diagrama de flujo principal

Diagram