Hack404 Microhacks

3D Model Hand Crank Fan
Agentic AI Reminder Assistant
Hack404 Launchpad Redesign (Figma)

Inspiration

Frustration with using Hack404 landing page
Fan because of the hot weather?
The application had a section on hacking every day items
Microhack workshops provided by Hack404

What it does

Hack404 Launchpad Redesign We redesigned the Hack 404 Launchpad to simplify the user journey and improve UX. We felt that the branding built by the Hack 404 team is quite good, so we mostly did passes on the UI/UX side without completely revamping the website. We reorganized the information to make sure the site had a better flow. The tabs at the top allow users to switch between pages instead of having to continuously scroll down to find information. We ensured all important information was at the home page for easy access. We also reduced clutter with excessive and redundant information removed from each site. With our redesign it makes it easier for users to navigate the site, find pages, and information. Agentic AI Reminder Assistant For the AI Agent we first focused on developing all the required functionalities such as adding multiple working reminders at the same time. Following the success of the basic structure the code was going to follow, we wanted to improve upon the User experiences of the Ai agent. We found that it was very tedious asking the User for every bit of data at a time, and so we wanted the task completion to be more dynamic. Our solution to this was to incorporate natural language user inputs and AI to dynamically determine what information was mentioned inside the User Input, and what still needs to be asked. Hack Fan-O-Four We aimed to design a hand cranked fan from scratch, suitable for a cool, fresh breeze during these summer months. The components include a main frame, a crankable handle, and several gears that connect the handle to one gear that turns the axle of the fan blades. We got the idea to have the fan blades be shaped by the logo of Hack404, due to the logo being a core identity of the community (one of the three tenets of Hack404) and being easily identifiable everywhere during the hackathon. As it is somewhat shaped like an X, we reasoned that it could potentially become a fan blade. While the implementation is still quite low fidelity, we think that the fan blade can be engineered to be aerodynamic enough for the purpose.

How we built it

Launchpad redesign using Figma In order to redesign the Hack404 launchpad we needed to know where to make improvements. We started by brainstorming about what we liked and what we did not like about the launchpad. Keeping what was good and improving the rest. After brainstorming we sketched out the general idea of what the website would look like. Then after we had a plan, we started to build. Agentic AI Reminder Assistant While investigating the capabilities of python in AI prompting, we discovered with the help of the demo, threading. By threading we were capable of running multiple processes at once. We utilized prompt engineering to allow for users to interact with our system using natural language, using an LLM to interpret user inputs and create structured outputs to be parsed. This was originally done in two steps resulting in two prompts, however we found it easier to have one whole prompt letting ChatGPT decipher the whole thing by feeding it all the datatypes required for all the task functions. CAD Fan using Onshape We first started with a sketch as a lo-fi prototype before moving onto attempting to CAD it. We divided up the duty in terms of the different parts we need to make to assemble the product. Onshape matches this flow by having Part Studios to make various parts, which are then put together in Assembly pages. Designing parts involved first sketching out the basic measurements and geometries in 2D planes before extending them to 3D. Assembling parts involved mate connections which bound two parts to each other. In our case, we made heavy use of the Revolute Mate, which restrained an object on an axis of rotation. The mates can then be connected in gear connections so that the gears can turn together We made a demonstration using the animation feature

Challenges we ran into

We were all pretty new to hackathons, with 3 of us having never done one before. We weren’t sure how to effectively use our time or how to properly leverage teammates or support from the mentors.
The environment was sometimes challenging in terms of focus. We decided to spend more time attending workshops and events rather than just developing our projects.

We were introduced to many new technologies in fields we have little experience in, which made it challenging, especially having split our attention amongst 3 microhacks in entirely different fields. There were steep learning curve with unfamiliar tools like Figma and Onshape, as well as new technologies like LLMs and utilizing prompt engineering to create structured outputs necessary for an Agentic AI Solution: Splitting the workload amongst the team members By splitting different aspects of each microhack amongst our team members, we narrowed the scope of each person’s focus, reducing the initial learning curve, while allowing us to combine our experience together to create a finished product. For some subjects (OpenAI APIs, Onshape) some group members has more experience than others so took on a more prominent role while also helping the other groupmates to become familiarized with the tool/subject.

Accomplishments that we're proud of

This was our group’s first hackathon!
Creating a pretty and functional UI
Learning new skills in 3 contrasting fields, and being able to create working projects utilizing them
Designed a small daily gadget from scratch

What we learned

How to use tools like Figma, Onshape
Fundamental UI/UX Principles and how to utilize them to create effective UI/UX designs
How to utilize AI in an app to enhance ease of use.
How to CAD and assemble mechanical parts in Onshape
How to work efficiently as a team with diverse technical focuses

What's next for Hack404

Hack404 is a very beginner friendly hackathon. The workshops, mentors, and resources are very helpful for new learners to get accustomed to current technology. The workshops specifically alongside the microhacks give a comprehensive guide to the basics of many popular topics as well as allowing attendees to exercise the newly found skills they learned in a creative and applicable hack. In the future, Hack404 can target some more different technologies that weren’t covered at this hackathon, although I think a few (such as the AI workshop) are too relevant to today’s technology to be replaced.