Book Finder

Book Finder is a frontend React.js application developed in July 2024 to help users search and discover books. The site features a home page displaying various books, with options to search via an input box and sort by alphabetical order or publication year. Styled with Tailwind CSS, it ensures a fast, responsive experience across devices, demonstrating skills in API integration, state management, and user-friendly UI design.

Book Finder

Technology Stack

ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Home Page: Book Display

The home page serves as the main interface, showcasing a diverse collection of books in an organized and visually appealing layout.

Users can browse through various kinds of books, with each entry displaying essential details for quick overview.

  • Responsive grid layout for book cards
  • Dynamic loading of book data
  • Clean and intuitive user interface
  • Optimized for performance across devices
Home Page: Book Display image 1

Search Functionality

An intuitive search input box allows users to find specific books quickly by entering keywords or titles.

The search feature dynamically filters the book list in real-time, providing instant results as users type.

  • Real-time search filtering
  • Keyword-based book matching
  • User-friendly input interface
  • Seamless integration with book display
Search Functionality image 1

Sorting Options

Users can organize the book list using multiple sorting criteria to suit their browsing preferences.

Available sorting options include alphabetical order (A-Z or Z-A) and publication year (oldest to latest or latest to oldest).

  • Alphabetical sorting (A-Z and Z-A)
  • Chronological sorting by publication year
  • Instant reordering of book list
  • Intuitive dropdown or button controls
Sorting Options image 1

Technical Implementation

Built with React.js for efficient component-based architecture and dynamic user interactions.

Utilizes Tailwind CSS for rapid development of a responsive and consistent user interface.

  • React hooks for state and effect management
  • Efficient data filtering and sorting algorithms
  • Tailwind CSS for styling and responsiveness
  • Clean, modular code structure