A vibrant, gamified encyclopedia app designed for Indonesian students (SD-SMA)
Features • Tech Stack • Getting Started • Documentation • Contributing
SI KLOP is an interactive, gamified learning platform that combines education with engagement. Built specifically for Indonesian students from primary to high school (SD-SMA), it features a stunning neon-cyber aesthetic with comprehensive content about world geography, Indonesian culture, vocabulary building, and AI-powered learning assistance.
To make learning fun, engaging, and accessible through gamification, visual content, and interactive features that keep students motivated and coming back daily.
-
🗺️ World Explorer
- 100+ countries across all continents
- Cultural information, cuisine, landmarks
- Language, currency, and interesting facts
- Search and filter by continent
- Beautiful imagery for each country
-
🇮🇩 Indonesia Deep Dive
- All 38 provinces with complete details
- Traditional clothing (pakaian adat)
- Traditional houses (rumah adat)
- Local cuisine and cultural facts
- Regional filtering system
-
📚 Academic Vocabulary
- 150+ words for SD-SMA levels
- Etymology and word history
- Example sentences and synonyms
- Pronunciation guides (EN/ID)
- Categorized by subject areas
-
💡 Fun Facts
- 45+ fascinating facts
- Categories: World, Indonesia, Geography
- Scientific explanations
- Educational and entertaining
-
⭐ Level & XP System
- 15 progressive levels (Beginner Explorer → Legendary Scholar)
- Earn XP from every activity
- Visual progress tracking
- Level-based achievements
-
🏅 Badge Collection
- 30+ unique badges to unlock
- Multiple rarity tiers (Common → Legendary)
- Categories: Exploration, Learning, Quiz, Streak, Special
- Real-time achievement notifications
-
🔥 Daily Streaks
- Track consecutive learning days
- Streak bonuses and multipliers
- Motivational milestone badges
- Auto-reset at midnight
-
🎯 Daily Challenges
- 3 fresh challenges every day
- Quiz, Exploration, and Vocabulary tasks
- Bonus XP rewards
- Countdown timers
-
❤️ Bookmarks System
- Save favorite countries, provinces, facts, vocabulary
- Quick access to saved content
- Organized by category
- One-click bookmark management
-
📊 Progress Tracker
- Comprehensive learning analytics
- Countries visited & provinces explored
- Quiz history with scores and dates
- Total learning time tracking
- Visual progress bars
-
📜 Learning History
- Complete activity log
- Timestamped entries
- Filter by activity type
- Export capabilities
-
🥇 Global Leaderboard
- Top 100 rankings by XP
- User avatars and titles
- Achievement counts display
- Real-time rank updates
-
🤝 Share Progress
- Share achievements to social media
- Copy progress summary to clipboard
- Shareable rank cards
- Motivate friends to join
- 💬 AI Assistant
- Powered by Perplexity AI
- Deep learning conversations
- Context-aware responses
- Clean, markdown-free formatting
- Credit-based usage system
- 📝 Quiz System
- 10 random questions per quiz
- Multiple choice format
- Instant scoring and feedback
- XP rewards for performance
- Quiz history tracking
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Animations: CSS Transitions & Tailwind
- AI: Perplexity API
- Images: Unsplash
- Avatars: DiceBear API
- API Proxy: Custom Next.js API Route
- Storage: LocalStorage (browser-based)
- State Management: React Hooks (useState, useEffect)
- Data Persistence: Custom storage utilities
- Theme: Neon Cyber Aesthetic
- Colors: Vibrant neons (cyan, purple, green, pink)
- Typography: System fonts optimized for readability
- Responsive: Mobile-first design
- Node.js 18+ installed
- npm or yarn package manager
- Perplexity API key (for AI Assistant feature)
- Clone the repository
git clone https://github.com/yourusername/neon-encyclopedia.git
cd neon-encyclopedia- Install dependencies
npm install
# or
yarn install- Configure API Keys
The Perplexity API key is hardcoded in src/components/AIAssistant.tsx. To use your own key:
Open src/components/AIAssistant.tsx and update the API key:
const apiKey = 'YOUR_PERPLEXITY_API_KEY_HERE';- Run development server
npm run dev
# or
yarn dev- Open your browser
http://localhost:3000
npm run build
npm start
# or
yarn build
yarn startneon-encyclopedia/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── proxy/
│ │ │ └── route.ts # API proxy for external requests
│ │ ├── layout.tsx # Root layout with metadata
│ │ └── page.tsx # Main app with routing logic
│ │
│ ├── components/
│ │ ├── ui/ # shadcn/ui components
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── input.tsx
│ │ │ └── ...
│ │ │
│ │ ├── AIAssistant.tsx # Perplexity AI chat interface
│ │ ├── Bookmarks.tsx # Saved content manager
│ │ ├── DailyChallenges.tsx # Daily tasks system
│ │ ├── Dashboard.tsx # Main navigation hub
│ │ ├── FunFacts.tsx # Interesting facts display
│ │ ├── Gamification.tsx # Badges & achievements UI
│ │ ├── IndonesiaExplorer.tsx # 38 provinces explorer
│ │ ├── Leaderboard.tsx # Global rankings
│ │ ├── ProgressTracker.tsx # Learning analytics
│ │ ├── Quiz.tsx # Interactive quiz system
│ │ ├── Vocabulary.tsx # Academic word learning
│ │ └── WorldCountries.tsx # 100+ countries explorer
│ │
│ └── lib/
│ ├── gamification.ts # XP, levels, badges logic
│ ├── imageData.ts # Image URLs for countries/provinces
│ ├── storage.ts # LocalStorage utilities
│ └── utils.ts # Helper functions
│
├── public/ # Static assets
├── README.md # This file
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
└── tailwind.config.ts # Tailwind CSS config
- Explore Country: +25 XP
- Explore Province: +25 XP
- Bookmark Item: +10 XP
- Complete Quiz (60%+): +50 XP
- Complete Quiz (80%+): +100 XP
- Daily Challenge: +200 XP
- Daily Streak Bonus: +50 XP per day
| Level | Title | XP Required |
|---|---|---|
| 1 | Beginner Explorer | 0 |
| 2 | Curious Learner | 100 |
| 3 | Knowledge Seeker | 250 |
| 5 | Quiz Master | 750 |
| 10 | Geography Expert | 3000 |
| 15 | Legendary Scholar | 10000 |
- Exploration: World Tourist, Continental Explorer, Geography Legend
- Learning: Word Collector, Vocab Master, Polyglot
- Quiz: Quiz Novice, Quiz Champion, Quiz Legend
- Streak: Dedicated Learner, Committed Student, Unstoppable Force
- Special: Early Bird, Night Owl, Speed Demon, Completionist
All user data is stored in browser localStorage:
// Key structure
{
"userProgress": {
"level": 1,
"xp": 0,
"streak": 0,
"lastVisit": "2025-01-15T12:00:00Z",
"visitedCountries": [],
"exploredProvinces": [],
"learnedVocabulary": [],
"quizHistory": [],
"totalLearningTime": 0
},
"bookmarks": {
"countries": [],
"provinces": [],
"facts": [],
"vocabulary": []
},
"achievements": [],
"credits": 1000
}// Request format
POST /api/proxy
{
"protocol": "https",
"origin": "api.perplexity.ai",
"path": "/chat/completions",
"method": "POST",
"headers": {
"Authorization": "Bearer YOUR_API_KEY",
"Content-Type": "application/json"
},
"body": {
"model": "llama-3.1-sonar-small-128k-online",
"messages": [...]
}
}import { WorldCountries } from '@/components/WorldCountries';
<WorldCountries onBack={() => setCurrentView('dashboard')} />import { Gamification } from '@/components/Gamification';
<Gamification onBack={() => setCurrentView('dashboard')} />/* Primary Neon Colors */
--neon-cyan: #00ffff
--neon-purple: #bf00ff
--neon-green: #39ff14
--neon-pink: #ff006e
--neon-blue: #00d9ff
/* Background */
--bg-dark: #0a0a0f
--bg-darker: #050508
/* Text */
--text-light: #ffffff
--text-muted: #94a3b8- Hero: 4xl - 5xl (36px - 48px)
- Heading: 2xl - 3xl (24px - 30px)
- Subheading: xl (20px)
- Body: base (16px)
- Small: sm (14px)
Following Tailwind's spacing scale:
- Tight: 2, 4 (0.5rem, 1rem)
- Normal: 6, 8 (1.5rem, 2rem)
- Loose: 12, 16 (3rem, 4rem)
We welcome contributions! Here's how you can help:
- Check existing issues first
- Create detailed bug report with steps to reproduce
- Include screenshots if applicable
- Open an issue with
[FEATURE]prefix - Describe the feature and its benefits
- Discuss implementation approach
- Fork the repository
- Create feature branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add some AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open Pull Request
- Follow TypeScript strict mode
- Use Tailwind CSS for styling
- Write clear commit messages
- Test on mobile and desktop
- Maintain neon-cyber aesthetic
- LocalStorage Limitations: Data is device-specific and will be lost if browser cache is cleared
- Leaderboard: Currently uses mock data, needs backend for real global rankings
- Images: Dependent on Unsplash CDN availability
- AI Assistant: Requires valid Perplexity API key with sufficient credits
- Backend database integration
- User authentication system
- Real global leaderboard
- Friend system & social features
- More quiz categories and difficulties
- Mobile app (React Native)
- Offline mode with sync
- Audio pronunciation feature
- Video content integration
- Teacher dashboard for schools
- Multiplayer quiz battles
- Study groups and collaboration
- Advanced analytics & AI recommendations
- Content creator platform
- Marketplace for user-generated content
This project is licensed under the MIT License - see the LICENSE file for details.
- AI: Perplexity AI
- Images: Unsplash
- Avatars: DiceBear
- Country data: Various open-source geographical databases
- Indonesia data: Curated from reliable Indonesian sources
- Fun facts: Verified educational content
- Indonesian students for inspiration
- Open-source community for amazing tools
- All contributors and supporters
- GitHub: Repository Issues
- Email: your.email@example.com
- Website: https://neon-encyclopedia.vercel.app
If you find this project useful, please consider giving it a star! ⭐