Skip to content

mrbrightsides/tanya-abi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

4 Commits
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ‘จโ€๐Ÿ‘ฆ Tanya Abi

Sosok Ayah Virtual untuk Anak-anak Kreatif dan Penuh Rasa Penasaran

Tanya Abi adalah aplikasi chat AI dengan personaliti kebapakan yang hangat dan bijaksana, dirancang khusus untuk menjadi teman dan mentor bagi anak-anak yang memiliki rasa ingin tahu tinggi.


๐ŸŒŸ Visi

Tanya Abi hadir untuk mengisi kekosongan sosok ayah dalam kehidupan anak-anak - baik karena ayah yang sibuk, tidak selalu tersedia, atau bahkan tidak hadir sama sekali.

Aplikasi ini berfungsi sebagai:

  • ๐Ÿ’™ Pengganti Absennya Ayah di Rumah - Saat anak butuh jawaban cepat dan ayah tidak ada
  • ๐Ÿง  Mentor Virtual - Menjawab pertanyaan dari yang ringan sampai pertanyaan berat tentang kehidupan
  • ๐Ÿค— Teman Bicara - Memberikan nasihat bijaksana dengan cara yang mudah dipahami anak
  • ๐Ÿ“š Guru Sabar - Mendorong curiosity dan pembelajaran dengan pendekatan yang hangat

Kami percaya setiap anak berhak mendapat bimbingan dan perhatian, terutama mereka yang tumbuh tanpa kehadiran sosok seorang ayah. Tanya Abi hadir untuk mengisi kekosongan itu dengan teknologi AI yang penuh empati.


โœจ Fitur Utama

๐Ÿ’ฌ Chat dengan AI "Abi"

  • Personaliti kebapakan yang hangat, sabar, dan supportif
  • Menjawab pertanyaan dengan bahasa yang mudah dipahami anak
  • Memberikan nasihat bijaksana untuk pertanyaan tentang kehidupan
  • Powered by Perplexity AI (gratis dan powerful!)

๐ŸŽค Voice Input

  • Bicara langsung ke Abi tanpa perlu mengetik
  • Perfect untuk anak-anak yang belum lancar mengetik
  • Support bahasa Indonesia

๐Ÿ”Š Text-to-Speech

  • Dengar jawaban Abi dengan suara laki-laki
  • Suara yang natural dan ramah
  • Tombol "Dengarkan" di setiap pesan

๐Ÿ“š Sumber Referensi

  • Setiap jawaban dilengkapi citation dari sumber terpercaya
  • Link clickable untuk verifikasi informasi
  • Copy URL dengan satu klik
  • Transparansi dan edukasi tentang pentingnya sumber

โญ Favorites / Bookmark

  • Star jawaban penting untuk disimpan
  • Tab khusus untuk review favorites
  • Build personal knowledge base
  • Easy reference untuk belajar

โšก Quick Actions

  • 20+ pertanyaan populer siap dipilih
  • Filter by kategori
  • One-click ask tanpa perlu ketik
  • Reduce "blank page syndrome"

๐Ÿ“… Daily Question Prompt

  • Pertanyaan menarik setiap hari
  • Stimulasi curiosity konsisten
  • Build habit of learning
  • "Tahukah kamu...?" dari Abi

๐ŸŽฏ Kategori Pertanyaan

  • Sains & Alam ๐ŸŒค๏ธ
  • Kehidupan ๐Ÿ’
  • Sekolah ๐Ÿ“š
  • Teknologi ๐Ÿค–
  • Hobi & Minat ๐ŸŽจ
  • Umum ๐ŸŒ

๐Ÿ“ Thread Management

  • Kelola berbagai topik percakapan terpisah
  • Semua percakapan tersimpan otomatis
  • Bisa dilacak kapan saja
  • Hapus thread yang tidak diperlukan

โš™๏ธ Pengaturan Personal

  • Atur nama panggilan untuk Abi (Ayah, Bapak, Papa, dll)
  • Atur nama kamu untuk personalisasi
  • Pilih dari 10 avatar Abi
  • Toggle fitur suara
  • Atur reminder harian

๐ŸŒ™ Dark Mode

  • Nyamanin mata saat malam hari
  • Neon glowing Web3 aesthetic
  • Beautiful cyberpunk design
  • One-click toggle

๐Ÿ’พ Penyimpanan Lokal

  • Tidak perlu login atau registrasi
  • Satu gadget = satu memori pribadi
  • Semua data tersimpan aman di perangkat
  • Privacy-first approach

โฐ Reminder System

  • Atur waktu pengingat untuk ngobrol dengan Abi
  • Multiple reminders support
  • Browser notifications
  • On/off toggle untuk setiap reminder

๐ŸŽ‰ Onboarding Experience

  • Welcome message hangat saat first visit
  • 3-step tutorial fitur-fitur
  • Interactive dan engaging
  • Skip option available

๐ŸŽจ Design Philosophy

Tanya Abi menggunakan Neon Glowing Web3 Aesthetic dengan:

  • ๐Ÿ’œ Neon colors (Cyan, Purple, Pink, Magenta)
  • โœจ Glowing effects & animations
  • ๐ŸŒˆ Animated gradients
  • ๐Ÿ’Ž Glassmorphism
  • โšก Smooth transitions
  • ๐Ÿš€ Cyberpunk vibes

Design ini dipilih untuk:

  • Menarik minat anak-anak generasi digital
  • Modern dan futuristic
  • Eye-catching tapi tetap readable
  • Professional namun fun

๐Ÿ›  Tech Stack

Frontend

  • Next.js 15 - React framework dengan App Router
  • TypeScript - Type-safe development
  • Tailwind CSS - Utility-first styling
  • Radix UI - Accessible component primitives
  • Lucide React - Beautiful icon system

AI & APIs

  • Perplexity AI - Conversational AI (gratis!)
  • Web Speech API - Text-to-Speech & Speech Recognition
  • Fetch API - HTTP requests via proxy

Storage & State

  • localStorage - Client-side persistence
  • React Hooks - State management (useState, useEffect)
  • Context API - Optional global state

Tools & Utilities

  • date-fns - Date manipulation
  • clsx - Conditional className
  • Sonner - Toast notifications

๐Ÿ“ฆ Installation

Prerequisites

  • Node.js 18+ atau 20+
  • npm atau yarn atau pnpm

Setup

  1. Clone repository
git clone <repository-url>
cd tanya-abi
  1. Install dependencies
npm install
# or
yarn install
# or
pnpm install
  1. Setup Perplexity API Key

Edit file src/services/aiService.ts dan ganti API key:

'Authorization': 'Bearer YOUR_PERPLEXITY_API_KEY'

Dapatkan API key gratis di: Perplexity AI

  1. Run development server
npm run dev
# or
yarn dev
# or
pnpm dev
  1. Open browser
http://localhost:3000

๐Ÿš€ Deployment

Deploy to Vercel (Recommended)

  1. Push to GitHub
git add .
git commit -m "Initial commit"
git push origin main
  1. Deploy to Vercel
  • Go to vercel.com
  • Import your GitHub repository
  • Click Deploy
  • Done! ๐ŸŽ‰

Custom Domain Setup

Update next.config.mjs untuk allow iframe embedding dari domain kamu:

{
  key: 'Content-Security-Policy',
  value: "frame-ancestors 'self' https://yourdomain.com;"
}

๐Ÿ“ฑ WebView / Mobile App

Tanya Abi sudah dioptimasi untuk WebView deployment dan siap untuk:

  • โœ… Google Play Store
  • โœ… Apple App Store
  • โœ… Capacitor / Ionic
  • โœ… React Native WebView
  • โœ… Flutter WebView

Features

  • Mobile-first responsive design
  • Touch-friendly button sizes (44x44px minimum)
  • Safe area padding untuk notch/status bar
  • Smooth vertical scrolling
  • PWA support
  • Offline-ready architecture

Security Headers

  • Proper CORS configuration
  • CSP for iframe embedding
  • XSS Protection
  • Content Type Options

Lihat WEBVIEW_DEPLOYMENT.md untuk panduan lengkap.


๐ŸŽฏ Use Cases

Untuk Anak-anak

  • โ“ Bertanya tentang hal-hal yang mereka penasaran
  • ๐Ÿ“– Belajar dengan cara yang fun dan engaging
  • ๐Ÿ’ญ Mendapat nasihat bijaksana untuk masalah kehidupan
  • ๐Ÿง  Build knowledge base personal
  • ๐ŸŽ“ Develop critical thinking skills

Untuk Orang Tua

  • ๐Ÿ  Supplement parenting saat sibuk atau tidak ada
  • ๐Ÿ“š Educational tool yang trusted
  • ๐Ÿ”’ Privacy-first (no data collection)
  • ๐Ÿ’ฐ Gratis (no subscription needed)
  • โš™๏ธ Bisa customize sesuai kebutuhan anak

Untuk Guru/Pendidik

  • ๐ŸŽ“ Tool pembelajaran tambahan
  • ๐Ÿ’ฌ Encourage student curiosity
  • ๐Ÿ“Š Transparansi sumber informasi
  • ๐ŸŒ Accessible 24/7

๐Ÿ” Privacy & Security

Tanya Abi sangat serius tentang privacy anak-anak:

  • โœ… No Registration - Tidak perlu email, nomor HP, atau data pribadi
  • โœ… Local Storage - Semua data tersimpan di device, bukan di server
  • โœ… No Tracking - Tidak ada analytics atau tracking user behavior
  • โœ… No Data Collection - Kami tidak mengumpulkan atau menjual data
  • โœ… Offline-First - Core features berfungsi tanpa internet (kecuali AI responses)
  • โœ… Open Source - Code bisa diaudit oleh siapa saja

๐Ÿค Contributing

Kami welcome contributions dari community! Kalau kamu punya ide atau ingin improve Tanya Abi:

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

Ideas for Contributions

  • ๐ŸŒ Multi-language support
  • ๐ŸŽจ More avatar options
  • ๐Ÿ“Š Analytics dashboard untuk orang tua
  • ๐ŸŽฎ Gamification elements
  • ๐Ÿ”Š More TTS voices
  • ๐ŸŽฏ Better question suggestions
  • ๐Ÿ“ฑ Native mobile app
  • โ™ฟ Accessibility improvements

๐Ÿ—บ๏ธ Roadmap

Phase 1: Core Features โœ… (DONE)

  • AI Chat dengan personaliti Abi
  • Thread management
  • Voice input & TTS
  • Citations & references
  • Favorites system
  • Quick actions
  • Daily questions
  • Onboarding
  • Dark mode
  • Web3 neon design

Phase 2: Enhancement ๐Ÿšง (IN PROGRESS)

  • Search in conversations
  • Export chat as PDF
  • Share favorites with friends
  • Weekly learning summary
  • Achievement badges
  • Question categories stats

Phase 3: Advanced Features ๐Ÿ”ฎ (PLANNED)

  • Multi-language support (English, etc)
  • Parental controls & monitoring
  • Voice mode (auto TTS)
  • Image understanding (ask about pictures)
  • Collaborative learning (multi-user)
  • Integration with education platforms

Phase 4: Platform Expansion ๐Ÿš€ (FUTURE)

  • Native iOS app
  • Native Android app
  • Desktop app (Electron)
  • Browser extension
  • Telegram bot
  • WhatsApp integration

๐Ÿ“Š Performance

Build Stats:

Route (app)                      Size    First Load JS
โ”Œ ฦ’ /                         48.4 kB       250 kB
โ”œ ฦ’ /api/health                 130 B       202 kB
โ”œ ฦ’ /api/logger                 130 B       202 kB
โ”” ฦ’ /api/proxy                  130 B       202 kB

Lighthouse Scores (Target):

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 95+
  • SEO: 100

๐Ÿ› Known Issues

  • TTS voice selection varies by browser and OS
  • Some browsers require user interaction before TTS works
  • Voice input requires microphone permissions
  • localStorage has size limits (typically 5-10MB)

โ“ FAQ

Q: Apakah gratis?
A: Ya! Tanya Abi 100% gratis. Kami menggunakan Perplexity AI yang tidak memerlukan biaya.

Q: Apakah aman untuk anak-anak?
A: Sangat aman. Semua data tersimpan lokal di device, tidak ada tracking, dan AI diprogram untuk memberikan jawaban yang appropriate untuk anak-anak.

Q: Apakah perlu internet?
A: Ya, untuk AI responses. Tapi UI dan fitur lainnya tetap berfungsi offline.

Q: Bisa digunakan di HP?
A: Bisa! Tanya Abi fully responsive dan touch-optimized untuk mobile devices.

Q: Apakah bisa ganti bahasa?
A: Saat ini support Bahasa Indonesia. Multi-language support akan ditambahkan di future updates.

Q: Data disimpan dimana?
A: Semua data (chat, settings, favorites) tersimpan di localStorage browser. Tidak ada yang dikirim ke server.


๐Ÿ“„ License

MIT License - feel free to use, modify, and distribute.


๐Ÿ’Œ Contact & Support

Punya pertanyaan, saran, atau feedback?


๐Ÿ™ Acknowledgments

Tanya Abi dibuat dengan โค๏ธ untuk anak-anak Indonesia yang kreatif dan penuh rasa penasaran.

Special thanks to:

  • Perplexity AI - For amazing free AI API
  • Next.js Team - For the awesome framework
  • Vercel - For free hosting
  • Open Source Community - For all the amazing tools

๐ŸŒŸ Star Us!

Jika Tanya Abi bermanfaat untuk kamu atau anak-mu, please give us a โญ๏ธ on GitHub! It helps us reach more people who need it.


Made with ๐Ÿ’™ for Indonesian Children

"Setiap anak berhak mendapat bimbingan dan perhatian"

Website โ€ข Report Bug โ€ข Request Feature

About

Aplikasi chat AI dengan personaliti kebapakan yang hangat dan bijaksana, dirancang khusus untuk menjadi teman dan mentor bagi anak-anak yang memiliki rasa ingin tahu tinggi.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors