A sophisticated, modern web application for managing your digital book collection featuring an infinite horizontal carousel, real books with authentic covers, and seamless external API integration. Built with vanilla HTML, CSS, and JavaScript.
- Smooth Infinite Scroll with CSS animations showcasing featured books
- 30 Curated Books with validated, high-quality cover images
- Auto-play Toggle with intuitive pause/play controls
- Hover Interactions that pause the carousel for better UX
- Responsive Design that works seamlessly on all devices
- Beautiful Visual Effects with gradient overlays and ambient glow
- Extensive Library with real books featuring genuine covers, ISBNs, and metadata
- Multiple Genres: Classic Literature, Science Fiction, Fantasy, Mystery, Non-Fiction, Biography
- High-Quality Images from trusted sources (Google Books, Open Library, Unsplash)
- Accurate Publication Data including publishers, dates, and page counts
- Smart Deduplication prevents duplicate books from external APIs
- Clean, Minimalist Design with professional typography and spacing
- Dark/Light Mode with smooth transitions and persistent preferences
- Grid/List Views for personalized browsing experience
- Smooth Animations and micro-interactions throughout
- Compact Hero Section optimized for featured content visibility
- Mobile-First Design with responsive navigation and touch gestures
- Real-time Search with debounced input across titles, authors, genres, and descriptions
- Smart Genre Filtering with dynamic dropdown population
- Multiple Sort Options (title, author, publication date, page count)
- Pagination System for efficient large collection browsing
- No Results Handling with helpful user guidance
- Personal Favorites with heart-based system and visual indicators
- Persistent Storage using localStorage with data integrity
- Quick Management with one-click add/remove functionality
- Counter Badges showing reading list count in navigation
- Modal Interface for detailed reading list management
- Live Statistics with animated progress bars and counters
- Real-time Updates showing collection metrics (books, authors, genres)
- Visual Data Representation with gradient progress indicators
- Hover Effects with scale animations for interactive feedback
- Google Books API for extensive book database access
- Open Library API as backup data source
- Smart Image Validation with URL pattern recognition for faster loading
- Automatic Deduplication prevents duplicate entries across sources
- Error Handling with graceful fallbacks and user feedback
- Typewriter Animation with rotating inspirational messages
- Smooth Transitions throughout the interface with cubic-bezier easing
- Toast Notifications with contextual feedback and auto-dismiss
- Modal Management with proper focus handling and keyboard navigation
- Contact Form with real-time validation and professional styling
- Keyboard Shortcuts for power users (search, add book, reading list)
- Loading States with elegant spinners and skeleton screens
- Error Boundaries with user-friendly error messages
- Smart Image Loading with validation and fallback mechanisms
- Debounced Search preventing excessive API calls and operations
- Efficient DOM Management with targeted updates and minimal reflows
- CSS Animations using GPU acceleration for smooth performance
- Optimized Filtering with early returns and efficient algorithms
- Lazy Rendering for large book collections
- Memory Management with proper cleanup of event listeners
| Technology | Purpose | Version |
|---|---|---|
 |
Structure & Semantics | HTML5 |
 |
Styling & Animations | CSS3 |
 |
Interactive Functionality | ES6+ |
 |
Utility-First Styling | v3.x |
 |
Icons | v6.4 |
- Gradient Backgrounds with carefully chosen color palettes
- Backdrop Blur Effects for modern glass-morphism design
- Smooth Animations with optimized CSS keyframes
- Responsive Typography with fluid sizing and optimal readability
- Custom Book Covers generated for missing images with brand colors
- Interactive Hover States with scale transforms and color transitions
- Mobile-First Design with progressive enhancement
- Flexbox & Grid Layouts for efficient responsive design
- Consistent Spacing using Tailwind's design system
- Semantic HTML for accessibility and SEO optimization
- Component-Based Architecture with reusable UI patterns
- Modern web browser (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
- Basic understanding of web development (optional)
-
Clone the repository
git clone https://github.com/eaglepython/DOM-Project.git cd DOM-Project -
Open in your preferred environment
Option A: VS Code with Live Server (Recommended)
code . # Install Live Server extension if not already installed # Right-click on index.html and select "Open with Live Server"
Option B: Direct Browser Opening
# Navigate to the project directory and open index.html open index.html # macOS start index.html # Windows
-
Access the application
Local: http://localhost:5500 (Live Server) or file:///path/to/project/index.html (Direct)
DOM-Project/
βββ index.html # Main HTML file with semantic structure
βββ style.css # Custom CSS with animations and infinite carousel
βββ index.js # JavaScript application logic (1800+ lines)
βββ README.md # Comprehensive project documentation
βββ assets/ # Static assets and generated covers
BookVault follows a modern component-based architecture:
| Component | Responsibility | Features |
|---|---|---|
| BookStore Class | Core application logic | State management, API integration |
| Carousel System | Featured books display | Infinite scroll, auto-play, hover interactions |
| Search Engine | Real-time filtering | Debounced input, multi-field search |
| Modal Manager | Popup interfaces | Book details, reading list, add book forms |
| Theme System | Dark/light mode | Persistent preferences, smooth transitions |
| Storage Manager | Data persistence | LocalStorage integration, data integrity |
BookVault features a comprehensive collection system:
| Source | Type | Content | Features |
|---|---|---|---|
| Local Database | Static JSON | Curated collection of real books | High-quality metadata, verified covers |
| Google Books API | External API | Extensive book database | Real-time fetching, multiple genres |
| Open Library API | Backup API | Additional book sources | Fallback system, cover validation |
| Generated Covers | Dynamic | Custom book covers | Brand-consistent design, gradient backgrounds |
BookVault delivers exceptional experiences across all devices:
| Device Type | Screen Size | Optimizations |
|---|---|---|
| π± Mobile | 320px - 768px | Touch gestures, carousel swipe, mobile menu |
| π± Tablet | 768px - 1024px | Grid adjustments, touch-optimized controls |
| π» Desktop | 1024px+ | Full feature set, keyboard shortcuts, hover effects |
| π₯οΈ Large Screens | 1440px+ | Enhanced layouts, larger carousel cards |
/* Primary Brand Colors */
Primary: #6366f1 (Indigo) - Trust, reliability, knowledge
Secondary: #8b5cf6 (Purple) - Creativity, imagination, wisdom
Accent: #06b6d4 (Cyan) - Freshness, clarity, innovation
/* Contextual Colors */
Success: #10b981 (Emerald) - Positive actions, completed states
Error: #ef4444 (Red) - Warnings, destructive actions
Warning: #f59e0b (Amber) - Attention, caution, pending states- Primary Font: System font stack for optimal performance
- Headings: Bold weights with proper hierarchy (h1-h6)
- Body Text: Optimized line-height and spacing for readability
- Monospace: Used for ISBNs, technical data, and code elements
- Duration: 200-500ms for UI interactions, 30-45s for carousel
- Easing: Cubic-bezier curves for natural movement
- GPU Acceleration: Transform-based animations for smooth performance
- Reduced Motion: Respects user accessibility preferences
- π Classic Literature: Timeless novels and literary masterpieces
- π Science Fiction: Futuristic narratives and space exploration
- π Fantasy: Magical worlds and epic adventures
- π Mystery/Thriller: Suspenseful and psychological narratives
- π‘ Non-Fiction: Memoirs, self-help, and educational content
- π Romance: Contemporary and historical love stories
- π¨βπ Young Adult: Coming-of-age and teen-focused narratives
| Title | Author | Genre | Year |
|---|---|---|---|
| To Kill a Mockingbird | Harper Lee | Classic Literature | 1960 |
| Dune | Frank Herbert | Science Fiction | 1965 |
| Harry Potter and the Philosopher's Stone | J.K. Rowling | Fantasy | 1997 |
| The Girl with the Dragon Tattoo | Stieg Larsson | Mystery Thriller | 2005 |
| Educated | Tara Westover | Memoir | 2018 |
- Open Library API: Free access to millions of books
- Google Books API: Enhanced book metadata and descriptions
- Real-time Fetching: Manual refresh button for live data
- Smart Combining: Merges local and external book data
- Error Handling: Graceful fallbacks when APIs are unavailable
- Rate Limiting: Respects API quotas and limits
- CORS Solutions: Handles cross-origin requests properly
- Click the "Fetch External" button in the navigation
- Application automatically fetches from both APIs
- New books are seamlessly integrated into your collection
- Success/error notifications keep you informed
| Shortcut | Action |
|---|---|
Ctrl/Cmd + K |
Focus search input |
Ctrl/Cmd + N |
Open add book modal |
Ctrl/Cmd + H |
Open reading list |
Escape |
Close active modals |
- Book Cache: 5-minute intelligent caching
- User Preferences: Theme and view mode persistence
- Reading List: Offline-capable favorites system
- Debounced Search: 300ms delay prevents excessive API calls
- Pagination: 12 books per page for optimal loading
- Image Fallbacks: Generated covers for missing images
- Lazy Loading: Efficient rendering of large datasets
- Screen Reader Support: Semantic HTML and ARIA labels
- Keyboard Navigation: Full keyboard accessibility
- High Contrast Support: Respects user preferences
- Focus Management: Proper focus handling in modals
| Browser | Version | Status |
|---|---|---|
 |
90+ | β Fully Supported |
 |
88+ | β Fully Supported |
 |
14+ | β Fully Supported |
 |
90+ | β Fully Supported |
This project is optimized for GitHub Pages deployment:
-
Enable GitHub Pages
- Go to repository Settings
- Navigate to Pages section
- Select "Deploy from a branch"
- Choose
mainbranch and/folder - Save settings
-
Access your live site
https://yourusername.github.io/DOM-Project
- Drag and drop the project folder to Netlify
- Or connect your GitHub repository for automatic deployments
- Supports continuous deployment with branch previews
npm i -g vercel
vercel --prodnpm install -g firebase-tools
firebase init hosting
firebase deployThe centerpiece of BookVault's design - a smooth, infinite scrolling carousel that showcases featured books:
- Pure CSS Animation: 45-second scroll cycle optimized for readability
- Smart Book Selection: Automatically selects 10 books with validated cover images
- Interactive Controls: Play/pause toggle with visual feedback
- Hover Interactions: Automatically pauses when user hovers over books
- Responsive Design: Adapts beautifully to all screen sizes
- Performance Optimized: GPU-accelerated animations with minimal DOM manipulation
Powerful search capabilities that make finding books effortless:
- Multi-field Search: Searches across titles, authors, genres, and descriptions
- Debounced Input: Optimized to prevent excessive filtering operations
- Real-time Results: Instant feedback as you type
- Smart Filtering: Combines search with genre filters for precise results
- No Results Handling: Helpful guidance when no books match criteria
Seamlessly expands your library with real-world book data:
- Google Books API: Access to millions of books with rich metadata
- Open Library: Backup source for additional book information
- Smart Deduplication: Prevents duplicate books across all sources
- Image Validation: Ensures only books with valid covers are displayed
- Error Resilience: Graceful handling of API failures and timeouts
We welcome contributions! Here's how you can help improve BookVault:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Test thoroughly
- Commit your changes
git commit -m 'Add amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow ES6+ JavaScript standards
- Use semantic HTML structure
- Write responsive CSS
- Include proper error handling
- Add JSDoc comments for functions
- Test across multiple browsers
- User Authentication with Firebase Auth
- Book Reviews and rating system
git push origin feature/amazing-feature
- Open a Pull Request
- π¨ UI/UX Improvements: Enhanced designs and user interactions
- π Performance Optimizations: Code efficiency and speed improvements
- π API Integrations: Additional book data sources and services
- π± Mobile Experience: Touch gestures and mobile-specific features
- βΏ Accessibility: Screen reader support and keyboard navigation
- π Internationalization: Multi-language support and localization
- π§ͺ Testing: Unit tests, integration tests, and automation
- Use semantic HTML5 elements
- Follow CSS BEM methodology where applicable
- Write clean, commented JavaScript with ES6+ features
- Maintain responsive design principles
- Ensure cross-browser compatibility
- Book Reviews & Ratings with community feedback system
- Advanced Search Filters (publication year range, page count, language)
- Reading Progress Tracker with completion percentages
- Social Features (share books, friend networks, recommendations)
- Export Functionality (PDF/CSV library export, backup/restore)
- AI-Powered Recommendations based on reading history and preferences
- PWA Support with offline functionality and app installation
- Book Notes & Highlights with cloud synchronization
- Performance Monitoring with real user metrics
- Backend API with Node.js/Express for user accounts
- Database Integration with Firebase/Supabase for cloud storage
- Testing Suite with Jest for unit tests and Cypress for E2E
- CI/CD Pipeline with GitHub Actions for automated testing and deployment
- Analytics Integration for usage insights and optimization
- CDN Implementation for faster global content delivery
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2024 EaglePython
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
If you found BookVault helpful, please consider:
- β Starring this repository
- οΏ½ Reporting bugs or requesting features
- π Sharing with fellow developers and book lovers
- π» Contributing to make it even better
- Tailwind CSS - For the excellent utility-first CSS framework
- Font Awesome - For the comprehensive icon library
- Google Books API - For extensive book database access
- Open Library - For additional book data and covers
- Unsplash - For high-quality placeholder images
- The Open Source Community - For inspiration and shared knowledge
- Real book metadata compiled from multiple sources
- Cover images from official publishers and distributors
- ISBN data verified for accuracy and completeness
- π Read the Docs: Comprehensive documentation in this README
- π Report Bugs: Create a bug report
- π‘ Request Features: Suggest new features
- π¬ Join Discussions: Community discussions
- π§ Direct Contact: Available through GitHub profile
- Ensure JavaScript is enabled in your browser
- Check browser console for any error messages
- Verify internet connection for external API calls
- Try refreshing the page
- Clear browser cache and local storage
- Check if ad blockers are interfering with API calls
- Update to the latest browser version
- Clear mobile browser cache
- Ensure sufficient device memory for smooth animations
- Clear browser cache and localStorage
- Check browser console for error messages
- Ensure stable internet connection for cover images
- Try incognito/private browsing mode
- Update to a modern browser version
β Star this repository if you found it helpful!
Built with β€οΈ for book lovers everywhere
π Live Demo | π Documentation | π Report Bug | π‘ Request Feature