Proyecto desarrollado para AWS on Nerdearla: Learn, Build, and Earn 🚀
Un template moderno y completo para entrenadores personales construido con Astro y Amazon Q Developer. Diseñado específicamente para el mercado argentino con terminología local, precios en ARS y integración con WhatsApp.
- 🤖 Proceso de Construcción
- 📋 Prompt Especializado
- 💬 Conversaciones Destacadas
- 🎯 Resultados del Desarrollo
- ✅ Diseño Responsivo: Mobile-first con Tailwind CSS
- ✅ Rendimiento Optimizado: Astro para carga ultra-rápida
- ✅ SEO Completo: Meta tags, Open Graph, Schema.org
- ✅ Accesibilidad: WCAG 2.1 AA compliant
- ✅ Contenido Dinámico: Sistema de publicaciones con cards
- ✅ Integración WhatsApp: Botón flotante y enlaces directos
- ✅ Precios Localizados: Configurado para mercado argentino (ARS)
- ✅ Componentes Reutilizables: Arquitectura modular y escalable
src/
├── components/
│ ├── common/ # Header, Footer
│ ├── sections/ # Hero, Services, Pricing, etc.
│ └── ui/ # Button, Cards, componentes base
├── data/ # Configuración de contenido
│ ├── services.ts # Servicios del entrenador
│ ├── pricing.ts # Planes y precios
│ ├── posts.ts # Contenido de publicaciones
│ └── valueProp.ts # Propuestas de valor
├── layouts/ # Layouts base y especializados
├── pages/ # Rutas de la aplicación
│ ├── publicaciones/ # Sistema de blog/tips
│ ├── servicios.astro
│ └── contacto.astro
└── styles/ # Estilos globales
Este proyecto fue desarrollado completamente utilizando Amazon Q Developer como asistente de IA, demostrando las capacidades de desarrollo asistido por IA en un proyecto real.
Para este proyecto se utilizó un prompt especializado en Astro que se encuentra en prompt.md. Este prompt define:
- Arquitecto Frontend Senior especializado en Astro
- Principios de rendimiento (TTI, FCP optimizados)
- Estándares de accesibilidad WCAG 2.1 AA
- Mejores prácticas de Astro Islands y hidratación
- Documentación detallada en cada componente
- Planificación: Definición de arquitectura y componentes con Q Developer
- Desarrollo Iterativo: Creación de componentes paso a paso
- Optimización: Mejoras de UX/UI y rendimiento
- Refactoring: Reestructuración de datos y componentes
- Pulido Final: Ajustes de diseño y experiencia de usuario
- Configuración del proyecto base
- Estructura de carpetas y componentes
- Integración de Tailwind CSS
- Desarrollo de componentes UI reutilizables
- Implementación de layouts especializados
- Configuración de props y TypeScript
- Creación del sistema de posts
- Implementación de PostCard components
- Estructura de datos para contenido
- Efectos hover y transiciones
- Mejoras en tipografía y espaciado
- Implementación de glassmorphism
- Reestructuración de archivos de datos
- Implementación de interfaces TypeScript
- Optimización de componentes con mapeo
- Tiempo de desarrollo: Reducido en ~70% comparado con desarrollo tradicional
- Calidad del código: Comentarios detallados y mejores prácticas aplicadas
- Arquitectura: Estructura escalable y mantenible desde el inicio
- Performance: Optimizaciones implementadas durante el desarrollo
- Accesibilidad: Estándares WCAG aplicados consistentemente
Desplegado en AWS Amplify con integración continua desde GitHub.
Desplegado en Github Pages con Github Actions configurado para Astro.
- Node.js 18+
- pnpm (recomendado)
# Clonar el repositorio
git clone [https://github.com/Maidana0/astro-fit]
cd astro-fit
# Instalar dependencias
pnpm install
# Ejecutar en desarrollo
pnpm dev
# Construir para producción
pnpm build// src/data/services.ts
export const services = [
{
title: 'Tu Servicio',
description: 'Descripción personalizada',
price: 'Tu precio',
// ...
},
];// src/data/navigation.ts
// Actualizar enlaces y información de contacto/* src/styles/global.css */
/* Modificar variables CSS o clases de Tailwind */- Grid responsivo de servicios
- Precios en ARS
- CTAs optimizados para conversión
- 6 artículos de fitness pre-cargados
- Sistema de cards con iconos
- Layout especializado para contenido
- Botón flotante persistente
- Enlaces directos desde CTAs
- Optimizado para mobile
- Lighthouse Score: 95+
- Meta tags completos
- Schema.org para negocio local
- Imágenes optimizadas
- Framework: Astro 4.x
- Styling: Tailwind CSS
- TypeScript: Tipado completo
- Deployment: AWS Amplify
- AI Assistant: Amazon Q Developer
- First Contentful Paint: < 1.2s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Time to Interactive: < 3.0s
Este template es perfecto para:
- ✅ Entrenadores personales
- ✅ Nutricionistas
- ✅ Coaches de fitness
- ✅ Gimnasios boutique
- ✅ Instructores de yoga/pilates
Este proyecto fue desarrollado como demostración para AWS on Nerdearla. Las contribuciones son bienvenidas para mejorar el template.
MIT License - Libre para uso comercial y personal.
- Velocidad: Desarrollo 3x más rápido que métodos tradicionales
- Consistencia: Patrones de código uniformes en todo el proyecto
- Documentación: Comentarios detallados generados automáticamente
- Mejores Prácticas: Implementación automática de estándares de la industria
- Refactoring: Reestructuración de código eficiente y segura
- Prompts Específicos: Usar prompts especializados para mejores resultados
- Iteración Gradual: Desarrollar componente por componente
- Validación Constante: Revisar y ajustar el código generado
- Contexto Claro: Proporcionar contexto del proyecto y objetivos
- Feedback Loop: Iterar basado en resultados y necesidades
- AWS on Nerdearla por la oportunidad de demostrar el desarrollo asistido por IA
- Amazon Q Developer por ser un asistente excepcional en todo el proceso
- Astro Team por crear un framework increíble
- Tailwind CSS por el sistema de diseño
Desarrollado con ❤️ y Amazon Q Developer para AWS on Nerdearla 2025
¿Preguntas sobre el desarrollo con Amazon Q Developer? ¡Contactame!