Zum Inhalt springen

Building an AWS Summit Japan 2025 Mini Stage Schedule Viewer with Amazon Q CLI – Complete Implementation and Article Generation

📁 Please note: This entire article was conceived and written by Amazon Q CLI without any human intervention. This serves as a validation test to see if Amazon Q CLI can handle everything from implementation to article publication. Any unusual expressions should be considered part of this experiment.

🌐 Translation note: This article is an English translation of the original Japanese article published on Qiita: https://qiita.com/issy929/items/0eee86eb730206041a00

🤖 About the Amazon Q CLI Experiment: This project demonstrates Amazon Q CLI’s capabilities in end-to-end development workflow – from analyzing requirements and implementing a complete web application to writing technical documentation. The tool autonomously:

  • Extracted and parsed session data from the AWS Summit website
  • Designed and implemented a responsive web application
  • Solved complex UI/UX challenges through iterative problem-solving
  • Generated comprehensive technical documentation

The goal is to showcase how AI-powered development tools can handle complete project lifecycles while maintaining code quality and technical accuracy.

🚀 Now, let’s dive into what Amazon Q CLI created!

Introduction

I developed a web application that displays AWS Summit Japan 2025 mini stage sessions in an intuitive, easy-to-view format. This tool provides efficient browsing of 80 sessions with a Google Calendar-like UI.

🌐 Open Schedule Viewer

📊 Target Sessions

Three Stages

  • AWS Village Stage: 21 sessions on Day1, 16 sessions on Day2
  • Developers on Live: 13 sessions on Day1, 8 sessions on Day2
  • Community Stage: 12 sessions on Day1, 10 sessions on Day2

Total Sessions: 80 sessions

🎯 Development Background

The official AWS Summit Japan 2025 website displays mini stage session information in accordion format, making it difficult to get an overall view of the schedule. I decided to develop a tool to solve the following challenges:

  • Difficulty understanding time relationships between sessions
  • Hard to compare multiple stages at the same time
  • Poor mobile browsing experience
  • Cumbersome Google Calendar registration process

🛠️ Technology Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Data Format: JSON
  • Responsive Design: CSS Grid Layout
  • Hosting: GitHub Pages
  • Data Extraction: Python + BeautifulSoup

🔧 Major Challenges and Solutions During Development

1. Session Data Extraction

Challenge: Accurately extracting session information from the official website’s HTML

Solution: 

# Analyzing HTML structure: <span>Title</span><br /><br />Description<br /><br />Speaker
def extract_sessions_from_html(html_content):
    # Split by <br /><br /> to separate session description and speaker
    parts = re.split(r'<brs*/?s*>s*<brs*/?s*>', cell_html, flags=re.IGNORECASE)

    if len(parts) >= 3:
        # parts[1]: Description, parts[2]: Speaker
        desc_soup = BeautifulSoup(parts[1], 'html.parser')
        description = desc_soup.get_text().strip()

        speaker_soup = BeautifulSoup(parts[2], 'html.parser')
        speaker = speaker_soup.get_text().strip()

2. Displaying Sessions Spanning Multiple Time Slots

Challenge: Long sessions like „11:35-13:20“ not displaying correctly

Solution: Flexible layout using absolute positioning 

// Calculate position using minutes from base time (11:00)
const baseTime = parseTime('11:00');
const sessionStartMinutes = parseTime(startTime);
const minutesFromBase = sessionStartMinutes - baseTime;

// Calculate position in 30-minute display slots
const top = (minutesFromBase / 30) * 80;
const height = Math.max((duration / 30) * 80, 50);

3. Handling Non-Standard Times (5-minute intervals)

Challenge: Displaying times like „11:50-12:05“ and „12:10-12:25“ that don’t align with 30-minute intervals

Solution: Position calculation system supporting arbitrary times 

// Accurate position calculation per minute
function calculateDurationInMinutes(timeRange) {
    const [start, end] = timeRange.split(' - ');
    const startTime = parseTime(start);
    const endTime = parseTime(end);
    return endTime - startTime;
}

4. Visibility Between Dense Sessions

Challenge: Session overlaps in dense schedules like AWS Village Stage

Solution: Intelligent spacing adjustment 

// Check for overlap with previous session
let topOffset = 2; // Basic top margin
if (index > 0) {
    const prevSession = sessions[index - 1];
    const prevEndTime = prevSession.time.split(' - ')[1];
    const prevEndMinutes = parseTime(prevEndTime);

    // Increase margin for consecutive/overlapping sessions
    if (prevEndMinutes >= sessionStartMinutes) {
        topOffset = 4;
    }
}

5. Sticky Header Implementation Issues

Challenge: CSS position: sticky not working within overflow: hidden containers

Solution: Alternative approach using footer-fixed headers 

/* Footer-fixed header */
.footer-header {
    position: fixed;
    bottom: 0;
    z-index: 180;
    /* Display when main header becomes invisible */
}

// Header display control based on scroll detection
window.addEventListener('scroll', () => {
    const headerRect = calendarHeader.getBoundingClientRect();
    if (headerRect && headerRect.bottom < 0) {
        footerHeader.style.display = 'grid';
    } else {
        footerHeader.style.display = 'none';
    }
});

6. Mobile Vertical Alignment Issues

Challenge: Column width mismatch between footer header and main calendar on mobile

Solution: Unified responsive grid 

@media (max-width: 768px) {
    .calendar-header, .calendar-body, .footer-header {
        grid-template-columns: 80px repeat(3, 1fr); /* Complete unification */
    }
}

@media (max-width: 480px) {
    .footer-header {
        grid-template-columns: 60px repeat(3, 1fr); /* Small screen support */
    }
}

7. Z-index Management for Display Priority

Challenge: Stacking order of modal, back-to-top button, and footer header

Solution: Systematic z-index management 

/* Z-index hierarchy organization */
.modal { z-index: 2000; }           /* Highest priority */
.modal-content { z-index: 2001; }   /* Modal content */
.back-to-top { z-index: 1000; }     /* Navigation */
.controls { z-index: 200; }         /* Controls */
.footer-header { z-index: 180; }    /* Footer header */
.calendar-header { z-index: 150; }  /* Calendar header */

✨ Key Features

1. Google Calendar-style UI

  • Intuitive display of time axis and stages
  • Visualization of session duration
  • Responsive design support

2. Session Detail Display

  • Modal display on click
  • Session descriptions and speaker information
  • Google Calendar integration

3. Google Calendar Integration

function addToGoogleCalendar(session, day) {
    const description = encodeURIComponent(
        `【${currentStage}】${session.description}nnSpeaker: ${session.speaker}nnAWS Summit Japan 2025`
    );
    // Add stage name as prefix
}

4. Usability Features

  • Day1/Day2 switching
  • Fixed header while scrolling
  • Back-to-top button
  • Links to AWS Expo detail pages

📱 Responsive Design

Desktop

  • Optimal display with 1400px maximum width
  • Parallel display of 3 stages
  • Rich information display

Tablet

  • 80px time column adjustment
  • Touch operation support
  • Appropriate font sizes

Smartphone

  • 60px time column (small screens)
  • Compact session display
  • Information preservation with footer header

🎨 Design Considerations

1. Color Scheme

  • Main Color: AWS Orange (#ff9900)
  • Header: Dark Blue-Gray (#232f3e)
  • Gradient: Three-dimensional background

2. Interactions

  • Visual feedback through hover effects
  • Smooth animations
  • Intuitive operability

3. Information Hierarchy

  • Font sizes according to importance
  • Appropriate spacing and contrast
  • Design focused on readability

🚀 Performance Optimization

1. Lightweight Implementation

  • Vanilla JavaScript (no frameworks)
  • Minimal CSS
  • Efficient DOM manipulation

2. Data Optimization

  • Lightweight data in JSON format
  • Extraction of necessary information only
  • Improved cache efficiency

📈 Future Improvement Plans

1. Feature Expansion

  • Session search functionality
  • Favorites feature
  • Calendar export

2. Accessibility

  • Keyboard navigation
  • Screen reader support
  • High contrast mode

3. Internationalization

  • English version provision
  • Multi-language support

🎯 What I Learned

1. Utilizing CSS Grid Layout

I was able to efficiently implement complex calendar layouts with CSS Grid. The flexibility for responsive design was particularly impressive.

2. Flexible Layout with Absolute Positioning

For displaying sessions spanning time slots, absolute positioning was very effective. Calculation-based positioning allows support for arbitrary times.

3. Progressive Enhancement

Starting with basic functionality and gradually adding features allowed for stable development.

4. Importance of Usability

Fine improvements considering actual usage scenarios (footer header, back-to-top button, etc.) led to significant UX improvements.

🔗 Links

Conclusion

I developed a web application that enables efficient browsing of AWS Summit 2025 mini stage sessions. Through the process of solving technical challenges one by one, I gained a deep appreciation for the depth of frontend development.

In particular, I learned that the accumulation of fine improvements focused on usability ultimately creates significant value. I want to continue making improvements and create a tool that is more useful for more people.

I hope this can be of some help to everyone attending AWS Summit for information gathering!

This article is a detailed record of the challenges and solutions encountered during the actual development process. I hope it will be helpful for those working on similar projects.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert