📚 Book Finder

A modern, responsive web application for exploring and filtering books using a categorized content card layout. Includes dark/light theme toggle, real-time search, and a clean user interface built with HTML, CSS, and JavaScript — powered by Vite for a fast development experience.

---

🚀 Live Preview

🌐 View Live Project
📦 GitHub Repository

---

🎥 Demo

▶️ Watch Demo Video

---

📌 Overview

Book Finder offers a clean and accessible UI designed for discovering and filtering books visually. The interface is responsive, interactive, and adaptable to different screen sizes. Key features include:

• Light/Dark theme toggle
• Horizontally scrollable category navigation
• Live search filtering
• Responsive card grid layout
• Smooth hover effects and transitions
• Fallback support for missing images

---

✨ Features

• 🌓 Light & Dark Mode Toggle
  Instantly switch between themes for better accessibility and user preference.

• 📂 Category Navigation
  Horizontally scrollable categories with custom scrollbars and smooth interaction.

• 🔍 Live Search
  Dynamically filter books by title or keywords.

• 📐 Responsive Grid Layout
  CSS Grid and Flexbox combine for a layout that adapts to all screen sizes.

• 🖱️ Interactive Cards
  Subtle hover animations and fallback image support for a polished experience.

• ⚡ Powered by Vite
  Lightning-fast development server and modern build tools.

---

🛠️ Tech Stack

• Vite – Fast, modern frontend tooling
• HTML5 – Semantic markup for accessibility
• CSS3 – Custom styling, transitions, and layout
• Flexbox & CSS Grid – Responsive layout techniques
• JavaScript (Vanilla) – Theme toggle, filtering, and UI logic
• ESLint – Code linting and quality enforcement

---

📦 Setup Instructions

1. Clone the Repository

git clone https://github.com/Nikhilks2002/Book-Finder.git
cd Book-Finder

2. Install Dependencies

npm install

3. Start the Development Server

npm run dev

Visit http://localhost:5173 in your browser.

4. Build for Production

npm run build

---

📁 Folder Structure

Book-Finder/
├── node_modules/             # Project dependencies
├── public/                   # Static public assets
├── src/                      # Source code
├── index.html                # HTML entry point
├── package.json              # Project metadata & scripts
├── package-lock.json         # Dependency lock file
├── vite.config.js            # Vite configuration
├── eslint.config.js          # ESLint rules
└── README.md                 # Project documentation

---

🤖 AI Assistance

This project was developed with the support of AI (ChatGPT) for brainstorming, structure, and documentation. Specific contributions included:

• 🧠 Blueprinting the initial UI/UX design and layout structure
• 🎨 Suggestions for responsive design using CSS Grid and Flexbox
• 🌗 Guidance on implementing a theme toggle with smooth transitions
• 🧹 Recommendations for semantic HTML and accessibility best practices
• 📝 Generating and refining this README structure and content

AI was used as a collaborative assistant to accelerate development and improve overall quality, with all final decisions and code authored by the developer.

---

✍️ Author

Nikhil Kumar Singh 🔗 GitHub Profile

---

🧾 License

This project is licensed under the MIT License.

---

🤝 Contributing

Pull requests and contributions are welcome! Feel free to fork the project and submit your improvements.

---

📌 To-Do

• Integrate real book data using an API (e.g., Google Books API)
• Add pagination or infinite scrolling
• Complete category filtering logic
• Add component or unit tests
• Polish mobile UI further

---