A comprehensive educational platform for exploring countries, cultures, and landmarks worldwide. Built with Next.js and TypeScript, featuring interactive maps, detailed country information, cultural insights, and engaging educational tools.
- Global Search: Real-time search across countries, cities, landmarks, and institutions
- Interactive World Map: Clickable countries with smooth navigation and zoom controls
- Country Pages: Comprehensive country profiles with detailed information
- Browse & Filter: Advanced filtering by continent, population, and features
- Landmarks & Monuments: Famous buildings, structures, and historical sites
- Cultural Insights: Languages, traditions, lifestyle, and cultural practices
- Geographic Data: Rivers, mountains, cities, and natural features
- Educational Institutions: Universities, museums, and learning centers
- Currency Information: Real currency images, exchange rates, and economic data
- Quiz System: Educational quizzes about countries and cultures with timed challenges
- Interactive Games: Engaging learning activities and challenges
- Random Facts: Discover interesting facts about different countries
- Historical Timeline: Explore historical events and periods with interactive map slider
- Nature Explorer: Discover wildlife, national parks, and natural wonders
- Culture & Lifestyle Explorer: Deep dive into social norms, cuisine, festivals, and values of different cultures
- Currency Converter: Real-time currency exchange rates with visual currency representations
- Weather Widget: Current weather information for different locations
- Language Explorer: Learn about different languages, phrases, and writing systems
- Environment Dashboard: Climate data and environmental statistics with global rankings
- Global Rankings: Compare countries by various metrics including tallest buildings, population, and more
- Dark/Light Theme: Toggle between themes for comfortable viewing
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Smooth Animations: Engaging transitions and interactive elements
- Accessibility: Built with accessibility best practices
- Progressive Web App: Installable on devices with offline capabilities
- Next.js 15.4.6 - React framework with App Router
- React 19.1.1 - UI library with latest features
- TypeScript 5 - Type-safe development
- Radix UI - Accessible component primitives
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icon library
- Next Themes - Theme switching functionality
- React Hook Form - Form handling and validation
- Zod - Schema validation
- Date-fns - Date manipulation utilities
- Recharts - Chart library for data visualization
- Embla Carousel - Smooth carousel components
- ESLint - Code linting and formatting
- PostCSS - CSS processing
- Autoprefixer - CSS vendor prefixing
WorldExplorer/
├── 📁 app/ # Next.js App Router pages
│ ├── 📁 browse/ # Browse countries page
│ ├── 📁 country/ # Individual country pages
│ ├── 📁 search/ # Search results page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ ├── loading.tsx # Loading UI
│ ├── not-found.tsx # 404 page
│ └── page.tsx # Homepage
├── 📁 components/ # Reusable React components
│ ├── 📁 ui/ # Base UI components (Radix UI)
│ ├── browse-filters.tsx # Country browsing filters
│ ├── country-*.tsx # Country-specific components
│ ├── global-*.tsx # Global navigation and search
│ ├── interactive-*.tsx # Interactive features
│ ├── quiz-system.tsx # Educational quiz system
│ ├── currency-converter.tsx # Currency conversion tool
│ └── theme-*.tsx # Theme management
├── 📁 hooks/ # Custom React hooks
├── 📁 lib/ # Utility functions and services
├── 📁 public/ # Static assets
├── 📁 styles/ # CSS modules and stylesheets
├── components.json # Shadcn/ui configuration
├── next.config.mjs # Next.js configuration
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation- Node.js 18.0 or later
- npm, yarn, or pnpm package manager
-
Clone the repository
git clone https://github.com/1046prt/WorldExplorer.git cd WorldExplorer -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000 to see the application.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint for code quality
Intelligent search functionality that finds countries, cities, landmarks, and institutions with real-time suggestions and keyboard navigation.
Comprehensive country information including population, currency, languages, timezones, and cultural data.
Educational tools to make learning about geography and cultures engaging and fun:
- Quiz System: Timed geography quizzes with multiple question types (flags, capitals, landmarks)
- Score Tracking: Performance metrics with completion badges
- Pause/Resume: Control quiz timing with pause functionality
Real-time currency conversion with visual currency representations and swap functionality.
Dark and light theme support with smooth transitions and user preference persistence.
Explore natural wonders, volcanoes, migrations, rivers, climate zones, and ecosystems with:
- Category-based filtering
- Search functionality
- Map integration for locations
- Detailed information cards
Deep dive into cultural aspects of countries including:
- Social norms and etiquette
- Music and literature
- Cuisine and ingredients
- Festivals and celebrations
- Architecture and landmarks
- Core values and concepts
Learn about languages from around the world:
- Common phrases with translations
- Writing systems and scripts
- Interactive previews of scripts
- Country-specific language information
View environmental metrics and sustainability indicators:
- Carbon emissions data
- Renewable energy statistics
- Forest coverage information
- Water quality metrics
- Waste management data
- Climate change indicators
Compare countries across various metrics:
- Tallest buildings
- Largest populations
- Highest GDP
- Most spoken languages
- And many more categories
- Global Search Bar: Search across all content types
- Advanced Filters: Filter by continent, population, language
- Smart Suggestions: Autocomplete with relevant results
- Search Results Page: Comprehensive search results with pagination
- Basic Info: Population, area, capital, languages
- Geography: Rivers, mountains, cities, climate
- Culture: Traditions, festivals, cuisine, lifestyle
- Economy: Currency, GDP, major industries
- Education: Universities, institutions, literacy rates
- History: Historical events, timeline, heritage sites
- Clickable Maps: Interactive world map with country selection
- Image Galleries: High-quality photos of landmarks and culture with modal viewing
- Data Visualizations: Charts and graphs for statistics
- Modal Dialogs: Detailed information in overlay windows
- Timed Quizzes: Interactive educational challenges
- Quiz System: Test knowledge with geography questions
- Random Facts: Discover interesting tidbits about countries
- Historical Timeline: Explore how the world has changed over time
- Comparative Data: Rank countries by various metrics
The application supports both light and dark themes. Theme preference is automatically saved and restored.
Built with Radix UI components for accessibility and customization. Components are configured in components.json.
Strict TypeScript configuration for type safety and better development experience.
The application is configured as a PWA with a web manifest for installation on devices.
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use existing component patterns
- Add proper error handling
- Include responsive design considerations
- Test on multiple devices and browsers
Please use the GitHub Issues page to report bugs or request new features.
This project is licensed under the MIT License, see the LICENSE file for details.
Shiven Anandam