Project Info
This project did not submit a demo video on Devpost.
🧠
Inspiration
Textbooks are dense, outdated, and hard to engage with — especially for something as visual as human anatomy. We wanted to make studying biology actually make sense for med students. 💡
What it does
BioNote lets you explore 3D anatomical models, draw directly on them, chat with an AI tutor, and turn your notes into Anki flashcards — all in one workspace. It’s like if your iPad and med school had a baby. 🔧
How we built it
We used Sketchfab for the 3D models (embedded via iframe), added a canvas overlay for pen tools and screenshots, and layered in a chat interface with spaced repetition and auto flashcard generation. 🚧 Challenges Selecting specific regions under multiple model layers was tough (iframe + canvas coordination = pain 😅) Fetch.ai’s Agentverse didn’t play well with multi-turn conversations Screenshotting while preserving annotations + context was surprisingly complex ✅ Accomplishments Built a clean, immersive 3D note-taking setup — basically replicated an iPad experience Made complex AI prompts dead simple for users (click, snapshot, done) Streamlined the flow from visual > notes > memory 📚
What we learned
How to use iframes way beyond just embeds — think multi-purpose tools Managing canvas layering and state across multiple UI elements Designing for both clarity and utility in a tight UI 🔮
What's next
Full-body anatomical models Depth-aware visualization (not just surface level) Smarter AI feedback based on what part you’re studying
BioNote
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details. #� �b�i�o�n�o�t�e� � �
Analysis
View
Metric
- 23
- 12
- 10
- 2
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- Google GeminiIn code
- Next.jsIn code
- OpenAIIn code
- PythonIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- Vercel AI SDKIn code
9 of 9 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
86 KB
Source files
15
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
coderkai03/bionote
29 files · 2.5 MB · @ b169748
Structure
Interface
10 files · 34%Screens, components and styles rendered to the user.
API & routing
2 files · 7%Request entry points: routes, handlers and controllers.
Application logic
1 file · 3%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript92%
- Python5%
- Markdown3%
- CSS1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 20- @ai-sdk/google
- @ai-sdk/openai
- ai
- html2canvas
- next
- openai
- react
- react-dom
- react-markdown
- use-react-screenshot
- zod
- +9 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.