🌟 lensfocus 🌟

as someone with ADHD, reading long texts has always been a struggle for me. i find myself struggling to stay focused on reading long texts, i unintentionally skip over important details, and have to re-read paragraphs multiple times just to retain information. it's pretty exhausting.

nowadays, thanks to ai, there's no shortage of tools and applications that can help people in similar circumstances get through their work. even then, i felt like fulfilling this idea would be a great opportunity for me to try my hand at making something that i would find useful, and to create something that i can really learn a lot from. so, why not make a smart reader to highlight important key info, and break things down into different categories for you ?

---

🛠️ how i built it

tech stack:

• platform: gadget.dev
  
• frontend: react (vite) + tailwindcss
  
• backend: node.js, javascript
  
• database: gadget's built-in db
  
• ai integration: openai’s gpt-4o mini
  

i picked gadget’s hackathon challenge because i wanted to get better at web development and push myself to build a full-stack app in a completely new environment. the project had to be fully built on gadget, meaning i had to learn a new system from scratch.

---

🔥 challenges i faced

1️⃣ learning gadget’s system

gadget’s ui is actually really nice. it’s clean and easy to navigate. i noticed that there was a tiny bit of a learning curve to it.

i'm used to backend tools like express and prisma, but gadget doesn’t support them. instead, it has its own routing and backend system, which meant completely changing how i structured my app.

they also have their own data access language called "Gelly", which mimics SQL in some ways, but it’s definitely not the same. i originally wrote raw SQL queries to fetch and manipulate data, only to realize I had to replace them with Gadget’s model system. that took some trial and error !

so to figure things out, i relied ** a lot ** on gadget’s ai assistant (which is still in beta). it was super helpful, but sometimes it didn’t fully understand what i needed, so i had to dig through documentation and experiment a little.

---

3️⃣ first hackathon fatigue

this was my first-ever hackathon, and i decided to do it by myself just to see how far i could get with my own skills, but i completely underestimated how exhausting it would be ):

staying focused while learning a new platform, researching, and building both the frontend and backend in such a short time felt like a lot (especially during such a busy time of the semester).

by the end, i was running on hopes and dreams, and even though i didn’t finish every feature, i’m still really proud of what i built. the fact that i found an idea i was interested in, learned skills for it from scratch, got most of it working, and still want to keep improving it is what matters. 🎉

---

💡 what i learned

• how to build a full-stack app on gadget (even though it took some struggling).
  
• adapting to new tools sometimes you just have to ditch old habits and learn something new.
  
• improved my ui and frontend skills a lot.
  
• how to fine-tune openai prompts for structured, consistent responses.
  
• DON'T do a hackathon alone unless it’s with a stack i’m super comfortable with.
  

---

future plans

my first priority would be to finish the project, but i also have some plans for it right after.

✨ custom ai settings – let users control how detailed the summaries & highlights are.
✨ multi-document support – save, organize, and compare multiple files.
✨ dark mode of course. ✨ better text-to-speech integration for accessibility.

i hope this tool can help others too.

Built With

• gadget
• javascript
• node.js
• openai
• react
• tailwindcss
• vite