Fullstack Developer – Coding Challenge

Node.js + TypeScript + React + TypeScript

📋 Información General

Duración: 4-6 horas
Tecnologías: Node.js, TypeScript, React, TypeScript
Nivel: Mid Fullstack Developer
Fecha: Junio 2025

🎯 Objetivo

Desarrollar una aplicación completa de gestión de tareas (Task Manager) que demuestre competencias en desarrollo fullstack moderno, buenas prácticas de código, arquitectura limpia y manejo de estados.

📝 Descripción del Proyecto

Crear un sistema de gestión de tareas con las siguientes funcionalidades:

Backend (Node.js + TypeScript)

API RESTful para gestión de tareas
Autenticación y autorización básica
Validación de datos
Manejo de errores
Base de datos (puede ser in-memory o SQLite)

Frontend (React + TypeScript)

Interfaz de usuario moderna y responsiva
Gestión de estado
Formularios con validación
Comunicación con API
Manejo de errores y loading states

🔧 Requisitos Técnicos

Backend Requirements

1. Configuración Base

// Estructura de carpetas sugerida
src/
├── controllers/
├── middleware/
├── models/
├── routes/
├── services/
├── types/
├── utils/
└── app.ts

2. Endpoints Requeridos

// Autenticación
POST /api/auth/login
POST /api/auth/register

// Tareas
GET    /api/tasks          // Obtener todas las tareas del usuario
POST   /api/tasks          // Crear nueva tarea
GET    /api/tasks/:id      // Obtener tarea específica
PUT    /api/tasks/:id      // Actualizar tarea
DELETE /api/tasks/:id      // Eliminar tarea
PATCH  /api/tasks/:id/toggle // Cambiar estado de completada

3. Modelos de Datos

interface User {
  id: string;
  email: string;
  name: string;
  password: string; // hasheada
  createdAt: Date;
}

interface Task {
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
  dueDate?: Date;
  userId: string;
  createdAt: Date;
  updatedAt: Date;
}

4. Middleware Requerido

Autenticación JWT
Validación de entrada
Manejo de errores globales
Logger de requests
CORS

Frontend Requirements

1. Componentes Principales

// Estructura de componentes sugerida
src/
├── components/
│   ├── common/
│   ├── auth/
│   └── tasks/
├── hooks/
├── services/
├── types/
├── utils/
└── App.tsx

2. Páginas/Vistas

Login/Register
Dashboard de tareas
Formulario de crear/editar tarea
Vista de detalle de tarea

3. Funcionalidades Frontend

Autenticación con persistencia
Lista de tareas con filtros (todas, completadas, pendientes)
Crear, editar y eliminar tareas
Marcar tareas como completadas
Filtrar por prioridad
Ordenar por fecha de creación/vencimiento
Búsqueda de tareas
Responsive design

📊 Criterios de Evaluación

Backend (40 puntos)

Arquitectura y Organización (10 pts)

Estructura de carpetas clara y lógica
Separación de responsabilidades
Uso de patrones de diseño apropiados
Configuración de entorno

Implementación API (15 pts)

Endpoints funcionando correctamente
Validación de datos de entrada
Manejo adecuado de errores HTTP
Respuestas consistentes
Documentación de API

TypeScript (10 pts)

Tipado correcto y completo
Interfaces bien definidas
Uso de generics cuando sea apropiado
Configuración de tsconfig.json

Seguridad (5 pts)

Autenticación JWT implementada
Validación de autorización
Sanitización de inputs
Headers de seguridad básicos

Frontend (40 puntos)

Arquitectura React (15 pts)

Estructura de componentes lógica
Hooks customizados
Manejo de estado apropiado
Reutilización de componentes

TypeScript (10 pts)

Props tipadas correctamente
Interfaces para API responses
Tipado de eventos y handlers
Configuración de tsconfig.json

UX/UI (10 pts)

Integración API (5 pts)

Comunicación efectiva con backend
Manejo de errores de red
Autenticación persistente

Código y Buenas Prácticas (20 puntos)

Calidad de Código (10 pts)

Código limpio y legible
Nomenclatura consistente
Funciones pequeñas y enfocadas
Comentarios cuando sea necesario
Configuración de linting (ESLint/Biome) funcionando
Código formateado consistentemente
Configuración de VSCode incluida

Testing (5 pts)

Tests unitarios básicos
Tests de integración
Coverage razonable

Documentación (5 pts)

README con instrucciones claras
Scripts de setup
Documentación de API
Comentarios en código complejo

🚀 Entregables

1. Código Fuente

Repositorio Git con commits descriptivos
Separación clara entre backend y frontend
Archivos de configuración incluidos
Configuración de linting/formateo (ESLint/Prettier o Biome)
Configuración de VSCode (.vscode/settings.json y extensions.json)

2. Documentación

# Task Manager

## Instalación
- Pasos para setup local
- Variables de entorno requeridas
- Comandos para iniciar desarrollo

## API Documentation
- Endpoints disponibles
- Ejemplos de requests/responses
- Códigos de error

## Frontend
- Componentes principales
- Flujo de navegación
- Estados de la aplicación

3. Scripts de Desarrollo (Ejemplo)

// package.json backend
{
  "scripts": {
    "dev": "ts-node-dev src/app.ts",
    "build": "tsc",
    "start": "node dist/app.js",
    "test": "jest",
    "lint": "eslint . --ext .ts",
    "lint:fix": "eslint . --ext .ts --fix",
    "format": "prettier --write \"src/**/*.{ts,js,json}\"",
    "format:check": "prettier --check \"src/**/*.{ts,js,json}\""
  }
}

// package.json frontend
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "lint": "eslint . --ext ts,tsx",
    "lint:fix": "eslint . --ext ts,tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
  }
}

4. Configuración de Linting y Formateo (REQUERIDO)

Opción A: ESLint + Prettier (Tradicional)

// .eslintrc.json (backend)
{
  "extends": [
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "warn",
    "no-console": "warn",
    "prefer-const": "error"
  }
}

// .eslintrc.json (frontend)
{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Opción B: Biome.js (Moderno - Recomendado)

// biome.json (raíz del proyecto)
{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExcessiveCognitiveComplexity": "error"
      },
      "style": {
        "noNonNullAssertion": "warn",
        "useConst": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingComma": "es5"
    }
  }
}

// Scripts adicionales para Biome
"scripts": {
  "lint": "biome lint ./src",
  "lint:fix": "biome lint --apply ./src",
  "format": "biome format --write ./src",
  "check": "biome check ./src",
  "check:fix": "biome check --apply ./src"
}

5. Configuración de VSCode (REQUERIDO)

.vscode/settings.json

{
  "editor.defaultFormatter": "biomejs.biome", // o "esbenp.prettier-vscode"
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "typescript.preferences.quoteStyle": "single",
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

.vscode/extensions.json

{
  "recommendations": [
    "biomejs.biome", // o "esbenp.prettier-vscode" + "dbaeumer.vscode-eslint"
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-json",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-eslint" // si usas ESLint
  ]
}

🛠 Tecnologías Permitidas

Backend

Requeridas: Node.js, TypeScript, Express.js
Opcionales:
- Base de datos: SQLite, PostgreSQL, MongoDB
- ORM: Prisma, TypeORM, Mongoose
- Validación: Joi, Yup, Zod
- Testing: Jest, Supertest

Frontend

Requeridas: React, TypeScript, Vite
Opcionales:
- Estado: Context API, Zustand, Redux Toolkit
- Styling: Tailwind CSS, Styled Components, CSS Modules
- HTTP: Axios, Fetch API
- Testing: Vitest, React Testing Library

⏰ Tiempo Estimado por Sección

Sección	Tiempo Estimado
Setup inicial y configuración	30 min
Backend API básica	2 horas
Frontend componentes base	2 horas
Integración y testing	1 hora
Documentación y refinamiento	30 min
Total	6 horas

📋 Checklist de Entrega

Configuración y Herramientas

Configuración de linting (ESLint + Prettier o Biome)
Scripts de lint y format funcionando
Configuración de VSCode (.vscode/ folder)
Extensions recomendadas documentadas
Pre-commit hooks (opcional pero valorado)

Pre-entrega

Backend

Todos los endpoints funcionan
Autenticación implementada
Validaciones en su lugar
Manejo de errores

Frontend

Todas las vistas implementadas
Integración con API completa
Responsive design
Manejo de estados de carga

Documentación

Instrucciones de instalación
Variables de entorno documentadas
API documentada
Decisiones técnicas explicadas

🎯 Bonus Points (Opcional)

Implementaciones Avanzadas (+10 pts)

Paginación en lista de tareas
Filtros avanzados (fecha, prioridad, texto)
Drag & drop para reordenar tareas
Notificaciones push/toast
Modo oscuro/claro

Técnicas (+5 pts)

Implementación de middleware de rate limiting
Cache de respuestas API
Lazy loading de componentes
Service Worker para offline functionality
Docker configuration
Pre-commit hooks con Husky + lint-staged
GitHub Actions para CI/CD básico

📞 Contacto y Dudas

Tiempo para consultas: Las primeras 2 horas después de recibir la prueba

Canales de comunicación:

Email: [email protected]
Discord (user): iantxd

Dudas frecuentes:

¿Puedo usar librerías adicionales? Sí, siempre que estén justificadas
¿Es necesario deploy? No, evaluación local es suficiente
¿Qué nivel de testing esperan? Tests básicos para funcionalidades críticas

🏆 Criterios de Aprobación

Mínimo para aprobar: 60/100 puntos

Distribución:

Excelente: 85-100 pts
Muy bueno: 70-84 pts
Bueno: 60-69 pts
Insuficiente: < 60 pts

Esta prueba está diseñada para evaluar competencias técnicas reales en un contexto práctico. Enfócate en demostrar buenas prácticas, código limpio y funcionalidad completa.

¡Buena suerte! 🚀

lk321/coding_challenge.md

Node.js + TypeScript + React + TypeScript

📋 Información General

🎯 Objetivo

📝 Descripción del Proyecto

Backend (Node.js + TypeScript)

Frontend (React + TypeScript)

🔧 Requisitos Técnicos

Backend Requirements

1. Configuración Base

2. Endpoints Requeridos

3. Modelos de Datos

4. Middleware Requerido

Frontend Requirements

1. Componentes Principales

2. Páginas/Vistas

3. Funcionalidades Frontend

📊 Criterios de Evaluación

Backend (40 puntos)

Arquitectura y Organización (10 pts)

Implementación API (15 pts)

TypeScript (10 pts)

Seguridad (5 pts)

Frontend (40 puntos)

Arquitectura React (15 pts)

TypeScript (10 pts)

UX/UI (10 pts)

Integración API (5 pts)

Código y Buenas Prácticas (20 puntos)

Calidad de Código (10 pts)

Testing (5 pts)

Documentación (5 pts)

🚀 Entregables

1. Código Fuente

2. Documentación

3. Scripts de Desarrollo (Ejemplo)

4. Configuración de Linting y Formateo (REQUERIDO)

Opción A: ESLint + Prettier (Tradicional)

Opción B: Biome.js (Moderno - Recomendado)

5. Configuración de VSCode (REQUERIDO)

.vscode/settings.json

.vscode/extensions.json

🛠 Tecnologías Permitidas

Backend

Frontend

⏰ Tiempo Estimado por Sección

📋 Checklist de Entrega

Configuración y Herramientas

Pre-entrega

Backend

Frontend

Documentación

🎯 Bonus Points (Opcional)

Implementaciones Avanzadas (+10 pts)

Técnicas (+5 pts)

📞 Contacto y Dudas

🏆 Criterios de Aprobación