Website de programaConNosotros

Este es el repositorio del website de PCN. El website está construido con Next.js. Podés contribuir al proyecto a través de pull requests. Revisa la información a continuación para comenzar a programar con nosotros! 🚀

📖 Guía para contribuir

1. Instalar Docker y Docker Compose en tu computadora.

2. Clonar el repositorio.

3. Crear archivo de variables de entorno con el nombre .env utilizando .env.template como base. Si no tenés acceso a las variables de entorno, podés usar las variables de entorno de desarrollo que están en el archivo .env.development.

4. Configurar la app de GitHub para poder autenticarse usando OAuth.

Setear esto como callback URL:http://localhost:3000/api/auth/callback/github

5. Levantar el servidor de desarrollo con Docker Compose. Utilizamos Docker para que no tengas que instalar Node.js ni ninguna otra dependencia en tu computadora. Para levantar el servidor, ejecutá el siguiente comando en la raíz del proyecto.

   docker-compose up

   El código dentro del contenedor de Docker se sincronizará con el de tu computadora automáticamente, por lo cual no hace falta ejecutar ningún comando adicional para ver los cambios que hagas en tu código.

   Si usas Visual Studio Code para desarrollar, hay una configuración para poder desarrollar usando los Dev Containers de Visual Studio Code, los cuales te permiten posicionar tu editor dentro del contenedor, y poder tener una experiencia de desarrollo similar a la que tendrías si estuvieras desarrollando el proyecto localmente en tu computadora sin utilizar Docker. Cuando abras el proyecto en Visual Studio Code, debería avisarte que podés desarrollar dentro del container, si aceptás, se configurará todo automáticamente para que puedas hacerlo.

6. Una vez dentro del container, tenes que ejecutar las migraciones de la base de datos con el siguiente comando:

   pnpm apply-migrations

   Tenes que usar pnpm si o si en este proyecto. Si usas npm o yarn, vas a tener problemas. Por favor, asegurate de usar pnpm para todo lo relacionado a las dependencias del proyecto.

7. Crea una nueva rama en Git para ir guardando tus cambios (la página se va refrescando automáticamente en tu browser, no hace falta que refresques manualmente).

8. Pusheá tus cambios a GitHub y crea una pull request hacia la rama testing, asegurate de que tenga una buena descripción explicando lo que hiciste, con capturas de pantalla o videos si incluyen cambios de UI.

   El nombre de la pull request debe tener el siguiente formato: [ID del ticket de Notion] - Título del ticket en Notion.

9. Si queres instalar dependencias de desarrollo, tenes que usar el siguiente comando:

   pnpm add NOMBRE_DEL_PAQUETE

Important

Todas las contribuciones deben ser realizadas a través de pull requests. No se aceptarán cambios directos en las ramas main y testing. Las pull requests serán revisadas y aprobadas por los administradores del repositorio, y deben solicitar merge a la rama testing, no main. Una vez aprobado el testing, se hará merge a main.

Note

Cada vez que quieras crear un commit, automáticamente se formateará el código con Prettier y se verificará que la app compile y el linter no encuentra errores. Si hay errores, no se podrá hacer commit. Esto se hace para mantener la calidad del código, pedimos disculpas por las demoras que esto pueda ocasionar al ejecutar el comando para crear un commit.

Note

Tenemos un channel en Discord para coordinar el desarrollo del website. Si no estás en el Discord, podes sumarte haciendo click acá.

Trabajo con la base de datos

• Para crear registros de prueba en la base de datos, tenes que ejecutar el siguiente comando:

  pnpm populate-database

• Si cambias algún modelo de base de datos, tenes que hacer una migración. Para eso, ejecutá el siguiente comando:

  pnpm create-migration NOMBRE_DE_LA_MIGRACION

• Si pulleaste los cambios de GitHub y hay nuevas migraciones, vas a tener que aplicarlas con el siguiente comando:

  pnpm apply-migrations

• Prisma ofrece un studio que permite visualizar la base de datos. Para acceder al studio, ejecutá el siguiente comando:

  pnpm prisma-studio

  Luego vas a poder acceder a la URL http://localhost:5555 en el navegador web y vas a poder ver la base de datos.

  

🛠️ Tech stack

• Docker (contenedores)
• Node.js (entorno de ejecución de JavaScript)
• pnpm (gestor de paquetes)
• TypeSript (lenguaje de programación)
• React.js (librería de JavaScript para construir interfaces de usuario)
• Next.js (framework de React.js)
• Tailwind CSS (estilos de la página)
• ESLint (linting del código)
• Husky (pre-commit hooks)
• Prettier (formateo del código)
• shadcn/ui (componentes reusables de React.js con Tailwind CSS)
• Git (control de versiones del código)
• GitHub (plataforma de desarrollo colaborativo)

📁 Estructura de archivos

La estructura de archivos del proyecto sigue las convenciones de Next.js:

.
├── src/                 # Directorio principal de la aplicación
│   ├── app/             # Páginas de la aplicación
│   ├── actions/         # Server actions de Next.js
│   ├── api/             # Rutas de API
│   ├── components/      # Componentes React reutilizables
│   └── lib/             # Funciones y utilidades compartidas
├── prisma/              # Configuración y migraciones de Prisma
├── public/              # Archivos estáticos accesibles públicamente
├── .env                 # Variables de entorno (no incluido en el repositorio)
├── .env.example         # Plantilla para variables de entorno
├── docker-compose.yml   # Configuración de Docker Compose
├── next.config.mjs       # Configuración de Next.js
├── package.json         # Dependencias y scripts del proyecto
└── tsconfig.json         # Configuración de TypeScript

📚 Aprender más

Para aprender más sobre Next.js, puedes revisar los siguientes recursos:

• Documentación de Next.js - aprender sobre las características y funcionalidades de Next.js.
• Learn Next.js - un tutorial interactivo de Next.js.