π Educational Philosophy Learning Platform - An interactive explorer designed to help students compare philosophical and religious traditions from around the world, with a focus on understanding their perspectives on life's biggest questions.
This app is designed to be user-friendly and accessible for learners of all backgrounds. Navigate through centuries of human wisdom with:
- Simple, Clear Explanations: All content is written in accessible language
- Interactive Timeline: Explore how ideas developed over time
- Three-Pane Dashboard: Compare traditions side-by-side without confusing popups
- Educational Tooltips: Hover over terms like "BCE" or "Abrahamic" for instant definitions
- Start on the Welcome Screen: Read the numbered instructions to understand the layout
- Browse Tradition Cards: Click on any philosophy or religion card on the left
- Explore Details: The center pane shows detailed information about your selected tradition
- Compare Aspects: Click any aspect (like "Nature of Reality") to see how all traditions approach that topic
- Use the Timeline: Filter traditions by time period to see historical development
- Three-Pane Dashboard: No confusing modal popups - everything visible at once
- Aspect Comparison: Click any aspect to compare across all 15 traditions
- Interactive Timeline: Filter traditions by historical periods (3000 BCE to present)
- Educational Tooltips: Hover explanations for technical terms
- Student-Friendly Design: Clear language and intuitive navigation
- Comprehensive Coverage: 15 major world traditions included
- Responsive Design: Works perfectly on tablets and phones
- Type-Safe Development: Built with TypeScript for reliability
For Students & Educators: https://main.philo-explorer.pages.dev
Our comprehensive collection covers 15 major philosophical and religious traditions:
- Judaism (c. 2000 BCE) - Monotheism and ethical living
- Hinduism (c. 1500 BCE) - Dharma, karma, and spiritual liberation
- Buddhism (c. 500 BCE) - Four Noble Truths and the Middle Way
- Confucianism (c. 500 BCE) - Social harmony and virtue ethics
- Jainism (c. 600 BCE) - Non-violence and spiritual purification
- Stoicism (c. 300 BCE) - Virtue, wisdom, and emotional resilience
- Christianity (c. 30 CE) - Love, salvation, and divine grace
- Taoism (c. 400 BCE) - Natural harmony and effortless action
- Islam (c. 610 CE) - Submission to Allah and social justice
- Sikhism (c. 1500 CE) - Devotion, equality, and service
- Secular Humanism (c. 1400 CE) - Human dignity and rational ethics
- Existentialism (c. 1840 CE) - Individual authenticity and responsibility
- Utilitarianism (c. 1780 CE) - Greatest good for the greatest number
- Indigenous Wisdom (Ongoing) - Connection to nature and community
- Nihilism (c. 1860 CE) - Questioning meaning and traditional values
This tool is perfect for:
- Philosophy Courses: Comparative religion and ethics classes
- History Classes: Understanding cultural and intellectual development
- Critical Thinking: Analyzing different approaches to life's big questions
- World Cultures: Exploring diverse human perspectives
- Independent Study: Student research projects on world wisdom traditions
- Aligns with world history and philosophy standards
- Supports comparative analysis assignments
- Enables timeline-based historical study
- Facilitates cross-cultural understanding
- β‘ React 18 + TypeScript - Modern, type-safe development
- π¨ Tailwind CSS - Responsive, utility-first styling
- π§© shadcn/ui Components - Accessible, professional UI elements
- π Lucide React Icons - Consistent, beautiful iconography
- β‘ Vite - Lightning-fast development and builds
- βοΈ Cloudflare Pages - Global CDN deployment
- π Wrangler CLI - Seamless deployment workflow
- π± Responsive Design - Mobile-first, works on all devices
- Node.js 18+
- npm or yarn
- Cloudflare account (for deployment)
# Clone the repository
git clone https://github.com/Sum1Solutions/philo-explorer.git
cd philo-explorer
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5174 in your browser# Create production build
npm run build
# Output will be in the dist/ directory-
Install Wrangler CLI (if not already installed):
npm install -g wrangler@latest
-
Log in to your Cloudflare account:
npx wrangler login
-
Build and deploy:
npm run build npm run cf:deploy
Note: Always run
npm run buildfirst to ensure your latest changes are included in the deployment. Thecf:deployscript uses the pre-configured project settings.
philo-explorer/
βββ src/
β βββ pages/
β β βββ Explorer.tsx # Main app (1,149 lines) - Three-pane dashboard
β βββ components/ui/ # Reusable UI components (cards, tooltips, etc.)
β βββ main.tsx # Application entry point
β βββ index.css # Global styles and CSS variables
βββ tailwind.config.js # Tailwind configuration with color safelist
βββ vite.config.ts # Vite build configuration
βββ wrangler.jsonc # Cloudflare Pages deployment config
βββ CLAUDE.md # Developer documentation for AI assistants
βββ package.json # Dependencies and scripts
- Three-Pane Layout: Replaced modal dialogs with intuitive dashboard
- Tradition Cards: Left pane with color-coded philosophical families
- Detail View: Center pane with comprehensive tradition information
- Comparison Panel: Right pane for aspect-by-aspect analysis
- Interactive Timeline: Bottom component for historical filtering
- Educational Tooltips: Contextual help throughout the interface
# Development
npm run dev # Start development server (localhost:5174)
npm run build # Create production build
npm run preview # Preview production build locally
# Deployment
npm run build # Build first (required!)
npm run cf:deploy # Deploy to Cloudflare Pages
# Code Quality
npm run lint # Run ESLint (if configured)
npm run typecheck # TypeScript type checking- No Modal Popups: Three-pane dashboard keeps everything visible
- Clear Navigation: Numbered instructions on welcome screen
- Educational Tooltips: Hover explanations for technical terms
- Color Coding: Visual families help organize traditions
- Responsive Design: Works on school tablets and phones
- Accessible Language: Clear, understandable explanations
- Comparative Learning: Side-by-side tradition analysis
- Historical Context: Timeline shows development over time
- Comprehensive Coverage: 15 major world traditions
- Cultural Sensitivity: Respectful, balanced presentation
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
For any questions or feedback, please open an issue on GitHub.
π Live Site: https://main.philo-explorer.pages.dev
π GitHub: https://github.com/Sum1Solutions/philo-explorer