AWS User Groups Website 🌐

English

🎯 About

Official website for the AWS User Groups community. A modern, responsive platform built to connect AWS enthusiasts, share knowledge, and promote upcoming events and community activities.

Live Site: awsusergroups.com

✨ Features

✅ Modern and responsive design
✅ Event calendar and upcoming meetups
✅ AWS Community Day information
✅ Photo gallery from past events
✅ Partner and sponsor showcases
✅ FAQ section
✅ Community involvement opportunities
✅ Modular component architecture
✅ TypeScript/JavaScript support
✅ Optimized performance with Vite

🛠️ Technologies

Technology	Description
React 19	Modern UI framework
TypeScript/JavaScript	Static typing support
Tailwind CSS v4	Utility-first CSS framework
Vite	Next generation build tool
Lucide React	Beautiful icon library

📦 Installation

# Clone the repository
git clone https://github.com/CanadianCloud/awsusergroups.github.io.git

# Navigate to project directory
cd awsusergroups.github.io

# Install dependencies
npm install

🚀 Development

# Start development server (opens at http://localhost:5173)
npm run dev

# Build for production
npm run build

# Preview production build locally (opens at http://localhost:4173)
npm run preview

# Run linter
npm run lint

🔧 Development Modes Explained

Command	Purpose	When to Use
`npm run dev`	Hot-reloading development server	Active development, sees changes instantly
`npm run preview`	Test production build locally	Before deployment, verify build works correctly
`npm run deploy`	Deploy to production	When ready to publish to awsusergroups.com

⚠️ Important: Never open dist/index.html directly in a browser! The built files use absolute paths and won't work with the file:// protocol. Always use npm run preview to test production builds locally.

🌐 Deployment (GitHub Pages)

This project is configured to deploy automatically to GitHub Pages using the gh-pages package.

How it works:

The deployment process uses an isolated gh-pages branch that contains only the built production files, keeping your source code separate in the main branch.

Deploy to GitHub Pages:

# Deploy to GitHub Pages (one command does it all)
npm run deploy

This command will:

✅ Compile TypeScript files
✅ Build the production bundle (creates dist/ folder)
✅ Copy the CNAME file for custom domain
✅ Push the dist/ folder to the gh-pages branch
✅ Your site goes live automatically at awsusergroups.com

Branch Structure:

Branch	Purpose
`main`	Source code (development)
`draft`	Backup branch
`gh-pages`	Production build (auto-generated, do not edit manually)

First-time Setup:

If this is a fresh clone, make sure GitHub Pages is configured:

Go to your repository settings on GitHub
Navigate to Pages section
Set source to gh-pages branch
Set folder to / (root)
Save changes

The site will be available at your custom domain or https://username.github.io/repository-name/

🔍 Troubleshooting

Local Website Not Working?

Problem: "Local website is working bad" or blank page after opening dist/index.html

Solution:

❌ DON'T: Open dist/index.html directly in browser (double-click)
✅ DO: Use npm run preview to test the production build
✅ DO: Use npm run dev for development

Why? Production builds use absolute paths (/assets/...) that only work with a proper server, not the file:// protocol.

Production Site Not Updating?

Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
Check GitHub Actions completed successfully
Verify gh-pages branch has latest build
Wait 1-2 minutes for CDN propagation

Port Already in Use?

If npm run dev fails because port 5173 is in use:

# Kill the process using the port (macOS/Linux)
lsof -ti:5173 | xargs kill -9

# Or use a different port
npm run dev -- --port 3000

📁 Project Structure

src/
├── components/
│   ├── layout/
│   │   ├── Header.jsx         # Main navigation with scroll spy
│   │   └── Footer.jsx         # Footer component
│   ├── sections/
│   │   ├── HeroBanner.jsx     # Hero banner with CTA buttons
│   │   ├── DiscoverSection.jsx# AWS User Groups world map section
│   │   ├── FeaturedUserGroup.jsx # Featured user group showcase
│   │   ├── BuildGenie.jsx     # Build Genie section
│   │   ├── FAQs.jsx           # FAQ section (Leaders Insights)
│   │   ├── Resources.jsx      # Resources for Leaders section
│   │   ├── InstagramFeed.jsx  # Instagram feed
│   │   └── Testimonials.jsx   # Testimonials
│   └── shared/
│       ├── AnimatedButton.jsx # Reusable animated button
│       ├── ScrollingBanner.jsx# Scrolling banner with keywords
│       ├── SectionHeading.jsx # Section heading component
│       ├── ScrollToTop.jsx    # Scroll to top button
│       ├── WorldMap.jsx       # Interactive world map
│       └── index.js           # Shared component exports
├── assets/                    # Images and media files
├── data/
│   └── userGroups.json        # User groups data for map
├── App.jsx                    # Main app component
├── main.jsx                   # App entry point
└── index.css                  # Global styles with Tailwind

scripts/
├── scrapeUserGroups.cjs       # Scrapes user groups from AWS
├── enhanceUserGroups.cjs      # Enhances data with geocoding
├── manual-corrections.json    # Manual data corrections
├── geocode-cache.json         # Forward geocoding cache
├── reverse-geocode-cache.json # Reverse geocoding cache
└── url-search-cache.json      # URL search cache

🧭 Navigation Structure

Nav Link	Section ID	Component
Home	`#hero`	`HeroBanner.jsx`
AWS User Groups	`#user-groups`	`DiscoverSection.jsx`
Featured AWS UG	`#featured`	`FeaturedUserGroup.jsx`
Build Genie	`#build`	`BuildGenie.jsx`
Leaders Insights	`#insights`	`FAQs.jsx`
Resources for Leaders	`#resources`	`Resources.jsx`

🗺️ User Groups Map Data Pipeline

The interactive world map is powered by a data pipeline that scrapes, geocodes, and enhances AWS User Groups data.

Scripts Overview

Script	Purpose	Usage
`scrapeUserGroups.cjs`	Scrapes user groups from builder.aws.com, geocodes locations	`node scripts/scrapeUserGroups.cjs`
`enhanceUserGroups.cjs`	Adds countries via reverse geocoding, finds missing URLs	`node scripts/enhanceUserGroups.cjs`

Data Files

File	Purpose
`src/data/userGroups.json`	Main data file with user groups
`scripts/manual-corrections.json`	Manual URL overrides, city corrections, exclusions
`scripts/geocode-cache.json`	Cache for forward geocoding (city → coordinates)
`scripts/reverse-geocode-cache.json`	Cache for reverse geocoding (coordinates → country)
`scripts/url-search-cache.json`	Cache for Meetup URL searches

Running the Pipeline

# 1. Full scrape from AWS (takes ~15-20 minutes)
node scripts/scrapeUserGroups.cjs

# 2. Enhance existing data (add countries, find URLs)
node scripts/enhanceUserGroups.cjs

Manual Corrections

Edit scripts/manual-corrections.json to:

urlOverrides: Add known URLs for groups
cityCorrections: Fix city/country names
excludeGroups: Remove invalid/duplicate groups

🤝 Volunteers

This project is maintained by our amazing volunteers:

Daniela Perez - Community Organizer & Developer
Xaca Rana - Developer & Project Lead

🌟 Contributing

We welcome contributions! If you'd like to help improve the website:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is open source and available for the AWS community.

📧 Contact

For questions or suggestions, reach out through:

Our community meetups
GitHub issues
Visit awsusergroups.com

Español

🎯 Acerca del Proyecto

Sitio web oficial para la comunidad de AWS User Groups. Una plataforma moderna y responsiva construida para conectar entusiastas de AWS, compartir conocimiento y promover eventos y actividades comunitarias.

Sitio en vivo: awsusergroups.com

✨ Características

✅ Diseño moderno y responsivo
✅ Calendario de eventos y próximos meetups
✅ Información de AWS Community Day
✅ Galería de fotos de eventos pasados
✅ Exhibición de partners y sponsors
✅ Sección de preguntas frecuentes
✅ Oportunidades de participación comunitaria
✅ Arquitectura modular de componentes
✅ Soporte para TypeScript/JavaScript
✅ Rendimiento optimizado con Vite

🛠️ Tecnologías

Tecnología	Descripción
React 19	Framework moderno de UI
TypeScript/JavaScript	Soporte de tipado estático
Tailwind CSS v4	Framework CSS utility-first
Vite	Build tool de próxima generación
Lucide React	Librería de iconos

📦 Instalación

# Clonar el repositorio
git clone https://github.com/CanadianCloud/awsusergroups.github.io.git

# Navegar al directorio del proyecto
cd awsusergroups.github.io

# Instalar dependencias
npm install

🚀 Desarrollo

# Iniciar servidor de desarrollo
npm run dev

# Compilar para producción
npm run build

# Previsualizar build de producción
npm run preview

# Ejecutar linter
npm run lint

🌐 Despliegue (GitHub Pages)

Este proyecto está configurado para desplegarse automáticamente en GitHub Pages usando el paquete gh-pages.

Cómo funciona:

El proceso de despliegue utiliza una rama aislada gh-pages que contiene solo los archivos de producción compilados, manteniendo tu código fuente separado en la rama main.

Desplegar a GitHub Pages:

# Desplegar a GitHub Pages (un solo comando lo hace todo)
npm run deploy

Este comando hará:

✅ Compilar archivos TypeScript
✅ Construir el bundle de producción (crea la carpeta dist/)
✅ Copiar el archivo CNAME para el dominio personalizado
✅ Enviar la carpeta dist/ a la rama gh-pages
✅ Tu sitio se publica automáticamente en awsusergroups.com

Estructura de Ramas:

Rama	Propósito
`main`	Código fuente (desarrollo)
`draft`	Rama de respaldo
`gh-pages`	Build de producción (auto-generado, no editar manualmente)

Configuración Inicial:

Si es un clon nuevo, asegúrate de que GitHub Pages esté configurado:

Ve a la configuración de tu repositorio en GitHub
Navega a la sección Pages
Establece la fuente como rama gh-pages
Establece la carpeta como / (root)
Guarda los cambios

El sitio estará disponible en tu dominio personalizado o https://username.github.io/nombre-repositorio/

📁 Estructura del Proyecto

src/
├── components/
│   ├── layout/
│   │   ├── Header.jsx         # Navegación principal
│   │   ├── Footer.jsx         # Componente pie de página
│   │   └── Footer.tsx         # Componente pie de página (TypeScript)
│   ├── sections/
│   │   ├── Hero.jsx           # Banner principal
│   │   ├── Features.jsx       # Contenido destacado
│   │   ├── FAQs.jsx           # Preguntas frecuentes
│   │   ├── InstagramFeed.jsx  # Feed de Instagram
│   │   ├── Resources.jsx      # Sección de recursos
│   │   ├── Testimonials.jsx   # Testimonios
│   │   └── index.ts           # Exports de secciones
│   └── shared/
│       ├── AnimatedButton.jsx # Componente de botón reutilizable
│       ├── ScrollingBanner.jsx# Banner con scroll
│       ├── SectionHeading.jsx # Encabezado de sección
│       └── index.js           # Exports compartidos
├── assets/                    # Imágenes y archivos multimedia
├── App.jsx                    # Componente principal
├── main.jsx                   # Punto de entrada
└── index.css                  # Estilos globales con Tailwind

🤝 Voluntarios

Este proyecto es mantenido por nuestros increíbles voluntarios:

Daniela Perez - Organizadora de Comunidad & Desarrolladora
Xaca Rana - Desarrollador & Líder del Proyecto

🌟 Contribuir

¡Damos la bienvenida a contribuciones! Si te gustaría ayudar a mejorar el sitio web:

Haz fork del repositorio
Crea tu rama de feature (git checkout -b feature/CaracteristicaIncreible)
Haz commit de tus cambios (git commit -m 'Agregar CaracteristicaIncreible')
Haz push a la rama (git push origin feature/CaracteristicaIncreible)
Abre un Pull Request

📝 Licencia

Este proyecto es de código abierto y está disponible para la comunidad AWS.

📧 Contacto

Para preguntas o sugerencias, contáctanos a través de:

Nuestros meetups comunitarios
GitHub issues
Visita awsusergroups.com

Made with ❤️ by the AWS User Groups Community

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
public		public
scripts		scripts
src		src
test-results		test-results
tests		tests
.gitignore		.gitignore
CNAME		CNAME
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

AWS User Groups Website 🌐

English

🎯 About

✨ Features

🛠️ Technologies

📦 Installation

🚀 Development

🔧 Development Modes Explained

🌐 Deployment (GitHub Pages)

How it works:

Deploy to GitHub Pages:

Branch Structure:

First-time Setup:

🔍 Troubleshooting

Local Website Not Working?

Production Site Not Updating?

Port Already in Use?

📁 Project Structure

🧭 Navigation Structure

🗺️ User Groups Map Data Pipeline

Scripts Overview

Data Files

Running the Pipeline

Manual Corrections

🤝 Volunteers

🌟 Contributing

📝 License

📧 Contact

Español

🎯 Acerca del Proyecto

✨ Características

🛠️ Tecnologías

📦 Instalación

🚀 Desarrollo

🌐 Despliegue (GitHub Pages)

Cómo funciona:

Desplegar a GitHub Pages:

Estructura de Ramas:

Configuración Inicial:

📁 Estructura del Proyecto

🤝 Voluntarios

🌟 Contribuir

📝 Licencia

📧 Contacto

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages