A modern, minimalist personal library management application built with vanilla JavaScript. Keep track of your books, manage your reading status, and organize your personal library with a clean, dark-themed interface.
- Add Books: Easily add books to your library with title, author, pages, and reading status
- Status Management: Track your reading progress with three states: Unread → Reading → Read
- Persistent Storage: Your library is automatically saved to browser localStorage
- Delete Books: Remove books from your library with a single click
- Responsive Design: Clean, card-based layout that works across different screen sizes
- Dark Theme: Easy-on-the-eyes dark color scheme
- Modal Interface: Intuitive modal dialog for adding new books
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No additional dependencies required!
-
Clone the repository
git clone https://github.com/Bleu24/Bookify.git cd Bookify -
Open the application
- Simply open
index.htmlin your web browser, or - Serve it via a local web server:
# Using Python python -m http.server 8000 # Using Node.js npx http-server # Using PHP php -S localhost:8000
- Simply open
-
Start managing your library!
- Click the "Add" button to add your first book
- Fill in the book details in the modal
- Click "Add Book to Library" to save it
- Use the status button to cycle through reading states
- Click the delete icon to remove books
- HTML5: Semantic markup and structure
- CSS3: Modern styling with CSS Grid, Flexbox, and custom properties
- Vanilla JavaScript: No frameworks - pure, lightweight JavaScript
- Local Storage API: Client-side data persistence
- SVG Icons: Lucide icon set for clean, scalable icons
- Custom Fonts: ArchivoBlack and Kanit fonts for typography
Bookify/
├── index.html # Main HTML file
├── main.js # Core JavaScript functionality
├── style.css # Main stylesheet with CSS variables
├── fonts.css # Font face declarations
├── normalize.css # CSS reset for cross-browser consistency
├── assets/
│ └── book_placeholder.png # Default book cover image
├── fonts/
│ ├── ArchivoBlack-Regular.woff2
│ ├── ArchivoBlack-Regular.woff
│ ├── Kanit-Regular.woff2
│ └── Kanit-Regular.woff
└── utils/
└── refreshCardId.js # Utility for managing card IDs
- Click the "Add" button in the top-right corner
- Fill in the required fields:
- Title: The book's title
- Author: The book's author
- Pages: Number of pages
- Status: Reading status (defaults to "Unread")
- Click "Add Book to Library"
- Click the status button on any book card
- Status cycles through: Unread → Reading → Read
- Changes are automatically saved
- Click the trash icon in the top-right corner of any book card
- The book will be immediately removed from your library
- Dark Theme: Carefully crafted color palette using CSS custom properties
- Responsive Grid: Books are displayed in a responsive 3-column grid
- Smooth Animations: Hover effects and transitions for better UX
- Modal Dialog: Clean modal interface for adding books
- Visual Hierarchy: Clear typography and spacing for excellent readability
- Book search and filtering functionality
- Export/import library data
- Book cover image uploads
- Reading progress tracking with dates
- Book ratings and reviews
- Categories and tags
- Reading statistics and insights
- Sync across devices
- Book recommendations
- Goodreads integration
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Improve documentation
© 2025 Bleu24. All rights reserved.
Built with ❤️ using vanilla web technologies. No frameworks, no build process, no complications - just simple, effective book management.