Domain Web: komik-reader.my.id
Komik READER adalah aplikasi web modern untuk membaca komik online yang dibangun menggunakan teknologi terkini. Aplikasi ini menyediakan pengalaman membaca komik yang lancar, responsif, dan user-friendly dengan fitur-fitur lengkap untuk menemukan, menjelajahi, dan menikmati ribuan judul komik dari berbagai genre.
- Frontend Framework: React 19 dengan TypeScript
- Build Tool: Vite
- Routing: TanStack Router dengan dukungan SSR
- State Management: TanStack Query untuk data fetching dan caching
- UI Components: Shadcn UI (berbasis Radix UI primitives)
- Styling: Tailwind CSS 4
- HTTP Client: Axios
- Animation: Framer Motion
- Icons: Lucide React
- Form Validation: Zod
- Date Handling: date-fns
- Web Scraping: Cheerio (untuk parsing data)
- SSR/SSG: TanStack Start dengan Nitro
- Hero Section: Banner utama dengan navigasi cepat
- Rekomendasi Komik: Daftar komik yang direkomendasikan berdasarkan format
- Komik Terbaru: Update komik terbaru dengan pagination
- Komik Populer: Daftar komik populer sepanjang masa
- Informasi Lengkap: Judul, deskripsi, genre, status, rating, dan statistik
- Cover Image: Background blur dengan overlay untuk estetika
- Chapter List: Daftar chapter dengan thumbnail, tanggal rilis, dan view count
- Pagination: Navigasi chapter dengan infinite scroll
- History Reading: Pelacakan chapter terakhir yang dibaca
- Image Viewer: Tampilan gambar chapter dengan navigasi
- Responsive Design: Optimasi untuk desktop dan mobile
- Navigation: Tombol navigasi antar chapter
- Loading States: Skeleton loading untuk performa
- Search Functionality: Pencarian komik berdasarkan judul
- Real-time Results: Hasil pencarian instan
- Daftar Genre: Kategori komik lengkap
- Filter by Genre: Komik berdasarkan genre tertentu
- No Results Handling: Pesan untuk genre tanpa komik
- Dark/Light Theme: Tema yang dapat disesuaikan
- Responsive Layout: Desain mobile-first
- Smooth Animations: Transisi halus dengan Framer Motion
- Loading Skeletons: Placeholder untuk loading states
- Error Handling: Penanganan error yang elegan
src/
├── api/
│ ├── servers/ # Server functions untuk SSR
│ └── services/ # API services
├── common/
│ ├── components/ # Komponen bersama (Header, Footer, dll.)
│ ├── data/ # Data dummy
│ ├── http/ # Konfigurasi HTTP client
│ ├── interface/ # TypeScript interfaces
│ ├── libs/ # Utility libraries
│ ├── providers/ # Context providers
│ ├── shadcn-ui/ # UI components
│ ├── utils/ # Utility functions
│ └── validation/ # Schema validation
├── features/
│ ├── chapter/ # Komponen chapter
│ ├── comic/ # Komponen komik
│ └── genre/ # Komponen genre
├── integrations/ # Integrasi third-party
├── routes/ # File-based routing
└── styles.css # Global styles
Aplikasi terintegrasi dengan API eksternal dari https://09.shinigami.asia/ yang menyediakan:
- Daftar komik rekomendasi
- Komik terbaru dan update
- Komik populer
- Detail komik
- Daftar chapter
- Data genre
- Pencarian komik
- Node.js (versi terbaru)
- npm atau yarn
npm installnpm run devAplikasi akan berjalan di http://localhost:3000
npm run buildnpm run previewnpm run test- Port Development: 3000
- SSR Enabled: Ya, menggunakan TanStack Start
- Path Aliases:
@/*mengarah ke./src/* - Environment Variables: Dikonfigurasi melalui
env.ts
- Code Splitting: Automatic dengan Vite
- Image Optimization: Lazy loading dan error handling
- Caching: TanStack Query untuk caching API responses
- SSR: Server-side rendering untuk SEO dan performa
- Bundle Analysis: Devtools untuk monitoring
- Chrome (versi terbaru)
- Firefox (versi terbaru)
- Safari (versi terbaru)
- Edge (versi terbaru)
- Logo: "COMICREADER" dengan gradient merah-oranye
- Navigasi: Home, Popular, Genre, Update dengan active state indicators
- Search Bar: Pencarian real-time untuk desktop dan mobile
- Mobile Menu: Sheet overlay untuk navigasi mobile
- Responsive Design: Sticky header dengan backdrop blur
- Copyright: © 2026 ComikReader. All rights reserved.
- Tagline: "Read your favorite Comic anytime, anywhere"
- Simple Layout: Centered text dengan gradient background
- Slider Auto: 3 komik populer dengan auto-rotate setiap 6 detik
- Cover Display: Gambar cover dengan overlay informasi
- Country Badges: Manhwa (Korea), Manga (Jepang), Manhua (China)
- Action Buttons: "Read Now" dan "View Details"
- Statistics: Rating, views, bookmarks dengan icons
- PopularComicCard: Card untuk komik populer dengan rank display
- BaseComicCard: Card standar dengan cover dan info dasar
- UpdateComicCard: Card untuk update dengan tanggal terbaru
- Skeleton Loading: Placeholder animasi untuk loading states
- Hover Effects: Scale dan shadow transitions
- ChapterList: Infinite scroll dengan pagination
- ChapterImage: Viewer gambar dengan navigasi
- ChapterNavigation: Tombol prev/next chapter
- History Tracking: LocalStorage untuk chapter terakhir dibaca
interface Comic {
manga_id: string;
title: string;
alternative_title: string;
description: string;
country_id: string; // "KR", "JP", "CN"
release_year: string;
cover_image_url: string;
cover_portrait_url: string;
bookmark_count: number;
view_count: number;
rank: number;
status: number;
user_rate: number;
latest_chapter_id: string;
latest_chapter_number: number;
taxonomy: Taxonomy;
}- LocalStorage: Penyimpanan chapter terakhir per komik
- Max Entries: 1000 entries untuk performa
- Auto Cleanup: Filter duplikat dan sort by time
- comicDetailValidation: Validasi ID komik
- comicChapterListValidation: Validasi pagination chapter
- comicPaginationValidation: Validasi page dan pageSize
- comicChapterDetailValidation: Validasi chapter ID
- comicRecomendationValidation: Validasi format rekomendasi
- comicGenreValidation: Validasi genre filter
- API Error Responses: Penanganan retcode dan message
- Image Fallback: Default images untuk cover yang gagal load
- Network Errors: Retry logic dengan TanStack Query
- Validation Errors: User feedback untuk input invalid
- Dark Theme: Default theme dengan black/gray palette
- Gradient Accents: Red-orange gradients untuk branding
- Glass Morphism: Backdrop blur effects
- Consistent Spacing: Tailwind spacing scale
- Framer Motion: Smooth transitions dan micro-interactions
- Hero Slider: Slide transitions dengan easing
- Hover States: Scale transforms pada cards
- Loading Animations: Pulse effects pada skeletons
- Mobile: < 768px - Single column layout
- Tablet: 768px - 1024px - Grid 2 columns
- Desktop: > 1024px - Grid 3-4 columns
- Large Desktop: > 1280px - Extended layouts
API_URL=https://09.shinigami.asia/VITE_API_URL_CLIENT=https://09.shinigami.asia/- Port: 3000
- Hot Reload: Enabled
- DevTools: TanStack DevTools integrated
- TypeScript: Strict mode enabled
npm run build- Vite Build: Optimized production build
- SSR Generation: Static pages dengan TanStack Start
- Asset Optimization: Image compression dan code splitting
- Bundle Analysis: Size monitoring
- Vercel: Recommended untuk SSR
- Netlify: Static deployment
- Docker: Containerized deployment
- Node.js Server: Traditional hosting
- Lighthouse Score: Target 90+ untuk semua metrics
- Bundle Size: < 500KB gzipped
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- TypeScript Strict: No any types, strict null checks
- ESLint: Configured untuk consistency
- Prettier: Code formatting
- Path Aliases: @/* untuk clean imports
- Functional Components: React hooks pattern
- Props Interface: Typed props untuk type safety
- Default Props: Sensible defaults
- Error Boundaries: Graceful error handling
- TanStack Query: Server state management
- Local State: React useState untuk UI state
- Context: Theme provider untuk global state
- LocalStorage: Persistent user preferences
- Component Testing: React Testing Library
- Utility Functions: Jest untuk pure functions
- API Mocks: MSW untuk API testing
- Route Testing: TanStack Router testing
- API Integration: End-to-end API flows
- User Journeys: Critical user paths
- Playwright: Cross-browser testing
- CI/CD: Automated test runs
- Visual Regression: Screenshot comparisons
- Offline reading capability
- Bookmark/favorites system
- Advanced search filters
- User authentication
- Reading progress sync
- PWA features
- Multi-language support
- Dark/light theme toggle
- Reading statistics
- Social sharing
- Mobile app (React Native)
- Custom reading themes
- Community features
- Premium subscriptions
- AI recommendations
- Fork repository
- Clone locally
- Install dependencies:
npm install - Start dev server:
npm run dev - Create feature branch
- Make changes with tests
- Submit pull request
- Follow existing TypeScript/React patterns
- Add proper JSDoc comments
- Include unit tests for new features
- Update README for significant changes
- Follow conventional commit messages
- Title: [Feature/Bug] Brief description
- Description: Detailed changes and rationale
- Testing: How to test the changes
- Screenshots: UI changes screenshots
- Breaking Changes: Mark if any
Build Errors
- Clear node_modules:
rm -rf node_modules && npm install - Check TypeScript errors:
npx tsc --noEmit - Verify environment variables
API Issues
- Check API_URL in environment
- Verify network connectivity
- Check browser console for CORS errors
Performance Issues
- Enable React DevTools Profiler
- Check bundle size with
npm run build - Optimize images and lazy loading
Styling Issues
- Verify Tailwind config
- Check CSS imports in styles.css
- Test responsive breakpoints
Proyek ini bersifat privat dan tidak untuk distribusi publik.
- Shinigami API: Data source untuk komik
- Shadcn UI: UI component library
- TanStack: Router, Query, dan Start frameworks
- Vite: Fast build tool
- Tailwind CSS: Utility-first CSS framework
Untuk dukungan teknis atau pertanyaan:
- Email: support@komik-reader.my.id
- Website: komik-reader.my.id
- GitHub Issues: Laporkan bug atau request fitur
Last Updated: January 3, 2026 Version: 1.0.0
Proyek ini bersifat privat dan tidak untuk distribusi publik.
Untuk informasi lebih lanjut, kunjungi komik-reader.my.id