Aplicación web de EXDEV Club, desarrollada con React y TypeScript para presentar información pública de la organización, sus miembros y sus proyectos.
La aplicación utiliza una API independiente para obtener los datos almacenados en Notion.
🚧 Desarrollo local funcional
La aplicación funciona actualmente en entorno local.
La web y la API están separadas en repositorios independientes.
Frontend
web-exdev
API
API-exdev-web
La API se encarga de comunicarse con Notion. La web consume los endpoints necesarios para mostrar la información.
La aplicación está organizada en dos proyectos independientes:
┌─────────────────┐
│ Notion │
└────────┬────────┘
│
│ Notion API
▼
┌─────────────────┐
│ Hono API │
│ Cloudflare │
│ Workers │
└────────┬────────┘
│
│ HTTP / JSON
▼
┌─────────────────┐
│ React Web │
│ EXDEV Club │
└─────────────────┘
El frontend no se conecta directamente a Notion.
El flujo de datos es:
Notion
↓
API EXDEV
↓
Servicios del frontend
↓
Componentes React
↓
Interfaz
- React
- TypeScript
- CSS
- Fetch API
El backend se encuentra en un repositorio independiente y utiliza:
- Hono
- TypeScript
- Cloudflare Workers
- Wrangler
- Notion API
El repositorio contiene el proyecto frontend dentro de frontend/.
web-exdev/
│
├── frontend/
│ ├── src/
│ │ ├── assets/
│ │ ├── config/
│ │ ├── pages/
│ │ ├── services/
│ │ ├── shared/
│ │ ├── types/
│ │ ├── utils/
│ │ ├── App.tsx
│ │ ├── App.css
│ │ ├── index.tsx
│ │ └── index.css
│ │
│ ├── package.json
│ └── ...
│
├── package.json
├── package-lock.json
├── tsconfig.json
└── .gitignore
Las páginas principales de la aplicación se encuentran dentro de:
frontend/src/pages/
Ubicación:
pages/Home/
Archivos principales:
Home.tsx
Home.css
Página principal y punto de entrada de la web.
Ubicación:
pages/about/
Archivos:
AboutPage.tsx
AboutPage.css
Página informativa sobre EXDEV Club, su historia, propósito y contexto.
Ubicación:
pages/apply/
Archivos:
apply.tsx
apply.css
Formulario destinado a las postulaciones al club.
Cuando la postulación se envía correctamente, se muestra un modal de confirmación.
Ubicación:
pages/Members/
Listado de miembros obtenido mediante la API.
La sección permite:
- visualizar miembros;
- buscar información;
- aplicar filtros;
- visualizar roles;
- consultar información detallada;
- mostrar fotografías o elementos visuales alternativos.
Members.tsx
MemberCard.tsx
MemberDrawer.tsx
MemberCard
Tarjeta utilizada para mostrar la información resumida de cada miembro.
MemberDrawer
Panel lateral que muestra información detallada del miembro seleccionado.
pages/Members/components/
├── Chip.tsx
├── ContactButton.tsx
├── CustomOption.tsx
└── MemberFilters.tsx
Estos componentes apoyan la visualización, filtrado y acciones relacionadas con los miembros.
pages/Members/hooks/
├── useMemberFilters.ts
└── useMembers.ts
Se utilizan para gestionar la carga de miembros y la lógica de filtrado.
pages/Members/css/
├── MemberCard.css
├── MemberDrawer.css
└── Members.css
Ubicación:
pages/Projects/
Listado de proyectos obtenido mediante la API.
Cada proyecto puede mostrar:
- nombre;
- imagen;
- descripción;
- estado;
- áreas;
- responsables.
Projects.tsx
ProjectDrawer.tsx
Projects
Muestra el listado de proyectos.
ProjectDrawer
Panel lateral con información detallada del proyecto seleccionado.
ProjectDrawer.css
Projects.css
Además de las páginas principales, existen componentes reutilizables o asociados a funcionalidades específicas.
Ubicación:
pages/Modal/
Archivos:
Modal.tsx
Modal.css
Modal utilizado por la sección Apply para confirmar visualmente que una postulación fue enviada correctamente.
Incluye:
- mensaje de confirmación;
- recurso multimedia animado;
- control para cerrar el modal.
No corresponde a una página independiente, sino a un componente utilizado durante el proceso de postulación.
Los elementos reutilizables de la aplicación se encuentran en:
src/shared/
shared/icons/
├── GitHubIcon.tsx
├── InstagramIcon.tsx
└── LinkedIn.tsx
Contiene iconos reutilizables utilizados en diferentes partes de la interfaz.
shared/layouts/
├── header/
└── footer/
Contiene la navegación principal de la aplicación.
Contiene la información y enlaces mostrados en la parte inferior de las páginas.
La comunicación con el backend está separada de los componentes visuales.
La estructura principal es:
Componente React
↓
Service
↓
apiClient
↓
API EXDEV
↓
Notion
Los servicios se encuentran en:
src/services/
services/apiClient.ts
Centraliza la comunicación HTTP con la API.
services/memberService.ts
Contiene las operaciones relacionadas con los miembros.
services/projectService.ts
Contiene las operaciones relacionadas con los proyectos.
Esta separación evita colocar llamadas HTTP directamente dentro de los componentes visuales.
La configuración relacionada con la API se encuentra en:
src/config/api.ts
Este archivo centraliza la dirección utilizada por el frontend para comunicarse con la API.
De esta forma, la URL del backend no necesita estar repetida en múltiples componentes.
Los tipos utilizados por la aplicación se encuentran en:
src/types/
Actualmente existen:
member.ts
memberOption.ts
project.ts
svg.d.ts
Estos tipos ayudan a mantener estructuras consistentes entre la API y los componentes React.
Los recursos visuales se encuentran en:
src/assets/
assets/img/
Contiene logotipos, imágenes utilizadas por la web y otros recursos visuales.
assets/svg/
Contiene iconos y otros recursos SVG.
assets/gif/
Contiene recursos multimedia utilizados por la aplicación.
Las funciones auxiliares se encuentran en:
src/utils/
Actualmente existe:
sanitizeText.js
Estas funciones se mantienen separadas de los componentes para facilitar su reutilización.
La aplicación utiliza CSS para definir la apariencia de los componentes y páginas.
Entre los elementos visuales implementados se encuentran:
- tarjetas;
- drawers;
- filtros;
- etiquetas;
- botones;
- navegación;
- diseño responsive.
La interfaz contempla diferentes temas visuales:
- modo claro;
- modo oscuro.
Los recursos visuales relacionados se encuentran principalmente en:
src/assets/img/
src/assets/svg/
La aplicación está diseñada para funcionar en distintos tamaños de pantalla.
Los componentes de miembros y proyectos incluyen ajustes específicos para dispositivos móviles.
También se contemplan adaptaciones para:
- drawers;
- tarjetas;
- filtros;
- navegación;
- contenido de los miembros y proyectos.
Clona el repositorio:
git clone <URL_DEL_REPOSITORIO>Entra en la carpeta del proyecto:
cd web_exdev_v1Instala las dependencias:
npm installLa aplicación está ubicada dentro de la carpeta
frontend/. Utiliza elpackage.jsoncorrespondiente al proyecto para ejecutar los comandos definidos.
Ejecuta el proyecto utilizando el script definido en el package.json correspondiente.
Por ejemplo:
npm startLa dirección local dependerá de la configuración del proyecto.
Durante el desarrollo, la web debe poder comunicarse con la API de EXDEV.
Para visualizar datos procedentes de Notion, la web necesita que la API esté disponible.
La API utiliza actualmente:
GET /
GET /miembros
GET /proyectos
La API es responsable de comunicarse con Notion.
La web no necesita conocer ni almacenar el token de Notion.
El frontend no debe contener:
- tokens de Notion;
- credenciales privadas;
- claves secretas;
- contraseñas.
Las credenciales de Notion pertenecen exclusivamente al backend.
Los secretos utilizados por la API se almacenan en el entorno correspondiente y no forman parte de este repositorio.
Para ejecutar el proyecto en otro ordenador:
- Clonar el repositorio.
- Instalar las dependencias.
- Ejecutar la aplicación.
- Ejecutar también la API si se quieren visualizar datos reales provenientes de Notion.
Los dos proyectos pueden mantenerse en carpetas independientes:
EXDEV-CLUB/
├── web_exdev_v1/
└── API-exdev-web/
La API necesita sus propias variables de entorno para poder acceder a Notion.
La web no necesita las credenciales de Notion.
| Área | Estado |
|---|---|
| React | 🟢 |
| TypeScript | 🟢 |
| Home | 🟢 |
| About | 🟢 |
| Apply | 🟢 |
| Members | 🟢 |
| Projects | 🟢 |
| Modal de confirmación | 🟢 |
| API client | 🟢 |
| Integración con API | 🟢 |
| Responsive | 🟢 |
| Tema visual | 🟢 |
| Producción | ⚪ Pendiente |
La separación de responsabilidades es:
pages/
→ páginas y vistas
services/
→ comunicación con la API
types/
→ estructuras de datos
shared/
→ componentes reutilizables
config/
→ configuración
assets/
→ recursos visuales
utils/
→ funciones auxiliares
Esta organización permite mantener separadas la presentación, la comunicación con el backend, los tipos y los recursos compartidos.
La aplicación web parte de una implementación original desarrollada por Ian Battistoni (https://github.com/IanBattistoni), disponible originalmente en el repositorio (https://github.com/IanBattistoni/exdev-website).
El proyecto fue posteriormente adaptado y extendido para EXDEV Club.
Las modificaciones actuales incluyen, entre otras:
- adaptación de la interfaz;
- integración con la API de EXDEV Club;
- desarrollo de la API con Hono;
- integración con Notion;
- configuración para Cloudflare Workers.
El proyecto se encuentra actualmente en desarrollo.
Las siguientes etapas contemplan la preparación del entorno de producción y el despliegue de la API y la aplicación web.
Proyecto desarrollado para EXDEV Club.