Vue Book Catalogue

This project is a Book Catalogue Web Application built using modern web technologies. It demonstrates the use of Vue 3, TypeScript, Pinia, Vue Router, and Bootstrap 5 to create a Single Page Application (SPA) with dynamic features such as search, pagination, filters, modals, and more. The application fetches book data from the Gutendex API.

Demo

Check out the live demo here: Vue Book Catalogue Demo

Features

• Dynamic Search: Search for books dynamically with debounced input to reduce API calls.
• Pagination: Navigate through pages of books seamlessly.
• Filters: Apply filters such as language to refine search results.
• Modals: View detailed information about a book in a modal.
• Loader: Display a loading spinner during API calls.
• Smart and Dumb Component Architecture: Separation of logic and presentation for better maintainability.
• Client-Side Rendering: All rendering is handled on the client side for a smooth user experience.

Project Structure

The project follows a modular structure:

src/modules/books/

• index.vue: The smart component that contains all the logic for the books module. It handles API calls, state management, and event handling using Vue Pinia.
• _components/: Contains all the dumb components responsible for rendering the UI. These components use props and $emit events to communicate with the smart component.

Dumb Components:

1. BooksComponent.vue: Displays the list of books with their details.
2. FilterComponent.vue: Provides UI for applying filters.
3. FooterComponent.vue: Displays a fixed footer with project credits.
4. HeaderComponent.vue: Displays the header with search, sort, and filter options.
5. PaginationComponent.vue: Handles pagination controls.

src/stores/books.ts

• Contains the Pinia store for managing the state of the books module.
• Handles API calls to the Gutendex API for fetching books, pagination, and search results.

src/views/BooksView.vue

• A view component that renders the BooksModule smart component.

src/main.ts

• The entry point of the application. It initializes the Vue app, sets up Pinia for state management, and configures Vue Router.

src/assets/

• Contains static assets such as CSS and images. The project uses Bootstrap 5 for responsive UI components and Bootstrap Icons for icons.

index.html

• The main HTML file that serves as the entry point for the application.

Technologies Used

This project leverages the following technologies and libraries:

• Vue 3: The progressive JavaScript framework.
• TypeScript: For static typing and better developer experience.
• Pinia: State management library for Vue.
• Vue Router: For handling SPA navigation.
• Bootstrap 5: For responsive UI components.
• Bootstrap Icons: For icons.
• Lodash Debounce: To optimize search input handling.
• Gutendex API: For fetching book data.

Installation

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/gayali/vue-book-catalogue.git
   
   cd vue-book-catalogue

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

5. Lint the code:

   npm run lint

Smart and Dumb Component Architecture

This project follows a Smart and Dumb Component Architecture for better maintainability:

• Smart Component: The index.vue file in the src/modules/books/ folder acts as the smart component. It contains all the logic for API calls, state management, and event handling. It uses the Pinia store (src/stores/books.ts) to manage the state and fetch data from the Gutendex API.

• Dumb Components: The components in the src/modules/books/_components/ folder are dumb components. They are responsible for rendering the UI and rely on props and $emit events to communicate with the smart component. These components include:

  • BooksComponent.vue: Displays the list of books.
  • FilterComponent.vue: Provides a UI for applying filters.
  • FooterComponent.vue: Displays a footer with project credits.
  • HeaderComponent.vue: Displays the header with search, sort, and filter options.
  • PaginationComponent.vue: Handles pagination controls.

API Integration

The application fetches book data from the Gutendex API. The API calls are managed in the Pinia store (src/stores/books.ts), which provides actions for searching books, navigating pages, and fetching data.

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes and push them to your fork.
4. Submit a pull request to the main repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• Gutendex API for providing the book data.
• Bootstrap and Bootstrap Icons for the UI components and icons.
• Vue.js and its ecosystem for powering the application.

Author

Created with ❤️ by Gaurav Gayali. For any questions or feedback, feel free to reach out to gauravgayali.com.