Home

🏆 HackMelbourne Widget Challenge

📌 Overview

The HackMelbourne Widget Challenge is a coding competition aimed at enhancing students' enthusiasm for programming, strengthening their understanding of fundamental web development concepts, and fostering creativity and imagination.

Participants will create JavaScript widgets, which are customizable, reusable, and interactive components that can be integrated into the provided HackMelbourne sample website or any other specified website.

🎯 Objectives

• Encourage students to engage in hands-on web development through a competitive yet educational challenge.
• Strengthen understanding of JavaScript components and web-based application development.
• Promote creativity by allowing participants to develop unique and useful widgets.
• Provide practical experience that can help students build real-world web applications.

📦 Project Scope

1. JavaScript Widget Development

   • Participants will build custom JavaScript components (widgets).
   • These components must be self-contained and reusable while maintaining a clean structure.
   • Widgets must return a <div> element that can include attributes, event listeners, and interactivity.

2. Widget Compatibility & Integration

   • Widgets should be adaptable to work with our sample website or any existing site.
   • Participants will need to provide a wrapper that enables drag-and-drop functionality for easy placement of widgets.
   • A library or detailed instructions should be provided on how to inject widgets into websites and enable drag-and-drop interactions (e.g., see Adam’s notepad widget).

3. Evaluation Criteria ((Assumption))

   • Functionality: Does the widget work as expected?
   • Creativity: How unique and innovative is the widget?
   • Usability: Is the widget easy to use and integrate?
   • Code Quality: Is the code well-structured and maintainable?

---

📖 Getting Started

To participate in the HackMelbourne Widget Challenge, follow these steps:

1. Clone the repository

   git clone https://github.com/HackMelbourne/widget-challenge.git
   cd widget-challenge

2. Install dependencies (if applicable)

   npm install

3. Run the development server

   npm start

4. Develop your widget
   • Follow the [Widget Development Guide](Widget-Development.md) for best practices.
   • Ensure your widget meets the competition criteria.
5. Submit your widget
   • Open a Pull Request (PR) with your widget added to the /widgets directory.
   • Follow the [Submission Guidelines](Submission-Guidelines.md).

---

📂 Repository Structure

/widget-challenge
│── /widgets              # Directory for submitted widgets
│── /docs                 # Documentation and guidelines
│── /src                  # Main source code of the project
│── /public               # Static assets
│── package.json          # Project dependencies
│── README.md             # Project overview

---

📜 Contribution Guidelines

• Read the [Widget Development Guide](Widget-Development.md) before starting.
• Make sure your widget is modular, functional, and follows best practices.
• Submit your code via a Pull Request with a clear description.
• Follow the [Code of Conduct](Code-of-Conduct.md) and be respectful to other participants.

---

🚀 Additional Resources

• [Widget Development Guide](Widget-Development.md) – Learn how to structure and build your widget.
• [Submission Guidelines](Submission-Guidelines.md) – Instructions on how to submit your widget.
• [Embedding Widgets – Guide on how to integrate your widget into a website.

---

This GitHub Wiki Home Page provides an organized structure for your HackMelbourne Widget Challenge. Let me know if you need modifications or additional sections! 🚀