Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tatyanazakiryanova/bookshelf
App for searching and viewing e-books, integrated with the Google Books API.
https://github.com/tatyanazakiryanova/bookshelf
google-books-api react redux-toolkit scss typescript
Last synced: about 2 months ago
JSON representation
App for searching and viewing e-books, integrated with the Google Books API.
- Host: GitHub
- URL: https://github.com/tatyanazakiryanova/bookshelf
- Owner: TatyanaZakiryanova
- Created: 2024-03-25T13:31:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T11:38:31.000Z (3 months ago)
- Last Synced: 2024-10-22T22:21:52.193Z (2 months ago)
- Topics: google-books-api, react, redux-toolkit, scss, typescript
- Language: TypeScript
- Homepage: https://bookshelfsearch.netlify.app/
- Size: 7.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bookshelf
Приложение для поиска и просмотра электронных книг, интегрированное с [Google Books API](https://developers.google.com/books).
## Deployment & Live Demo
[Deploy](https://bookshelfsearch.netlify.app/)
## Technologies Used
- Typescript
- React
- React-Redux, Redux Toolkit (createAsyncThunk для асинхронных запросов, redux-persist для сохранения состояния)
- SCSS (Sass)
- Custom React Hooks
- React-router-dom
- Vite
- ESLint, Prettier
- Netlify
## Features
- Поиск книг по названию, автору или ключевым словам
- Сортировка результатов по языку, релевантности, цене, полноте текста
- Просмотр информации о книге (автор, издательство, описание, etc.)
- Предпросмотр книги
- Переход на страницу книги на сервисе Google Books
- Пагинация
- Сохранение книг в список избранного (localStorage)
- Подсчёт стоимости книг в списке избранного
- Кастомный хук useFavorites для управления списком избранного
- Собственный UI-дизайн и универсальные UI-компоненты (кнопки, дропдауны, модальные окна)
## More details
### Routing
- Главная страница с результатами поиска
- Страница "Favorites"
- Страница "Not found"
### State Management
- slices для организации состояний
- createAsyncThunk для запросов к API
- redux-persist для сохранения состояния и списка избранного
### Loading & Error Handling
- Скелетон при загрузке книг
- Спиннер при загрузке списка избранного и предпросмотра книги
- Сообщение, если книги не найдены
- Сообщение, если книги по запросу закончились
### Performance Optimizations
- Lazy Loading страниц
- useMemo для мемоизации обложек (thumbnails) книг
### Styling and Responsiveness
- Адаптивная вёрстка до 360px ширины экрана (SCSS-модули)
- Раскрывающиеся списки при наведении
- Адаптив для модальных окон
### Error Handling in API
- **API возвращает дубликаты книг**. Реализована фильтрация книг с одинаковым id на уровне редьюсера.
- **API исключает массив items из ответа, если книги заканчиваются**. Добавлен дополнительный статус 'NO_MORE_BOOKS' для обработки этого случая.
- **У бесплатных книг отсутствует объект listPrice со свойством стоимости**. Для них отображается надпись 'Free', цена устанавливается в 0.
- **В ответе API могут отсутствовать данные**. Отсутствующие данные заменяются значениями по умолчанию.
## How to start project
in the project directory enter:
```js
npm install
```
and then run in dev mode:
```js
npm run dev
```
build the project:
```js
npm run build
```
production mode:
```js
npm run serve
```