Track : Make Anything, But Make it YOU The Transylvania Blood Network is an interactive website that gamifies blood donation awareness and education. It combines blood donation registration, educational content about blood typing and transfusion, interactive games, and cultural storytelling all within a vampire-themed interface inspired by Romanian folklore.
What makes it uniquely human?
The creative fusion of compassion and culture. It takes the very human acts of giving, helping others, and community care, then wraps them in storytelling, folklore, and playful interaction. The project transforms clinical medical processes into engaging narratives, making blood donation feel heroic and mystical rather than clinical. It also celebrates Romanian cultural identity while addressing a universal human need — the desire to help save lives. What technologies did you use? HTML, CSS and JavaScript
Inspiration
The project was inspired by the desire to make blood donation awareness both serious and engaging by combining it with Romanian cultural heritage — specifically vampire folklore and Transylvanian mythology. The team wanted to transform something as important as blood donation into an entertaining, educational experience that celebrates local culture while serving a meaningful cause.
What it does
Transylvania Blood Network is an interactive educational web game where users simulate the process of blood donation and transfusion. The game teaches users about blood types, compatibility, and the importance of safe donation practices.
How we built it
The project was built as a static website using:
HTML/CSS for structure and styling
JavaScript for logic and interactivity
Hosted on GitHub Pages for easy deployment and accessibility.
All visual effects and compatibility logic were implemented using JavaScript conditionals to mimic real-world transfusion rules.
We used LLMs for debugging and creating the structure of the site.
Challenges we ran into
Simulating realistic agglutination reactions visually without external libraries
Balancing simplicity with accuracy in the medical logic
Designing an intuitive UI that conveys scientific concepts clearly
Time constraints during the hackathon
Accomplishments that we're proud of
Completed a fully working prototype under time pressure
Made blood typing and donation education more accessible and engaging
Built everything from scratch with no backend or external frameworks
Thematically coherent and visually compelling experience
What we learned
How to simulate medical procedures using only front-end technologies
Deepened our understanding of blood compatibility and the biology behind it
Improved skills in UX/UI design for educational tools
Learned how to break down complex processes into gamified, digestible steps
What's next for Transylvania Blood Network
Simulate blood glucose measurement using interactive input and visual feedback
Integrate a functional backend (e.g., Flask or Node.js) to track user progress, store test results, and enable real-time simulation scenarios
Add more levels and complexity (e.g., Rh incompatibility during pregnancy)
Introduce a quiz/test mode for self-evaluation
Make it mobile-responsive
Add accessibility features (keyboard navigation, screen reader support)
Translate into other languages for broader reach
Expand to other biology-related simulations
Built With
- css
- github
- githubpages
- html
- javascript
Log in or sign up for Devpost to join the conversation.