AWS Community Canada Website 🌐

English

🎯 About

Official website for the AWS Community Canada, based in Vancouver. A modern, responsive platform built to connect AWS enthusiasts, share knowledge, and promote upcoming events and community activities.

Live Site: www.awscanada.ca

✨ 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 for type safety
✅ Optimized performance with Vite
✅ Automated event updates from Luma calendar

🛠️ Technologies

React 19 - Modern UI framework
TypeScript - Static typing
Tailwind CSS v4 - Utility-first CSS framework
Vite - Next generation build tool
Lucide React - Beautiful icon library
React Lightbox - Image gallery viewer

📦 Installation

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

# Navigate to project directory
cd awscanada.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 www.awscanada.ca

⚠️ 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 www.awscanada.ca

Branch Structure:

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/

🔄 Automated Events Scraping

Events are automatically fetched from the Luma awsvan calendar and stored in events.json.

How it works:

A GitHub Actions workflow runs daily at midnight (Vancouver time)
It fetches upcoming events from Luma's API
If there are changes, it commits to main and deploys to gh-pages

Manual Commands:

Command	Description
`npm run scrape-events`	Fetch events from Luma and update `events.json`

GitHub Actions Workflow:

The workflow file is located at .github/workflows/update-events.yml

To manually trigger:

Go to GitHub → Actions tab
Select "Update events and deploy"
Click "Run workflow"

Events Data Structure:

Events are stored in events.json with this structure:

Field	Description
`id`	Unique event identifier
`title`	Event name
`date`	Formatted date (e.g., "Jan 23, 2026")
`time`	Event time
`location`	Venue name or city
`address`	Full address
`url`	Link to Luma registration
`image`	Event cover image URL

🔍 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

├── .github/
│   └── workflows/
│       └── update-events.yml  # Automated scraping workflow
├── scripts/
│   └── scrape-events.js       # Luma events scraper
├── events.json                # Event data (auto-updated)
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Header.tsx         # Main navigation
│   │   │   ├── Footer.tsx         # Footer component
│   │   │   ├── ScrollToTop.tsx    # Scroll to top button
│   │   │   └── index.ts           # Layout exports
│   │   └── sections/
│   │       ├── Hero.tsx           # Hero banner
│   │       ├── UpcomingEvents.tsx # Event calendar (reads events.json)
│   │       ├── CommunityDay.tsx   # AWS Community Day
│   │       ├── GetInvolved.tsx    # Get involved section
│   │       ├── Gallery.tsx        # Photo gallery
│   │       ├── Slider.tsx         # Image slider
│   │       ├── Partners.tsx       # Partner logos
│   │       ├── Sponsors.tsx       # Sponsor logos
│   │       ├── FAQ.tsx            # FAQ section
│   │       ├── CTA.tsx            # Call to action
│   │       └── index.ts           # Section exports
│   ├── assets/                    # Images and media files
│   ├── lib/
│   │   └── utils.ts              # Utility functions
│   ├── App.tsx                   # Main app component
│   ├── main.tsx                  # App entry point
│   └── index.css                 # Global styles with Tailwind

🤝 Volunteers

This project is maintained by our amazing volunteers:

Daniela Perez - Project Lead & Designer
Xaca Rana - Developer

🌟 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 Canada.

📧 Contact

For questions or suggestions, reach out through:

Our community meetups
GitHub issues
Visit www.awscanada.ca

Español

🎯 Acerca del Proyecto

Sitio web oficial de AWS Community Canada, con sede en Vancouver. Una plataforma moderna y responsiva construida para conectar entusiastas de AWS, compartir conocimiento y promover eventos y actividades comunitarias.

Sitio en vivo: www.awscanada.ca

✨ 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
✅ TypeScript para seguridad de tipos
✅ Rendimiento optimizado con Vite
✅ Actualización automática de eventos desde calendario Luma

🛠️ Tecnologías

React 19 - Framework moderno de UI
TypeScript - Tipado estático
Tailwind CSS v4 - Framework CSS utility-first
Vite - Build tool de próxima generación
Lucide React - Librería de iconos
React Lightbox - Visor de galería de imágenes

📦 Instalación

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

# Navegar al directorio del proyecto
cd awscanada.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 www.awscanada.ca

Estructura de Ramas:

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/

🔄 Actualización Automática de Eventos

Los eventos se obtienen automáticamente del calendario Luma awsvan y se almacenan en events.json.

Cómo funciona:

Un workflow de GitHub Actions se ejecuta diariamente a medianoche (hora de Vancouver)
Obtiene los próximos eventos de la API de Luma
Si hay cambios, hace commit a main y despliega a gh-pages

Comandos Manuales:

Comando	Descripción
`npm run scrape-events`	Obtener eventos de Luma y actualizar `events.json`

Workflow de GitHub Actions:

El archivo del workflow está ubicado en .github/workflows/update-events.yml

Para ejecutar manualmente:

Ve a GitHub → pestaña Actions
Selecciona "Update events and deploy"
Haz clic en "Run workflow"

Estructura de Datos de Eventos:

Los eventos se almacenan en events.json con esta estructura:

Campo	Descripción
`id`	Identificador único del evento
`title`	Nombre del evento
`date`	Fecha formateada (ej. "Jan 23, 2026")
`time`	Hora del evento
`location`	Nombre del lugar o ciudad
`address`	Dirección completa
`url`	Enlace al registro en Luma
`image`	URL de la imagen de portada

📁 Estructura del Proyecto

├── .github/
│   └── workflows/
│       └── update-events.yml  # Workflow de scraping automático
├── scripts/
│   └── scrape-events.js       # Scraper de eventos Luma
├── events.json                # Datos de eventos (auto-actualizado)
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Header.tsx         # Navegación principal
│   │   │   ├── Footer.tsx         # Componente pie de página
│   │   │   ├── ScrollToTop.tsx    # Botón scroll al inicio
│   │   │   └── index.ts           # Exports del layout
│   │   └── sections/
│   │       ├── Hero.tsx           # Banner principal
│   │       ├── UpcomingEvents.tsx # Calendario de eventos (lee events.json)
│   │       ├── CommunityDay.tsx   # AWS Community Day
│   │       ├── GetInvolved.tsx    # Sección de participación
│   │       ├── Gallery.tsx        # Galería de fotos
│   │       ├── Slider.tsx         # Carrusel de imágenes
│   │       ├── Partners.tsx       # Logos de partners
│   │       ├── Sponsors.tsx       # Logos de sponsors
│   │       ├── FAQ.tsx            # Preguntas frecuentes
│   │       ├── CTA.tsx            # Llamada a la acción
│   │       └── index.ts           # Exports de secciones
│   ├── assets/                    # Imágenes y archivos multimedia
│   ├── lib/
│   │   └── utils.ts              # Funciones utilitarias
│   ├── App.tsx                   # Componente principal
│   ├── main.tsx                  # Punto de entrada
│   └── index.css                 # Estilos globales con Tailwind

🤝 Voluntarios

Este proyecto es mantenido por nuestros increíbles voluntarios:

Daniela Perez - Líder de Proyecto & Diseñadora
Xaca Rana - Desarrollador

🌟 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 AWS Community Canada.

📧 Contacto

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

Nuestros meetups comunitarios
GitHub issues
Visita www.awscanada.ca

Made with ❤️ by AWS Community Canada 🇨🇦

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github/workflows		.github/workflows
scripts		scripts
src		src
.gitignore		.gitignore
CNAME		CNAME
README.md		README.md
eslint.config.js		eslint.config.js
events.json		events.json
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
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 Community Canada 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:

🔄 Automated Events Scraping

How it works:

Manual Commands:

GitHub Actions Workflow:

Events Data Structure:

🔍 Troubleshooting

Local Website Not Working?

Production Site Not Updating?

Port Already in Use?

📁 Project Structure

🤝 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:

🔄 Actualización Automática de Eventos

Cómo funciona:

Comandos Manuales:

Workflow de GitHub Actions:

Estructura de Datos de Eventos:

📁 Estructura del Proyecto

🤝 Voluntarios

🌟 Contribuir

📝 Licencia

📧 Contacto

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages