Jimmy

Academic

Biblio-City — A React App for Searching Books

A React and TypeScript web app built as a two-person project to search and browse books, using the Open Library API, with some enrichment from Wikipedia.

Completed

My contribution

I handled most of the setup and implementation of the app: the React/TypeScript structure, navigation, the home page, the book page, the main components and the initial test setup. My teammate built the author and category navigation links, and substantially expanded and reorganized the test suite.

Highlights

  • Advanced search by title, author, subject and year, kept in sync with the URL
  • Detailed book page, with navigation to authors and subjects
  • Component tests with Jest and Testing Library

Goal

Build a web app to search and browse books without a backend of its own: the data comes from the public Open Library API, and some book pages are completed with a summary from Wikipedia.

Architecture

A single-page app in React 19 and TypeScript, built with Vite and styled with Tailwind. Navigation goes through React Router, across three views: the home page, advanced search and a book page. State stays local to the components, and search criteria live in the URL query parameters, so a search can be shared or reloaded as is. The pages call the external APIs directly.

Features

  • Quick search by title, from the navigation bar.
  • Advanced search by title, author, subject and publication year, kept in sync with the URL, with a way to reset the filters.
  • Book page: cover, description, authors, details of the first edition (date, publisher, place, number of pages, format, ISBN-13), number of editions and subjects. Authors and subjects lead to a new search.
  • Wikipedia enrichment: a summary of the page matching the book title.
  • Loading and error states on the views that call the APIs.

Tests

Automated tests with Jest and Testing Library cover the book cards, the search bar and the book page, including its error case, as well as the calls to the Open Library and Wikipedia APIs, which are mocked. The home page, advanced search and navigation between pages are not covered.

Limits

Some planned features were not completed, notably search suggestions and result pagination. The Wikipedia enrichment relies on the book title and can therefore return a page with the same name.