📊 CollabData

🌐 Live Demo: collabdata.vercel.app

🧠 Overview

CollabData es una plataforma web full-stack orientada a equipos de ingeniería y análisis de datos. Construida sobre el ecosistema Next.js 15 con App Router y respaldada por Firebase como infraestructura de backend, la aplicación permite a múltiples usuarios gestionar proyectos de análisis de datos, cargar conjuntos de datos, obtener visualizaciones de resultados y recibir sugerencias inteligentes generadas por modelos de IA a través de Google Genkit.

El proyecto combina una arquitectura moderna de frontend orientada a componentes (React + ShadCN UI + Tailwind CSS) con un backend serverless basado en Firebase Authentication y Firestore, y se despliega mediante Firebase App Hosting con integración de CI/CD a través de GitHub Actions. El entorno de desarrollo está configurado para trabajar con Firebase Studio (Project IDX).

⚙️ Features

Autenticación social completa mediante Firebase Authentication, con soporte para inicio de sesión con Google y GitHub, además de registro por email y contraseña.
Dashboard centralizado de proyectos con capacidades de búsqueda, filtrado y gestión visual de todos los análisis del usuario.
Flujo guiado de creación de análisis que permite definir configuración, seleccionar herramientas de procesamiento y cargar datasets paso a paso.
Espacio de trabajo interactivo por proyecto con una interfaz similar a un IDE para explorar la estructura de archivos de datos cargados.
Visualización dinámica de resultados que incluye paneles de KPIs, gráficos de análisis, tablas de estadísticas descriptivas y resúmenes ejecutivos.
Sugerencias de análisis impulsadas por IA mediante flujos de Genkit (Google AI) que interpretan las descripciones de los datasets y proponen estrategias de análisis.
Gestión de perfil de usuario con página de ajustes para actualizar información personal y preferencias de cuenta.
Sistema de hooks de estado para gestión reactiva del estado de los proyectos a lo largo de la sesión del usuario.
CI/CD integrado mediante GitHub Actions para automatizar el pipeline de validación y despliegue.
Soporte nativo para RSC (React Server Components) con tipado estricto a través de TypeScript en toda la codebase.

🛠️ Tech Stack

Categoría	Tecnología
Framework web	Next.js 15+ (App Router)
Lenguaje	TypeScript 5.x
Biblioteca UI	React + ShadCN UI
Estilos	Tailwind CSS 3.x
Iconografía	Lucide React
Backend & Auth	Firebase Authentication + Firestore
Hosting	Firebase App Hosting + Vercel
IA Generativa	Google Genkit (AI Flows)
Linting	ESLint + Prettier
CI/CD	GitHub Actions
Dev Environment	Firebase Studio / Project IDX
Package Manager	npm
Node versioning	`.nvmrc` (Node 18+)

📦 Installation

Prerrequisitos

Node.js v18 o superior (gestionado via .nvmrc)
npm v9+
Una cuenta en Firebase con un proyecto creado
Acceso a Google AI / Genkit (para los flujos de IA)

1. Clonar el repositorio

git clone https://github.com/devsebastian44/CollabData.git
cd CollabData

2. Usar la versión correcta de Node

nvm use

3. Instalar dependencias

npm install

4. Configurar variables de entorno

Crea un archivo .env.local en la raíz del proyecto con tus credenciales de Firebase y Genkit:

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

# Google AI / Genkit
GOOGLE_GENAI_API_KEY=

5. Configurar Firebase

Asegúrate de que tu proyecto Firebase esté correctamente referenciado en .firebaserc:

{
  "projects": {
    "default": "tu-proyecto-firebase-id"
  }
}

▶️ Usage

Servidor de desarrollo

npm run dev

Abre http://localhost:9002 en tu navegador.

El servidor Next.js corre en el puerto 9002 por configuración del proyecto.

Build de producción

npm run build
npm run start

Lint del código

npm run lint

Ejecutar Tests

El proyecto cuenta con una suite de pruebas automatizadas con Vitest:

# Ejecutar tests en modo watch
npm run test

# Ejecutar tests una sola vez
npm run test:run

Despliegue en Firebase App Hosting

El despliegue se gestiona automáticamente a través de GitHub Actions al hacer push a la rama principal. De forma manual:

firebase deploy

🤝 Contribución

¡Las contribuciones son bienvenidas! Sigue estos pasos para colaborar:

Realiza un Fork del proyecto.
Crea una rama para tu funcionalidad (git checkout -b feature/nueva-funcionalidad).
Realiza tus cambios y haz commit siguiendo los Conventional Commits.
Asegúrate de que los tests pasen (npm run test:run).
Abre un Pull Request detallando tus cambios.

Consulta CONTRIBUTING.md para más detalles.

📁 Project Structure

CollabData/
│
├── .github/
│   └── workflows/               # Pipelines de CI/CD con GitHub Actions
│
├── .idx/                        # Configuración de Firebase Studio / Project IDX
│
├── docs/                        # Documentación técnica adicional del proyecto
│
├── src/
│   ├── app/                     # Next.js App Router — páginas y layouts
│   │   ├── layout.tsx           # Layout raíz global de la aplicación
│   │   ├── page.tsx             # Landing page pública
│   │   ├── login/
│   │   │   └── page.tsx         # Página de autenticación (login / registro)
│   │   ├── dashboard/
│   │   │   ├── layout.tsx       # Layout compartido del área privada
│   │   │   ├── page.tsx         # Vista principal del dashboard de proyectos
│   │   │   └── new-analysis/
│   │   │       └── page.tsx     # Flujo de creación de nuevo análisis
│   │   └── projects/
│   │       └── [id]/
│   │           ├── page.tsx     # Espacio de trabajo interactivo del proyecto
│   │           └── results/
│   │               └── page.tsx # Panel de resultados y visualizaciones
│   │
│   ├── components/
│   │   ├── layout/              # Componentes estructurales (header, footer, nav)
│   │   ├── pages/               # Componentes específicos de cada vista
│   │   └── ui/                  # Biblioteca de componentes ShadCN UI reutilizables
│   │
│   ├── firebase/
│   │   ├── config.ts            # Inicialización y configuración del SDK de Firebase
│   │   ├── index.ts             # Exportación centralizada de servicios Firebase
│   │   ├── provider.tsx         # Context Provider de Firebase para toda la app
│   │   └── auth/
│   │       └── use-user.tsx     # Hook personalizado para obtener el usuario autenticado
│   │
│   ├── ai/
│   │   ├── genkit.ts            # Inicialización de la instancia de Genkit
│   │   └── flows/               # Definición de flujos de IA (análisis de datasets)
│   │
│   ├── hooks/
│   │   └── use-project-store.ts # Hook de gestión de estado global de proyectos
│   │
│   └── lib/
│       ├── utils.ts             # Funciones de utilidad generales (cn, formatters, etc.)
│       ├── mock-data.ts         # Datos de ejemplo para desarrollo y prototipado
│       └── types.ts             # Definiciones de tipos e interfaces TypeScript globales
│
├── public/                      # Archivos estáticos (imágenes, iconos, fonts)
│
├── .firebaserc                  # Referencia al proyecto Firebase activo
├── .gitignore                   # Exclusiones de Git (node_modules, .env.local, etc.)
├── .nvmrc                       # Versión de Node.js fijada para el proyecto
├── apphosting.yaml              # Configuración de Firebase App Hosting
├── components.json              # Configuración de ShadCN UI (estilo, aliases, iconos)
├── eslint.config.js             # Configuración de ESLint
├── next.config.ts               # Configuración de Next.js (remote images, etc.)
├── package.json                 # Dependencias y scripts del proyecto
├── postcss.config.mjs           # Configuración de PostCSS (requerido por Tailwind)
├── prettier.config.js           # Reglas de formateo de código
├── tailwind.config.ts           # Configuración de Tailwind CSS
└── tsconfig.json                # Configuración del compilador TypeScript

🔐 Security & DevSecOps

Este proyecto sigue las mejores prácticas de seguridad para aplicaciones modernas.

Autenticación y autorización

La autenticación está delegada a Firebase Authentication, garantizando manejo seguro de credenciales y sesiones.

Variables de Entorno y Control de Imágenes Externa

Variables Sensibles: Claves gestionadas en .env.local (excluido por .gitignore). Las claves de backend servidor (GOOGLE_GENAI_API_KEY) nunca se exponen.
Lista Blanca de Imágenes: next.config.ts restringe la carga de dominios remotos.

Firestore Security Rules

Se establecen Firestore Security Rules granulares usando validación de UID para proteger accesos individuales por proyecto y aislar la data de cada tenant en el entorno escalado.

🚀 Roadmap

Mejoras técnicas sugeridas a partir del análisis de la arquitectura actual del código:

Reemplazar mock-data.ts por Firestore real en todas las vistas: La presencia de mock-data.ts sugiere que algunas rutas podrían estar funcionando aún con datos estáticos; migrar completamente a Firestore para producción es una mejora prioritaria.
Implementar Firestore Security Rules con validación por UID de usuario para proteger el acceso a documentos de proyectos y datasets.
Añadir carga real de archivos a Firebase Storage: Incorporar el SDK de Storage para persistir los datasets subidos por los usuarios más allá de la sesión.
Ampliar los flujos de Genkit con soporte para múltiples modelos (Gemini Pro, Gemini Flash) y prompts configurables por tipo de dataset.
Tests de integración con Playwright o Cypress: Automatizar pruebas E2E para los flujos críticos (login, creación de análisis, visualización de resultados).
Escalar maxInstances en apphosting.yaml para soportar tráfico concurrente real en producción.
Modo colaborativo en tiempo real mediante Firestore onSnapshot para que múltiples usuarios vean actualizaciones en tiempo real dentro del mismo proyecto.
Exportación de resultados en formatos PDF, CSV o JSON desde el panel de visualización.
Internacionalización (i18n) con next-intl dado el origen multicultural del proyecto.

📄 License

Este proyecto está distribuido bajo la licencia MIT.

Esto significa que puedes usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y/o vender copias del software de forma libre, siempre que se incluya el aviso de copyright original.

👨‍💻 Author

Sebastián Zhunaula
_{Full-Stack Developer · Frontend Specialist · Data & AI Enthusiast}

Este proyecto forma parte de un portafolio de desarrollo web full-stack, demostrando integración moderna de Next.js 15, Firebase, ShadCN UI y Google Genkit en una plataforma de análisis de datos colaborativa lista para producción.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

📊 CollabData

🧠 Overview

⚙️ Features

🛠️ Tech Stack

📦 Installation

Prerrequisitos

1. Clonar el repositorio

2. Usar la versión correcta de Node

3. Instalar dependencias

4. Configurar variables de entorno

5. Configurar Firebase

▶️ Usage

Servidor de desarrollo

Build de producción

Lint del código

Ejecutar Tests

Despliegue en Firebase App Hosting

🤝 Contribución

📁 Project Structure

🔐 Security & DevSecOps

Autenticación y autorización

Variables de Entorno y Control de Imágenes Externa

Firestore Security Rules

🚀 Roadmap

📄 License

👨‍💻 Author

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 154 Commits
.github/workflows		.github/workflows
.idx		.idx
docs		docs
src		src
tests		tests
.env.example		.env.example
.firebaserc		.firebaserc
.gitignore		.gitignore
.nvmrc		.nvmrc
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prettier.config.js		prettier.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Folders and files

Latest commit

History

Repository files navigation

📊 CollabData

🧠 Overview

⚙️ Features

🛠️ Tech Stack

📦 Installation

Prerrequisitos

1. Clonar el repositorio

2. Usar la versión correcta de Node

3. Instalar dependencias

4. Configurar variables de entorno

5. Configurar Firebase

▶️ Usage

Servidor de desarrollo

Build de producción

Lint del código

Ejecutar Tests

Despliegue en Firebase App Hosting

🤝 Contribución

📁 Project Structure

🔐 Security & DevSecOps

Autenticación y autorización

Variables de Entorno y Control de Imágenes Externa

Firestore Security Rules

🚀 Roadmap

📄 License

👨‍💻 Author

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages