A modern platform for exploring anime and manga, built from scratch with a focus on performance, scalability, and developer experience.
- React (powered by Vite)
- TypeScript (with strict typing)
- Redux Toolkit (RTK Query & Redux Persist)
- React Router
- SCSS (modular & themeable)
- motion (animation framework)
- Home & Interactive Widgets for quick browsing of anime, manga, manhwa, manhua
- Detail Pages for in-depth content information
- Smooth & Responsive Animations (page transitions, micro-interactions, typing effects)
- Advanced Data Layer
- RTK Query for efficient API fetching/caching
- Redux Persist for seamless session continuity
- Custom UI Components
- Atomic design: Atoms, Molecules, Organisms
- Reusable components (Label, Box, Image, etc.)
- Design System
- Dark/Light theme toggle (SCSS variables & tokens)
- Responsive layouts, semantic HTML
- Localization (powered by vernac, multi-language ready)
- Robust Error Handling (error boundaries, loading states)
- Modern Tooling
- ESLint & Stylelint for code quality
- Vite for blazing fast builds
- Cool Animations - including typing effect on logo with blinking cursor
- PWA Support - Installable app with offline functionality
- Infinite Scrolling - Seamless content loading
- Advanced Search Filters - Genre, year, type, rating filters
- Anime/Manga Lists - Personal tracking lists (watching, completed, etc.)
- Typing Effect on app logo with blinking cursor
- Smooth Transition Animations between pages
- Hover Effects and engaging micro-interactions
- Delightful Loading Animations
- Responsive Theme Toggle
- 3D Card Flip Effects on content cards
- Parallax Scrolling on detail pages
- Particle Backgrounds for special events
- Dynamic Color Schemes based on content
- Scalable Project Structure
atoms,molecules,organisms: Atomic design for reusable UIpages,layouts: Clear separation of concernsservices: API abstractions (Jikan API)shared: Utilities, hooks, models (e.g.,useIntersectionObserver,useTypingEffect)store: Centralized Redux statestyles: Modular SCSS, design tokens
- Modern React Patterns
- Functional components, hooks, custom hooks (e.g.,
useIntersectionObserver) - Strict TypeScript for maintainability
- Functional components, hooks, custom hooks (e.g.,
- Excellent UI/UX
- Smooth transitions, responsive design, accessibility
- Theme toggle, localization, polished micro-animations
- Core setup & project structure
- Jikan API integration
- Home, anime, and manga pages
- Search & content detail features
- Theme & localization support
- Loading state and error handling
- Typing animation effect on logo
- PWA support
- Infinite feed
- Custom scroll restoration
- Optimizations - lazy loading, SEO, etc.
- Simple analytics service
- Relative units for spacing & fonts
- Additional interactive animations
- Advanced search filters
- User authentication & profiles
- Anime/manga tracking lists
- Recommendation engine
- Social features
- Enhanced offline capabilities
- Performance monitoring
bobanimelist features various engaging animations and visual effects:
- Typing effect on logo - displays app name with typing animation and blinking cursor
- Smooth page transitions - animated navigation between pages
- Card hover effects - visual feedback on cursor hover
- Widget loading animations - content appears with animations while loading
- 3D flip cards - interactive card animations
- Parallax backgrounds - depth effect on detail pages
- Floating particles - dynamic background effects
- Dynamic theme transitions - smooth color scheme changes
# Install dependencies
npm install
# Run development server
npm run devApp runs at http://localhost:5173
# Build for production
npm run buildProduction files will be available in the dist directory.
We welcome contributions from the community. Feel free to create issues or pull requests for:
- Adding new features
- Fixing bugs
- Improving documentation
- Adding animations & visual effects
This project is licensed under the MIT License - see the LICENSE file for more details.
