Hatrick - your thinking cap for learning

For learners entering new fields but overwhelmed by jargon, Hatrick uses Summarizer and Prompt APIs to give context, show where to focus, and help build a personal knowledge base.

Comment

Inspiration

As an architectural designer exploring AI product design, I often felt overwhelmed by dense articles filled with unfamiliar terms. I’d look up one word, then another… and quickly lose focus. I realized many learners entering a new field face the same struggle: How can we learn efficiently without being drowned in jargon and information overload? That inspired Hatrick, a learning buddy built directly into the browser.

What it does

Hatrick helps users understand new topics faster through three main features: First Skim — Get instant context, a short summary, and key terms Mind Map — Visualize the structure of the content and see where to focus vs. skim Dive In — Save vocabulary, add notes, and ask clarifying questions

Users can also collect knowledge “hats” as they explore different fields, allowing them to: Track their learning progress in each domain View all saved terms and notes organized by topic

How we built it

As a designer without a traditional coding background, I relied heavily on AI-assisted development tools to accelerate the build. I used Cursor and GitHub Copilot to scaffold and refine the codebase while designing and implementing the UI with HTML, CSS, and JavaScript. Figma was used to prototype.

Challenges we ran into

The hardest part was learning how to structure my workflow. I didn’t know whether I should design everything in Figma first or jump straight into implementation. I tried both, going back and forth between simple prototypes and basic functionality tests. It was a challenge at first, but ultimately helped me find a working process that suits building alone and learning as I go.

Accomplishments that we're proud of

I’m proud that I transformed a personal learning need into a functional, meaningful tool — and did so without a traditional coding background.

What we learned

I learned the importance of rapid, continuous testing. Each time I made a small improvement and immediately tried it out, I was able to uncover issues earlier and better understand the technical limitations. Testing as a user constantly also helped refine my ideas and get more inspirations. After some initial practicing and testing, I reached an early functional version. Then I built a prototype that kept me focused, helped set realistic goals, and iterated faster with confidence.

What's next for Hatrick - your thinking cap for learning

Next, Hatrick will support more content formats like videos and PDFs, and add more interactive and immersive learning experiences. Light-reward features that help users stay motivated and enjoy learning in a fun and relaxed way. I’m also looking for software engineers who are interested in partnering to take Hatrick to the next level.

Built With

Share this project:

Updates