Sweet Treat: Ice Cream Shop Challenge

Overview

Welcome to the "Sweet Treat" hackathon! This event challenges you to create an immersive virtual ice cream shop experience. You'll design and build a visually appealing website that makes visitors feel like they've stepped into a delightful ice cream parlor, while implementing interactive features that bring the experience to life.

Important Dates

• Start Date: May 19, 2025
• Registration Deadline: May 21, 2025
• Submission Deadline: June 3, 2025 (11:59 PM)

Challenge Structure

The hackathon will run for 2 weeks as an asynchronous event and consists of two main components:

• Design: Create a visually immersive ice cream shop interface with creative styling
• Functionality: Implement interactive elements that enhance the customer experience

Project: Virtual Ice Cream Shop

All participants will create an ice cream shop website that includes:

• Shop immersive experience with themed design elements
• Ice cream menu/product display
• Visual product customization options
• Shopping cart functionality (advanced JS)
• Checkout process (advanced JS)

IMPORTANT: This should look like an actual ice cream shop, NOT a website for an ice cream store.

Skill Levels and Requirements

• This hackathon accommodates different skill levels within a single track:
• Base Requirements (All Participants)
• Create responsive HTML/CSS layouts for the ice cream shop
• Implement creative styling effects (animations, transitions, etc.)
• Design an immersive user interface that feels like a real shop
• Document your design decisions and implementation process
• Advanced JS (Optional)

Implement shopping functionality using JavaScript

• Create an interactive ordering system
• Develop a dynamic cart and checkout process
• Apply state management for the ordering system
• Participation Format

Time Commitment: Approximately 20 hours of work total, spread over the 2 weeks

• Team Structure: Participants can work individually or in teams of up to 2 people
• Work Style: Asynchronous - work at your own pace within the competition timeframe
• Purpose: Apply web development skills in a creative, engaging project

Challenge Details

Phase 1: The Design

• You will create an immersive ice cream shop website with attention to:

• Visual appeal and creative theme implementation

• Responsive design for different screen sizes

• Engaging animations and transitions

• Accessible and intuitive user interface

• Consistent styling and branding

• Design elements to consider:

• Color schemes reflecting ice cream flavors

• Creative typography and visual elements

• Animated elements (like melting effects or sprinkle animations)

• Immersive background designs

• Interactive menu presentations

Phase 2: The Functionality

After establishing the design, you will:

• Implement interactive elements to enhance the user experience
• For advanced students: develop an order processing system
• Document how your functionality enhances the user experience
• Present your solution, explaining both design choices and technical implementation

Potential Functionality Ideas:

• Flavor combination suggestions
• Interactive ice cream builder
• Animated scooping process
• Seasonal specials showcase
• Customer favorites gallery
• Nutritional information display
• Theme toggling (day/night, seasonal themes)
• Order customization options
• Virtual loyalty card system

Evaluation Criteria

Your submission will be evaluated based on:

Visual Design & Creativity (35%)

Immersive shop atmosphere Creative use of animations and effects Responsive and polished interface Originality and thematic consistency

Technical Implementation (30%)

Code quality and organization Responsive design implementation Performance optimization JavaScript functionality (where applicable)

User Experience (20%)

Intuitive navigation Engaging interactions Accessibility considerations Overall experience quality

Documentation & Presentation (15%)

Code comments and documentation Design rationale explanation Presentation quality Process documentation

Project Resources

Each participant/team will receive: Design guidelines and inspiration resources Technical documentation references

Submission Requirements

Your final submission should include:

• A link to your GitHub repository with the completed code
• 5-minute video tour of your ice cream shop website via Loom-
• Design process documentation highlighting key decisions

Prizes (both for non-JS and JS tracks) 🥇 First - $500 🥈 Second - $250 🥉 Third - $150 Teams will have the prize divided evenly between them

Preparing for the Hackathon

To prepare for this challenge:

• Practice CSS animations and transitions
• Explore creative web design techniques
• Review JavaScript interactivity methods (for advanced participants)
• Gather inspiration from real ice cream shops and dessert websites
• Gather inspiration from real ice cream shops and dessert websites

My changes

• Made a baseball themed ice cream shoppe
• Added a WAV file
• Added scripts
• Made sure all the functions worked