About the challenge

The Hackiethon2025 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 React.js widgets, which are customizable, reusable, and interactive components that can be integrated into the provided HackMelbourne sample website or any other specified website that support React.js.

• 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.

For this hackathon, participants are required to create a widget that boosts PRODUCTIVITY. It can be for personal productivity, business productivity, any kind of productivity. If you can justify its usage, then it will be eligible for the prizes.

Get started

To prepare your environment, follow these steps:

1. Clone the repository (RECOMMENDED)

   • Make sure you have the GitHub Desktop app installed
   • In the Hackiethon2025 GitHub page (https://github.com/HackMelbourne/Hackiethon25), clone the repository by opening it in GitHub Desktop

   or, by using CLI command,

   gh repo clone HackMelbourne/Hackiethon25

    

Install dependencies (if applicable) (Step 2a) Before you can run the local server, you need to have node and npm set up. Download Node.js from https://nodejs.org/en and follow the instructions in the setup wizard.

Then, verify that you have installed node and npm by:

• Opening your command prompt (cmd on Windows) with Administrator privileges (Run as Administrator)
• Run:

•  node -v
   npm -v
  

   

• If they both show version numbers, then you have successfully installed Node.js and npm

(Step 2b) Now, navigate to the project repository. Make sure you are in "Hackiethon2025/showcase-site"

Run the following command:

npm install

• If this doesn't work, try:

  • Opening the "Hackiethon2025/showcase-site" directory in your command prompt in Administrator mode (same as step 2a)
  • Run the command again
  • If this works, then whenever you need to run a command, you need to run it in the command prompt with Administrator privileges

• Run the development server

  npm run dev

   

• If it crashes or fails to start dev server, try:

  • restarting VSCode
  • running the commands in admin cmd
  • delete node_modules, run npm install and npm run dev again

  If it succeeds, then it will display a localhost server, such as "http://localhost:1234/" Copy and paste this into your browser of choice and it should render automatically. While the server is up, whenever you save a change to your source code, the webpage should re-render and you will see your change take place, so there is no need to restart the server (unless something crashes)

• Develop your widget

  • Follow the [Example Widget Development Guide](Widget-Development.md) for learning how to develop a widget with API calls.
  • Ensure your widget meets the competition criteria.

• Submit your widget

  • Submit your widget as a jsx (and any additional css, jsx or image files) to the devpost:
  • Follow the [Submission Guidelines](Submission-Guidelines.md).
  • Make sure to test it on the showcase site first -- this is where we'll be primarily judging your widget

• Innovation
  - How unique is the idea behind this widget? - Does it solve a unique problem?
• Design
  Is it: - Easy to use, responsive - Are the aesthetics of the widget well thought out and generally looks good - Interactive and dynamic, such as by using animations and transitions
• Usefulness
  - How well does this widget solve a common problem or annoyance? - How well does it improve productivity? - If this would be released as a browser extension, how likely are end-users to download it?