🌍 Making nuclear energy education accessible to everyone through interactive design and technical accuracy.
From fission to Fukushima: Nuclear energy explained through interactive diagrams, balanced analysis, and modern UX.
- Nuclear Basics: Fundamentals of fission, critical mass, chain reactions
- Reactor Types: Interactive diagrams of PWR, BWR, CANDU, RBMK reactors
- Safety Systems: Defense in depth, containment structures, emergency cores
- Accident Analysis: Chernobyl, Fukushima, Three Mile Island case studies
- Climate & Nuclear: Role in decarbonization, carbon-free baseload power
- Nuclear Waste: Storage, disposal, and long-term management
- 🧮 Dose Calculator: Personalized annual radiation exposure with shareable results
- 🎯 Career Quiz: Match your interests to 9 nuclear industry career paths
- 🎮 Interactive Reactor Diagrams: Hover to explore PWR components
- 📊 Quizzes: Test your knowledge with localStorage score tracking
- 🔍 Site-Wide Search: Instant results with keyboard navigation
- 🗺️ Global Nuclear Map: Reactors worldwide visualization
- 📖 Comprehensive Glossary: 100+ technical terms explained
- 📱 PWA Support: Installable app with offline caching
- 🌓 Light/Dark Mode: Theme toggle with smart defaults
- 📱 Mobile Responsive: Touch-optimized for all devices
- ⚡ Smooth Animations: Page transitions with Framer Motion
- ♿ Accessible: WCAG AA compliant, keyboard navigable
- 💾 Auto-Save: Quiz and calculator progress saved locally
Professional dropdown menus organizing content into logical categories:
- Learn: Basics, Reactors, Accidents, Safety
- Understand: Pros/Challenges, Climate, Waste, Myths
- Explore: Map, Canada, Careers, Glossary, Resources
- Dark mode default for comfortable reading
- Light mode support throughout
- Theme-locked technical diagrams preserve specialized color schemes
- React 19.2 - UI library
- TypeScript 5.9 - Type safety
- Vite 5.4 - Build tool (lightning-fast dev server)
- Tailwind CSS 4.1 - Utility-first styling
- Framer Motion 12.23 - Smooth animations
- React Router 7.11 - Client-side routing
- vite-plugin-pwa - Progressive Web App support
- Lucide React - Modern, tree-shakeable SVG icons
- Vercel - Hosting platform with auto-deploy
- GitHub - Version control
- Node.js 18+ and npm
# Clone the repository
git clone https://github.com/yourusername/nuclear-safety-edu.git
cd nuclear-safety-edu
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5173# Create optimized production build
npm run build
# Preview production build locally
npm run previewnuclear-safety-edu/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Layout.tsx # Navbar, footer, page wrapper
│ │ ├── ReactorDiagram.tsx # Interactive PWR schematic
│ │ ├── Breadcrumbs.tsx
│ │ └── JargonTooltip.tsx
│ ├── pages/ # Route components
│ │ ├── HomePage.tsx
│ │ ├── ReactorsPage.tsx
│ │ ├── AccidentsPage.tsx
│ │ └── ... (20+ pages)
│ ├── data/ # Content and search index
│ │ ├── reactors.ts
│ │ ├── accidents.ts
│ │ ├── quizzes.ts
│ │ └── searchIndex.ts
│ ├── contexts/ # React Context providers
│ │ └── ThemeContext.tsx
│ ├── types/ # TypeScript type definitions
│ ├── index.css # Global styles, Tailwind imports
│ └── main.tsx # App entry point
├── public/ # Static assets
├── index.html # HTML template
├── tailwind.config.js # Tailwind configuration
├── vite.config.ts # Vite configuration
└── vercel.json # Vercel SPA routing config
- Push code to GitHub (see below)
- Go to vercel.com
- Import your GitHub repository
- Vercel auto-detects Vite settings:
- Framework: Vite
- Build Command:
npm run build - Output Directory:
dist
- Click Deploy
Post-Deployment:
- Update Plausible Analytics domain in
index.html:<script defer data-domain="YOUR-DOMAIN.vercel.app" src="https://plausible.io/js/script.js"></script>
This project uses Plausible Analytics - a privacy-focused, GDPR-compliant alternative to Google Analytics.
No cookies, no tracking across websites, fully transparent.
To set up:
- Create account at plausible.io
- Add your domain
- Update
data-domainattribute inindex.html
Hover over components in the PWR diagram to see:
- Component name and function
- Real-time highlighting
- Educational tooltips
- Instant fuzzy search across all content
- Keyboard navigation (arrow keys, Enter)
- Categorized results (reactors, accidents, concepts)
- LocalStorage-based score persistence
- Multiple difficulty levels
- Immediate feedback
- User preference saved to localStorage
- System respects prefers-color-scheme
- Certain sections (diagrams) theme-locked for clarity
This is an educational project. Contributions welcome!
Areas for improvement:
- Additional reactor types (Gen IV, fusion)
- Control room simulator
- 3D reactor models
- Country-specific pages (France, China, etc.)
See docs/ROADMAP.md for future expansion plans.
MIT License - feel free to use for educational purposes.
Saikat Ghosh
- Building this to make nuclear energy education accessible
- Interested in clean tech, energy systems, and climate solutions
- Connect: LinkedIn | GitHub
This project uses information from authoritative sources to ensure technical accuracy:
Regulatory & Safety:
- International Atomic Energy Agency (IAEA) - Global nuclear safety standards
- U.S. Nuclear Regulatory Commission (NRC) - Regulatory oversight and safety
- Canadian Nuclear Safety Commission (CNSC) - CANDU reactor expertise
Energy Data:
- U.S. Energy Information Administration (EIA) - Energy statistics and analysis
- World Nuclear Association - Industry data and reports
- Our World in Data - Energy - Climate and energy statistics
Academic & Technical:
- MIT OpenCourseWare - Nuclear Engineering courses
- ITER Project Documentation - Fusion research
- DOE Office of Nuclear Energy - Advanced reactor R&D
Accident Analysis:
- Official investigation reports (Chernobyl Forum, Fukushima IAEA Mission, TMI President's Commission)
Note: This is an educational project. For official guidance on nuclear safety or regulation, consult the relevant national authority.
Data Sources:
- International Atomic Energy Agency (IAEA)
- U.S. Nuclear Regulatory Commission (NRC)
- Canadian Nuclear Safety Commission (CNSC)
- U.S. Energy Information Administration (EIA)
Inspiration:
- World Nuclear Association educational materials
- MIT Nuclear Engineering courses
- ITER fusion project documentation
This is an educational project. Content is based on public information from authoritative sources (IAEA, NRC, CNSC) but should not be considered official guidance. For regulatory or safety-critical information, consult official nuclear authorities.
- Production build: ~692 KB (gzipped: ~194 KB)
- TTI (Time to Interactive): <3s on 3G
- Lighthouse Score: 95+ (Performance, Accessibility, SEO)
- PWA: 12 assets precached for offline support
- Chrome/Edge 100+
- Firefox 100+
- Safari 15+
- Mobile browsers (iOS Safari, Chrome Mobile)
- PWA installable on all platforms
- Dev server has esbuild vulnerability (doesn't affect production)
- Large bundle size - consider code splitting for v2.0
v1.3 (Current) ✅
- ✅ 20+ comprehensive pages
- ✅ Interactive reactor diagrams
- ✅ Mega-menu navigation
- ✅ Quiz system with localStorage
- ✅ Light/dark mode
- ✅ Radiation Dose Calculator (shareable results, PDF export)
- ✅ Career Quiz (9 nuclear careers, weighted matching)
- ✅ PWA Support (installable, offline caching)
- ✅ Nuclear Security Specialist career path
- ✅ SMR context in career profiles
v2.0 (Planned)
- Control room simulator
- 3D reactor models (Three.js)
- Energy economics comparison tool
- Country-specific pages
- Discussion forums
Built with ❤️ for nuclear education and climate action