🔬 Tissue Deck

Tissue Deck is a free, open-source histology learning platform built for 1st-year MBBS students. Experience histology like never before — explore high-resolution zoomable slides with a virtual microscope, access structured theory for every tissue, and get instant AI-powered explanations tailored to your exams. Clean, modern, and designed to make slide identification effortless.

---

✨ Features

🔬 Virtual Microscope

• Smooth Zoom & Pan — High-resolution zooming and panning with boundary constraints
• Linear Slide Navigation — Browse through multiple magnification levels (1/n interface)
• Touch Gesture Support — Pinch-to-zoom and drag-to-pan on mobile devices
• Mouse Wheel Zoom — Desktop-friendly zoom controls with scroll wheel

⚡ Performance Optimizations

• Image Preloading — Adjacent slides preload in background for instant navigation
• WebP Format — All 263 slides converted to WebP for faster decoding
• Cache-First Strategy — Slides load instantly from browser cache after first view

🤖 Meded AI Assistant

• Context-Aware AI — The chatbot knows exactly which tissue you're viewing
• Streaming Responses — Watch the AI type answers in real-time
• Exam-Focused — Get instant, exam-relevant explanations and identification tips
• Secure Authentication — Google sign-in via Firebase Auth
• Rate Limited — 100 messages per user per month

📚 Comprehensive Theory Integration

Every slide includes:

• 📝 Description — Concise overview of the tissue
• 🔬 Key Identification Features — 4-5 diagnostic features for spotting exams
• 📍 Anatomical Location — Where to find it in the body
• ⚙️ Function — Physiological role
• 💡 Exam Tips — High-yield points from an examiner's perspective

📊 Content Coverage

System	Slides
Cardiovascular System	12
Central Nervous System	52
Gastrointestinal Tract	41
Hepatobiliary & Pancreas	29
Eye	42
Musculoskeletal System	15
Urogenital & Reproductive	30
Haematolymphoid System	10
Skin, Thyroid, & More	32

263 slides across 13 organ systems with full theory data.

📱 Progressive Web App (PWA)

• Installable — Add to home screen on Android & iOS
• Full Offline Support — Works 100% offline after first visit
• Progressive Caching — All slides cached silently in background (~33MB)
• Standalone Mode — Runs without browser UI for a native app feel
• Responsive Design — Optimized for desktop, tablet, and mobile

---

🛠️ Tech Stack

Frontend

• React 19 — Component-based architecture
• Vite — Lightning-fast development builds
• Lucide React — Beautiful iconography
• CSS Modules — Modular, scoped styling with glassmorphism effects

Backend & AI

• Vercel Serverless Functions — API routes for AI chat
• Vercel AI Gateway — Unified API for AI model access
• Firebase Auth — Secure Google authentication
• Firestore — Chat logging and rate limiting

Data & Scripting

• Node.js — Scripting environment
• Puppeteer — Headless browser automation
• Cheerio — Server-side HTML parsing
• Axios — HTTP client

---

🚀 Installation

1. Clone the repository:

   git clone https://github.com/PranayJuneja/TissueDeck.git
   cd TissueDeck

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.example to .env.local
   • Add your Firebase and Vercel AI Gateway credentials

4. Start development server:

   npm run dev

   The app will launch at http://localhost:5173.

---

📁 Project Structure

TissueDeck/
├── api/                    # Vercel serverless functions
│   └── chat.js             # AI chat endpoint
├── public/                 # Static assets & slides
│   ├── slides/             # Organized slide images (WebP format)
│   ├── sw.js               # Service Worker for offline support
│   ├── slide-manifest.json # List of all slides for caching
│   ├── favicon.png         # Custom microscope icon
│   └── manifest.json       # PWA manifest
├── scripts/                # Data ingestion & build utilities
│   ├── scanSlides.js       # Slide folder scanner
│   ├── convertToWebP.js    # Image format converter
│   ├── generateSlideManifest.js # Slide manifest generator
│   └── ingest_*.js         # Content ingestion scripts
├── src/
│   ├── components/         # React UI components
│   │   ├── SlideViewer.jsx # Custom zoom/pan viewer with preloading
│   │   ├── TheoryPanel.jsx # Educational side panel
│   │   └── ChatBot.jsx     # AI chatbot interface
│   ├── contexts/           # React contexts
│   │   └── AuthContext.jsx # Firebase auth provider
│   ├── data/slides/        # Category-specific JSON files
│   │   └── index.js        # Data aggregator
│   ├── firebase.js         # Firebase initialization
│   ├── App.jsx             # Main layout
│   └── main.jsx            # Entry point + SW registration
├── .env.example            # Environment template
├── vercel.json             # Serverless config
├── package.json            # Dependencies
└── vite.config.js          # Vite configuration

---

🎯 Perfect For

• ✅ Histology practical exams
• ✅ Spotting tests
• ✅ Viva voce preparation
• ✅ Quick revision before exams
• ✅ Understanding slide identification

---

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or new features:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

💖 Credits

Made with ❤️ by Pranay Juneja

"To err is human, to forgive is design."