An interactive 3D protein structure visualization application that lets you explore the intricate world of molecular biology. Dive into the fascinating architecture of proteins—from oxygen-carrying hemoglobin to signal-regulating ubiquitin—and discover how these molecular machines are built.
- Multiple Protein Structures: Investigate a curated selection of proteins (Myoglobin, Hemoglobin, Crambin, Ubiquitin, Adenylate Kinase, Insulin)
- Custom PDB Loading: Query any protein from the Protein Data Bank by entering its 4-letter ID
- Discover in Real-time: Smooth 3D visualization powered by 3DMol.js
- Multiple Viewing Modes: Cartoon, Stick, and Sphere representations to understand protein structure from different perspectives
- Interactive Exploration: Drag to rotate, scroll to zoom, right-click to pan—total control over your investigation
- Enhanced Discovery: Auto-spin mode for continuous observation and immersive viewing
- Vite - Lightning-fast build tool and dev server
- 3DMol.js - WebGL-based molecular visualization library
- Vanilla JavaScript - No framework overhead, pure performance
- CSS3 - Modern styling with CSS Grid, Flexbox, and custom properties
- RCSB PDB API - Real-time protein structure data fetching
# Clone the repository
git clone <your-repo-url>
cd albinos-protein-viewer
# Install dependencies
npm install
# Start development server
npm run dev- Select a Protein: Click on any of the pre-loaded protein buttons in the left panel
- Change Visualization: Choose different rendering styles (Cartoon, Stick, Sphere, Surface)
- Apply Color Schemes: Select from various color schemes to highlight different aspects
- Load Custom Proteins: Enter any 4-letter PDB ID in the custom input field
- Control the View: Use mouse controls to rotate, zoom, and pan
- Take Screenshots: Capture the current view as a PNG image
- Go Fullscreen: Maximize the viewer for detailed analysis
Explore these fascinating molecular machines:
- Myoglobin (1MBN) - Stores oxygen in muscle cells, enabling athletic performance
- Hemoglobin (2DHB) - Transports oxygen through your bloodstream with remarkable efficiency
- Crambin (1CRN) - A small but powerful plant seed protein protecting against harsh conditions
- Ubiquitin (1UBQ) - A cellular quality-control protein that marks damaged molecules for destruction
- Adenylate Kinase (1AKI) - An energy transfer enzyme vital to cellular metabolism
- Insulin (1L2Y) - Regulates blood sugar, one of nature's most important hormones
- Chrome/Edge (recommended)
- Firefox
- Safari
- Opera
- Well-Organized: Clean separation of concerns for easy exploration of the codebase
- State Management: Centralized application state for predictable behavior
- Error Handling: Comprehensive feedback when things don't go as planned
- Performance: Optimized rendering to keep exploration smooth and responsive
- Documentation: Clear code comments to guide understanding
# Build for production
npm run build
# Preview production build
npm run previewThe built files will be in the dist folder, ready for deployment to any static hosting service.
This tool is built with curiosity-driven development in mind, combining:
- Vite - Lightning-fast development and build experience
- 3DMol.js - WebGL-based molecular visualization for beautiful 3D rendering
- Vanilla JavaScript - Pure, straightforward code for clarity
- CSS3 - Modern styling for a polished experience
- RCSB PDB API - Access to real scientific data on protein structures
The focus is on making complex molecular biology accessible and visually engaging.
MIT License - feel free to use this project for learning and portfolio purposes.
Built with ❤️ and curiosity