FinTrack Lite – Mini dashboard financiero en AWS (S3 + CloudFront)

Pequeño proyecto de dashboard financiero estático pensado para:

• Practicar conceptos básicos de arquitectura en AWS
• Tener un proyecto comercial/financiero en tu portafolio
• Desplegar un sitio real usando Amazon S3 y Amazon CloudFront
• Reforzar tu preparación para AWS Certified Solutions Architect – Professional

---

fintrack-lite-aws/
├─ README.md
├─ .gitignore
├─ website/
│  ├─ index.html
│  ├─ styles.css
│  └─ app.js
├─ docs/
│  ├─ 01-resumen-proyecto.md
│  ├─ 02-arquitectura.md
│  ├─ 03-despliegue-aws.md
│  ├─ 04-buenas-practicas.md
│  └─ 05-mejoras-futuras.md
├─ diagrams/
│  └─ arquitectura-fintrack-lite.png
└─ notes/
   └─ checklist-semanal.md

1. Descripción del proyecto

FinTrack Lite es un sitio web estático (HTML + CSS + JavaScript) que simula el dashboard financiero de una pequeña empresa de servicios.

🔗 Demo en vivo (S3 static website):
http://fintrack-lite-fer-12345.s3-website-us-east-1.amazonaws.com/

El dashboard muestra:

• ✅ Ingresos totales del periodo
• ✅ Gastos totales
• ✅ Utilidad neta
• ✅ Desempeño mensual (ingresos vs gastos)
• ✅ Tabla con detalle por mes (margen, utilidad, etc.)

La lógica y los datos están en el lado del cliente (JS), para que puedas concentrarte en la parte cloud:

• Hosting estático en Amazon S3
• Distribución global vía Amazon CloudFront
• Seguridad básica: versioning, encryption at rest, bucket policy pública controlada
• Logs de acceso de CloudFront en un bucket dedicado

📚 Documentación del proyecto

• 01 – Resumen del proyecto
• 02 – Arquitectura del proyecto
• 03 – Despliegue en AWS (paso a paso)
• 04 – Buenas prácticas en AWS
• 05 – Mejoras futuras y roadmap

---

2. Objetivos de aprendizaje

Este proyecto está pensado para un nivel principiante, pero con enfoque de architect:

• Entender cómo funciona static website hosting en S3
• Entender el papel de CloudFront como CDN y terminación HTTPS
• Practicar creación de:
  • Buckets S3 para contenido y logs
  • Distribuciones de CloudFront
  • Bucket policies básicas
• Ver en la práctica:
  • Versionado de objetos (S3 Versioning)
  • Cifrado transparente (SSE-S3)
  • Caché e invalidaciones en CloudFront
• Poder explicar este proyecto en una entrevista técnica o en tu portafolio

---

3. Arquitectura

3.1 Diagrama lógico

3.2 Descripción de componentes

• Amazon S3 (bucket principal)

  • Almacena el sitio estático (index.html, styles.css, app.js).
  • Está configurado con static website hosting.
  • Tiene versioning y encryption SSE-S3 activados.
  • Define una bucket policy para leer los archivos de forma pública (solo objetos, no el bucket completo).

• Amazon CloudFront

  • Distribuye el sitio globalmente desde Edge Locations.
  • Termina el tráfico HTTPS.
  • Hace caché del contenido estático.
  • Envía logs de acceso a un bucket de logs en S3.

• Amazon S3 (bucket de logs)

  • Recibe los logs de CloudFront.
  • Permite análisis posterior (Athena, etc. en una futura versión).

• IAM (no se ve en el diagrama)

  • Controla permisos para crear y administrar recursos.
  • El usuario/role que usas para el laboratorio debe tener permisos administrativos en el entorno de lab.

---

4. Servicios de AWS usados

• Amazon S3

  • Storage de objetos
  • Static website hosting
  • Versioning
  • Encryption (SSE-S3)
  • Logs (opcional)

• Amazon CloudFront

  • CDN global
  • HTTPS
  • Caché
  • Access logs hacia S3

• AWS IAM

  • Gestión de usuarios, roles y políticas

Opcional en una versión futura: Amazon Route 53 para usar tu propio dominio.

---

5. Requisitos previos

5.1 Técnicos

• Cuenta de AWS activa.

• Usuario IAM con permisos suficientes para:

  • Crear y modificar buckets S3
  • Crear distribuciones de CloudFront
  • Administrar políticas de bucket

5.2 Local

• Navegador web moderno (Chrome, Firefox, Edge, etc.).
• Editor de texto (VS Code, Sublime, etc.).

---

6. Estructura del proyecto

fintrack-lite/
 ├─ index.html      # Estructura del dashboard
 ├─ styles.css      # Estilos visuales
 └─ app.js          # Lógica y datos financieros de ejemplo

El proyecto es 100% estático. No hay backend. Todo el enfoque está en cloud hosting + arquitectura básica.

---

7. Configuración y ejecución local

1. Clona este repositorio o descarga los archivos:

   git clone https://github.com/TU-USUARIO/fintrack-lite-aws.git
   cd fintrack-lite-aws

2. Abre index.html en tu navegador (doble clic o “Open with Live Server” si usas VS Code).

3. Verifica que:

   • Se muestren las tarjetas de Ingresos, Gastos, Utilidad neta.
   • Se vea el pseudo-gráfico de barras.
   • La tabla tenga datos para los meses.

Si funciona en local, estás listo para desplegar a AWS.

---

8. Despliegue en AWS paso a paso

8.1 Crear el bucket S3 para el sitio

1. En la consola de AWS, ve a S3 → Create bucket.

2. Configura:

   • Bucket name: fintrack-lite-<tu-nombre>-<random> (todo en minúsculas).
   • Region: us-east-1 (o la región que prefieras para el lab).
   • Block Public Access: desmarca “Block all public access” (solo para este proyecto de demo).
   • Acepta la advertencia.

3. Haz clic en Create bucket.

---

8.2 Activar Static Website Hosting

1. Entra a tu bucket.

2. Ve a la pestaña Properties.

3. Desplázate hasta Static website hosting.

4. Haz clic en Edit:

   • Marca: Enable.
   • Tipo: Host a static website.
   • Index document: index.html.

5. Guarda los cambios.

---

8.3 Subir los archivos

1. Pestaña Objects → Upload.

2. Haz clic en Add files y selecciona:

   • index.html
   • styles.css
   • app.js

3. Haz clic en Upload.

---

8.4 Hacer accesibles los objetos (bucket policy)

Nota: en producción se recomienda usar CloudFront + Origin Access Control y mantener el bucket privado. Para este proyecto principiante, usaremos una bucket policy pública controlada.

1. En tu bucket, ve a Permissions → Bucket Policy → Edit.
2. Usa una policy como esta (cambia NOMBRE_BUCKET):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicReadForWebsite",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::NOMBRE_BUCKET/*"
    }
  ]
}

3. Guarda la policy.

---

8.5 Probar el sitio desde S3

1. Ve a Properties → Static website hosting.

2. Copia la URL que aparece, algo como:

   http://NOMBRE_BUCKET.s3-website-us-east-1.amazonaws.com
   

3. Pega la URL en el navegador.

4. Deberías ver el dashboard financiero funcionando.

---

9. Añadir CloudFront (CDN + HTTPS)

9.1 Crear distribución de CloudFront

1. Ve a CloudFront → Create distribution.

2. En Origin:

   • Origin domain: selecciona el website endpoint de tu bucket S3 (el que termina en s3-website-...amazonaws.com).

3. En Default cache behavior:

   • Viewer protocol policy: Redirect HTTP to HTTPS.

4. En Settings:

   • Default root object: index.html.

5. Haz clic en Create distribution.

Cuando el estado esté como Deployed:

9.2 Probar la distribución

1. Copia el Domain name de la distribución, algo como:

   https://dxxxxxxxxxxxx.cloudfront.net
   

2. Pega en el navegador.

3. Deberías ver el mismo dashboard, ahora servido por CloudFront vía HTTPS.

---

10. Buenas prácticas básicas

10.1 Activar versioning en el bucket del sitio

1. En tu bucket S3 (el del sitio), ve a Properties.
2. Busca Bucket Versioning → Edit.
3. Selecciona Enable.
4. Guarda.

Así puedes revertir fácilmente cambios en archivos estáticos si algo falla.

---

10.2 Activar cifrado por defecto (SSE-S3)

1. En Properties del bucket, ve a Default encryption.
2. Haz clic en Edit.
3. Elige Enable y selecciona Amazon S3 managed keys (SSE-S3).
4. Guarda.

Esto te permite decir: “Todos los objetos del sitio están cifrados en reposo”.

---

10.3 Activar logs en CloudFront

1. Crea un segundo bucket S3, por ejemplo: fintrack-lite-logs-<tu-nombre>.

2. En CloudFront:

   • Abre tu distribución → pestaña Settings (o similar según la consola actual).
   • Habilita Standard logging.
   • Selecciona el bucket de logs como destino.

3. Guarda los cambios.

Con esto podrás analizar quién accede a tu sitio y desde dónde (en una versión futura, por ejemplo con Athena).

---

11. Ciclo de actualización (deploy de cambios)

1. Modifica algún texto en index.html (por ejemplo el subtítulo).

2. Sube el archivo actualizado a tu bucket S3 (mismo nombre, lo reemplaza).

3. Comprueba el sitio usando el endpoint de S3:

   • Deberías ver el cambio de inmediato.

4. Comprueba el sitio usando el dominio de CloudFront:

   • Puede seguir mostrando la versión vieja por caché.

5. Purga la caché:

   • CloudFront → pestaña Invalidations → Create invalidation.
   • Path: /*.

6. Espera a que la invalidación termine y recarga la página:

   • Ahora debes ver la nueva versión.

Esto muestra claramente cómo funciona la caché de una CDN: rendimiento vs frescura.

---

12. Costos (visión general)

Este proyecto está diseñado para ser muy barato:

• S3

  • Cobro por GB almacenado y requests (con pocos archivos, casi nada).

• CloudFront

  • Cobro por GB transferidos + requests (para pruebas personales, centavos).

• Logs

  • Pequeña cantidad adicional de storage en S3.

Para presentarlo, puedes decir:

“Diseñé el proyecto para aprovechar servicios serverless y de bajo costo: S3 + CloudFront. El coste de operación para un uso de laboratorio es prácticamente simbólico, y la arquitectura escala sin cambios de diseño.”

---

13. Posibles mejoras (v2, v3)

Sugerencias para evolucionar el proyecto:

1. Datos dinámicos:

   • Mover los datos financieros a un JSON en S3 o a una API (API Gateway + Lambda).

2. Autenticación:

   • Usar Amazon Cognito para dashboards privados.

3. Análisis de logs:

   • Consultar los logs de CloudFront usando Athena.

4. Dominio propio:

   • Configurar Route 53 + ACM para usar dashboard.midominio.com.

5. Infra as Code:

   • Describir todo en CloudFormation o Terraform.

---

14. Cómo presentar este proyecto en una entrevista

Ejemplo de discurso corto (puedes adaptarlo):

“Construí FinTrack Lite, un mini dashboard financiero para una pyme, como ejercicio de arquitectura en AWS. Es una aplicación estática en HTML/CSS/JS que muestra ingresos, gastos y utilidad. La desplegué en Amazon S3 con static website hosting y la distribuyo globalmente usando Amazon CloudFront, habilitando HTTPS, caché y logs de acceso.

El bucket de S3 tiene versioning y cifrado SSE-S3 activados, y definí una bucket policy pública controlada para exponer solo los objetos estáticos. También habilité logs de CloudFront hacia un bucket dedicado, como base para un futuro análisis con Athena.

Este proyecto demuestra mi capacidad para diseñar soluciones serverless, de bajo costo y alta disponibilidad, aplicadas a un caso de negocio financiero realista.”

---

15. Licencia

Puedes añadir aquí la licencia de tu preferencia, por ejemplo:

MIT License

---

16. Autor

FinTrack Lite – Proyecto de práctica para AWS Architect

• Diseñado para reforzar habilidades de Cloud Architect / Data Engineer con foco en proyectos comerciales y financieros.
• Autor: (Fernando Cuellarf / Ferkuellar)