The official frontend for PyDay Chile β a community-driven Python conference showcasing Chileβs tech talent through talks, workshops, and networking events across multiple cities.
- Dynamic content routing for different conference locations
- Interactive map showing participating cities
- City-specific schedules and venue details
- Responsive image gallery with lazy loading
- Full-screen modal viewer with keyboard navigation
- Organized historical content by year and location
- Embedded video section with responsive players
- Next.js 13+ App Router implementation
- Optimized WebP image delivery
- Responsive UI built with Tailwind CSS
- Accessibility-first components (ARIA labels, keyboard navigation)
- Speaker profiles with social links
- Interactive schedule with filtering
- Sponsor showcase with tiered visibility
- Registration form with client-side validation
pyday-frontend/
βββ public/ # Optimized static assets
β βββ images/ # Organized media library
β βββ gallery/ # Event photos by year/city
β βββ speakers/ # Speaker headshots
β βββ sponsors/ # Partner logos
β
βββ src/
β βββ app/ # Next.js 13+ routing
β βββ components/ # Reusable UI elements
β βββ data/ # Content management
β βββ lib/ # Utilities & helpers
β
βββ tailwind.config.js # Custom design system
Feature | Implementation | Benefit |
---|---|---|
Modern Formats | WebP conversion | 30% smaller than JPEG |
Responsive SrcSet | Next.js Image component | Device-appropriate sizes |
Lazy Loading | Intersection Observer API | Faster initial load |
Blur Placeholders | Dynamic SVG generation | Smooth loading experience |
- WCAG 2.1 AA-compliant components
- Semantic HTML structure
- Keyboard-navigable interfaces
- Reduced-motion preference support
- ARIA labels for interactive elements
[email protected]
: React framework for production[email protected]
: Utility-first CSS[email protected]
: Smooth animations
Control feature visibility via environment variables:
# .env.local
NEXT_PUBLIC_FEATURE_REGISTRATION="false" # Main registration form
NEXT_PUBLIC_FEATURE_SPONSORS="true" # Full sponsors section
NEXT_PUBLIC_FEATURE_SPONSOR_FORM="false" # Individual sponsor inquiry form
Variable | Description | Valid Values |
---|---|---|
NEXT_PUBLIC_FEATURE_REGISTRATION |
Enables main registration form | true /false |
NEXT_PUBLIC_FEATURE_SPONSORS |
Shows full sponsors section | true /false |
NEXT_PUBLIC_FEATURE_SPONSOR_FORM |
Activates sponsor inquiry form | true /false |
- Set variables in
.env.local
usingtrue
/false
. - Restart the server after any changes.
- Alternate CTAs automatically display when:
- A feature is disabled (
false
) - An external link is provided in
cityData.js
- A feature is disabled (
// Example in src/data/cities.js
valparaiso: {
talkProposalLink: "https://..." // Valid URL enables automatic CTA
}
Note: Alternate CTAs appear only when the related feature flag is
false
and a link is configured for that city.
Critical Server Configuration:
For production deployments, follow our Server Setup Guide covering:
- Node.js environment requirements
- PM2 process management
- GitHub Actions integration
- Mandatory environment variables
- Image optimization pipeline
Minimum Requirements:
- Node.js v20+
- 2GB RAM minimum
- HTTPS configuration
π Admin Note: The
output: 'export' config is prohibited** - breaks dynamic routes and middleware. Always use standard Next.js build (
npm run build+
npm start`).
We welcome community contributions! Please see our Contribution Guidelines and review our Photography Style Guide for asset submissions.
License: Apache 2.0 (See LICENSE)
Maintainer: PyDay Chile Tech Committee
π§ [email protected]