Construyendo un CV Interactivo: Arquitectura, lógica y diseño.

Si eres desarrollador, te propongo que diseñes tu propio CV interactivo. Te hará diferenciarte del resto de profesionales. Además en él podrás ir subiendo actualizaciones de nuevos proyectos, formación y nuevos certificaciones adquiridas. En este vídeo tutorial os hablo de las ventajas y desventajas. Os muestro mi proyecto terminado y una breve introducción de como he diseñado el código del mismo. Además que herramientas he utilizado para su despliegue.

Por otra parte en esta publicación aprovecho para extenderme más y enseñaros todos los pasos que he realizado para crear este proyecto y finalmente desplegarlo. Os facilitaré al final de la publicación los enlaces de los repositorios para que podáis ver el código mucho más detenidamente.

Índice de temas 

1. Arquitectura general del proyecto 

2. Fase 1: Backend Node.js + TypeScript 

3. Fase 2: Frontend en React + TypeScript 

4. Fase 3: Base de datos local → MongoDB Atlas 

5. Fase 4: Subir el  Frontend al repositorio de GitHub 

6. Fase 5: Despliegue Backend en Render 

7. Conclusiones y mejoras futuras 

1. Arquitectura General del Proyecto 

• Backend: Node.js + TypeScript 

• Frontend: React + TypeScript 

• Base de datos: MongoDB (local → exportación → Atlas) 

• Servicios gratuitos:  

• Render (Backend) 

• GitHub (Frontend) 

• MongoDB Atlas (Cluster Free Tier) 

2. Fase 1 — Backend: Node.js + TypeScript 

Pasos para crear el proyecto de Node.js a través de su consola. 

Creamos el directorio

mkdir mi-backend 

Acceso al directorio

cd mi-backend 

Inializamos el proyecto

npm init -y 

Definimos el tipo de proyecto

npm i -D typescript ts-node ts-node-dev @types/node @types/express @types/cors 

Instalamos

npm i -D @types/mongoose 

Abrir el proyecto con tu editor de código. Crear el archivo tsconfig.json y añadir el código que encontrarás en el enlace del repositorio del Backend. 

El paso siguiente es definir la estructura de carpetas dentro de la carpeta “src” 

Carpeta Models

Definimos los modelos de datos y el esquema de Mongoose que valida esos mismos campos en MongoDB. 

Carpeta Routes

Es la ruta que envía al frontend todos los datos del DevCard desde MongoDB. 

1. Conectar con la colección devcard usando el modelo. 

2. Leer el documento del CV (DevCardModel.find()). 

3. Devolver el primer documento al frontend. 

Carpeta Scripts

Es un script manual de comprobación que se ejecuta fuera del servidor para revisar si todas las imágenes usadas en las skills realmente existen en la carpeta local del proyecto. 

Carpeta Seed

Es un script de inicialización de datos (seed) que: 

1. Carga la variable de entorno MONGODB_URI desde .env. 

2. Conecta con MongoDB Atlas usando Mongoose. 

3. Accede directamente a la colección devcard (sin usar el modelo, para evitar validaciones). 

4. Borra todos los documentos existentes en esa colección. 

5. Inserta un único documento completo con todos los datos que se van actualizando  

Este archivo se usa para resetear la colección y cargar el contenido completo del CV de cero. 

Api.ts 

Es la función central que usa el servidor para conectarse a MongoDB. . Recibe la URL de conexión (url), normalmente la de MongoDB Atlas. 

App.ts 

Este archivo se encarga de configurar Express, cargar el router, sirve las imágenes y arranca la API tras conectarse a MongoDB. 

3.Fase 2 — Frontend: React + TypeScript 

Creación del proyecto a través de la consola de Node.js 

Creamos el proyecto

npm create vite@latest nombre-proyecto 

Seleccionamos

React 

TypeScript 

Acceso al directorio

cd nombre-proyecto 

Instalamos las dependencias

npm install

Instalamos

npm install bootstrap@latest

Ejecutamos

npm run dev

En el archivo de main.tsx añadimos el siguiente código
import ‘bootstrap/dist/css/bootstrap.min.css’

Carpeta Public

Creamos la carpeta image donde alojamos todas esas imágenes, iconos y recursos usados dentro de la aplicación. 

Carpeta Components

En esta carpeta creamos todos los archivos de los componentes que forman parte de la aplicación

Son: 

• EducationCard.tsx – Formación académica 

• IntroCard.tsx – Presentación personal 

• LanguageCard.tsx – Idiomas 

• PersonalInfoCard.tsx – Información básica 

• ProjectCard.tsx – Proyectos destacados 

• SkillBackCard.tsx – Habilidades Back-End 

• SkillCloudCard.tsx – Habilidades en la nube 

• SkillFrontCard.tsx – Habilidades Front-End 

• SkillToolCard.tsx – Herramientas y tecnologías 

Carpeta Services

En esta carpeta va el archivo que hace la llamada al backend para obtener los datos del DevCard. Es el servicio que obtiene los datos completos del DevCard desde tu API y los devuelve al frontend. 

Carpeta Types

Define todos los tipos TypeScript que usa el frontend para representar los datos del DevCard y las props que cada componente recibe. 

Archivo App

Es el núcleo del frontend: obtiene los datos del CV desde el backend y construye toda la interfaz con ellos. 

El resto de archivos que también son relevantes se podrán ver a través de los enlaces de los repositorios.

2. Fase 3 — BD local -> Mongo BD Atlas 

1. Instalar MongoDB en local 

Para poder crear, probar y cargar tus datos en una base de datos local.

2. Guardar la cadena local en una variable de entorno 

En un archivo del tipo .env, el cual después ocultaremos a través del archivo  gitignore.

3. Crear una cuenta en MongoDB Atlas 

Accedes al panel, creas un cluster y obtienes tu cadena de conexión remota. 

4. Migrar tu base de datos local a Atlas

Se puede realizar con herramientas de Atlas como Atlas Live Migration.

5. Sustituir la cadena antigua por la nueva

En el archivo .env, sustituimos la cadena de conexión local por la nueva.

6. El backend ya conecta automáticamente a Atlas

Muy importante el probar que todo este bien y que conecte correctamente a la base de datos online.

3. Fase 4 — Subir el Frontend y el Backend a GitHub 

Creamos dos repositorios. Uno destinado para el Backend el cual usaremos para conectar con nuestra cuenta de Render y otro para alojar el Frontend, que será el que usaremos para conectar con el backend y poder desplegar correctamente la página.

Usaremos los la consola de GitBash, con todos los comandos necesarios para subir nuestros archivos a nuestros repositorios

El propio GitHub nos dirá que comandos deberemos de seguir cuando creamos un nuevo repositorio.

Fase 5 — Despliegue del Back en Render 

Estos son los pasos a seguir para poder desplegar en Render 

1. Subir cada parte del proyecto a GitHub 
El frontend está en un repositorio separado y actualizado. 
El backend está en otro repositorio distinto 

2. Crear una cuenta gratuita en Render 
Render permite desplegar una aplicación de manera gratuita con su cuenta Free. 

3. Desplegar el backend en Render 
En Render creé un nuevo servicio de tipo “Web Service” y seleccioné el repositorio donde está el backend. Si te registras en Render vinculando a tu cuenta de GitHub, será mucho más fácil la conexión.
El servicio toma ese repositorio, instala dependencias y usa el comando de inicio para arrancar la API. 
En la configuración añadí la variable de entorno MONGODB_URI, que contiene la cadena de conexión a MongoDB Atlas. 
Render se encarga de conectar a Atlas e iniciar la API automáticamente. 

4. Desplegar el frontend en Render 
El frontend está en un repositorio separado. 
Para desplegarlo utilicé un servicio de tipo “Static Site”. 
Render construye el proyecto con el comando de build de Vite y sirve los archivos estáticos. 
El frontend hace las peticiones al backend usando la URL generada por Render. 

5. Comunicación entre front y back 
El frontend consume los datos llamando al endpoint /api/devcard del backend desplegado. 
Cada vez que realizo cambios en el repositorio correspondiente, Render vuelve a desplegar la parte que ha cambiado. 

6. Estructura final del despliegue 
– Backend  desplegado como Web Service desde un repositorio específico. 
– Frontend desplegado como Static Site desde un repositorio separado. 
– Los dos servicios funcionan de manera independiente, pero conectados. 
– La API de Render sirve la base de datos almacenada en MongoDB Atlas. 

CONCLUSIONES 

Aunque el CV interactivo es una gran opción para diferenciarte de los demás desarrolladores, no esta de más el tener un CV digital a parte, para que estén conectados. 

En un CV digital puedes añadir un código QR para acceder al CV interactivo y además enfocarlo de una manera mucho más especifica para proyectos personales, formación y certificaciones.

Mi siguiente paso es actualizar todo el diseño de la aplicación. Añadir nuevas funcionalidades y mejorarlo visualmente. Además de probar a desplegarlo en Azure.

• Autor/a: Luis Infantes Lacal
• Máster: Desarrollo Full Stack + Arquitecturas Cloud 
• Centro: Tajamar Tech 
• Año académico: 2025-2026 
• Código / recursos utilizados / Otros datos de interés:
• Repositorio acceso Backend: https://github.com/Luis-Infantes/DevCard
• Repositorio acceso Frontend: https://github.com/Luis-Infantes/DevCardWeb
• LinkedIn: https://www.linkedin.com/in/luis-infantes-artdesign/