DEV Community

Cover image for Building an Event Resources Website with AWS CDK and Amazon Q Developer CLI
AWS profile image Elizabeth Fuentes L
Elizabeth Fuentes L for AWS

Posted on

Building an Event Resources Website with AWS CDK and Amazon Q Developer CLI

#aws #webdev #programming #beginners

🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube
Linktr

elizabethfuentes12 image

Elizabeth Fuentes L

AWS Developer Advocate

Building an Event Resources Website with AWS CDK and Amazon Q Developer CLI

Have you ever needed to quickly share resources with event attendees but didn't want to deal with the complexity of setting up a full web server? I created a solution using Amazon Q Developer CLI.

Event Resources Website

The Event Resources Website project help me solve common event management challenges. This customizable static website runs on Amazon S3 and Amazon CloudFront, providing a professional platform to share event resources with attendees.

What Makes This Special?

This project combines simplicity with effectiveness. Built with AWS Cloud Development Kit (AWS CDK) and Python, it creates a static website that's both cost-effective and highly performant. The best part? It runs under the AWS Free Tier, making it accessible for organizers with any budget.

💰 For detailed pricing information:

Key Features That Stand Out

🎨 Customizable Design

The website uses JSON configuration for easy customization, so you can update content without modifying the code.

⚡ Lightning-Fast Performance

With CloudFront CDN distribution, your attendees get fast loading times regardless of their location. The architecture leverages Amazon S3 for storage and CloudFront for global content delivery.

🔒 Security by Default

The project includes secure S3 bucket configuration and HTTPS by default, ensuring your event data is protected.

🛠️ Setup

  1. Install dependencies: 
pip install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode
  1. Configure AWS credentials: 
aws configure
Enter fullscreen mode Exit fullscreen mode
  1. Bootstrap CDK (first-time setup only): 
cdk bootstrap
Enter fullscreen mode Exit fullscreen mode

📝 Customization

Event Configuration

Edit web-site/event_config.json with your event details:

{
  "event_name": "Your Event Name",
  "date": "Event Date",
  "city": "Event City",
  "credits_url": "https://forms.gle/your-credits-survey",
  "survey_url": "https://forms.gle/your-feedback-survey",
  "demo_url": "https://github.com/your-username/your-demo",
  "deck_pdf": "your-presentation.pdf",
  "linkedin_profile_image": "https://your-profile-image-url",
  "social_links": {
    "linkedin": "https://linkedin.com/in/your-profile",
    "twitter": "https://twitter.com/your-username",
    "github": "https://github.com/your-username",
    "youtube": "https://youtube.com/@your-channel",
    "instagram": "https://instagram.com/your-username"
  }
}
Enter fullscreen mode Exit fullscreen mode

Apply Customization

After editing the configuration:

cd web-site
python3 customize_event.py
Enter fullscreen mode Exit fullscreen mode

🚀 Deployment

  1. Deploy the stack: 
cdk deploy
Enter fullscreen mode Exit fullscreen mode
  1. Get your website URL: The CloudFront URL appears in the output after deployment.

🔄 Updating for New Events

  1. Update event_config.json with new event details
  2. Run python3 customize_event.py
  3. Deploy changes: cdk deploy

📱 Additional Tools

The project even includes a QR code generator built with Jupyter Notebook, making it easy to share your website URL at physical events.

Don't like the default design? No problem! You can use Amazon Q Developer CLI to modify the website's styling and layout through simple natural language commands. Just ask it to "update the CSS to use a dark theme" or "change the layout to a three-column design," and it will help you implement those changes quickly and efficiently.

Access Amazon Q Developer CLI Free Tier Before customizing your website, you'll need access to Amazon Q Developer CLI through your AWS Builder ID. AWS Builder ID is a free personal profile that provides access to Amazon Q Developer, Amazon CodeCatalyst, and AWS Training and Certification resources.

Create your AWS Builder ID at no cost by visiting the AWS Builder ID. This personal profile remains with you throughout your career and is independent from any existing AWS accounts you may have. With your Builder ID, you can access Amazon Q Developer's free tier, which includes generous usage limits for code generation and natural language commands.

Conclusion

Whether you're organizing a tech meetup, conference, or workshop, this project provides a solid foundation for sharing resources with your attendees.

Ready to try it yourself? Check out the repository!

🇻🇪🇨🇱 Dev.to Linkedin GitHub Twitter Instagram Youtube
Linktr

elizabethfuentes12 image

Elizabeth Fuentes L

AWS Developer Advocate

Top comments (0)