https://github.com/r1zzrvk/lib-client-interface
Next.js web application for searching books and creating lists using the Google Books API
https://github.com/r1zzrvk/lib-client-interface
atomic-design firebase firebase-auth firestore formik google-api google-books-api nextjs reactjs styled-components typescript ui-kit
Last synced: 5 months ago
JSON representation
Next.js web application for searching books and creating lists using the Google Books API
- Host: GitHub
- URL: https://github.com/r1zzrvk/lib-client-interface
- Owner: r1zzrvk
- Created: 2022-09-27T16:27:52.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2025-02-17T10:59:38.000Z (11 months ago)
- Last Synced: 2025-06-23T23:37:14.987Z (7 months ago)
- Topics: atomic-design, firebase, firebase-auth, firestore, formik, google-api, google-books-api, nextjs, reactjs, styled-components, typescript, ui-kit
- Language: TypeScript
- Homepage: https://lib-booksearch.vercel.app
- Size: 1.21 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting started :wave:
Web application that implements [lib-booksearch.vercel.app](https://lib-booksearch.vercel.app/)
Develop branch deployed here [lib-test-app.vercel.app](https://lib-test-app.vercel.app/)
# Development :computer:
`npm run dev` - to start application in development mode. App will be available at http://localhost:3000.
- Atomic file system is mandatory. Each component is in its own folder along with its styles, tests and other files intended for it.
`npm run lint` - to start linting and simple fixing.
`npm run type-check` - to start looking for type errors
`npm run install:hooks` - if you have problem with husky (Mac/Linux only)
#### Recommended Node.js version: 20.4.0
Using older versions may cause issues with package installation or compilation. I also recommend using `nvm`
[Nvm Installation Instructions](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)
[Nvm Installation Instructions for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file#install-nvm-windows)
#### Nvm commands for installation node.js:
```
nvm install 20.4.0
nvm use 20.4.0
```
### Git
When creating a commit, pay attention to its structure. For linting use [commitlint](https://github.com/conventional-changelog/commitlint). But for convenience I have placed rules here.
In general the pattern mostly looks like this:
```sh
commitType(scope?): subject #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")
```
Real world examples can look like this:
```
chore: run tests on travis ci
```
```
fix(server): send cors headers
```
```
feat(blog): add comment section
```
Common types can be:
- build
- chore
- ci
- docs
- feat
- fix
- perf
- refactor
- revert
- style
- test
> Before committing, I recommend running a linter because if there are errors when pushing, it will be rejected! `npm run lint` and `npm run type-check` will start automatically with `git push`.
### Branches rules :heavy_exclamation_mark:
**A branch name should consist of two sections:**
1. Task type suffix:
- feature: for new features or enhancements
- bugfix: for fixing bugs or resolving issues
- hotfix: for fixing urgent bugs in the main or release branch
- release: for updating changes in the main branch
2. Name and issue/task number:
- The second section should include the name and number of the corresponding issue or task.
- Use the format `ISSUE-{issue number}` for issues and `LIB-{task number}` for tasks.
**Example:**
```
feature/LIB-322
bugfix/ISSUE-456
```
**Release branch naming:**
- For the release branch, it is not required to specify the issue number.
- Instead of ISSUE or LIB, use "v" and add the desired version number.
**Example:**
```
release/v3.2.2
```
**Developer Branch Access Table:**
| | MR | Push | Branching|
|----------------|--------------------|--------------|---------|
|main |:x: can not merge by request|:x: can not push | :heavy_check_mark: can branch from|
|develop |:heavy_check_mark: can merge by request |:x: can not push | :heavy_check_mark: can branch from|
|feature/bugfix | :heavy_check_mark: can merge by request and without| :heavy_check_mark: can push | :heavy_check_mark: can branch from|
## Google documentation
- [`Firebase integration`](https://firebase.google.com/docs/web/setup#add-sdk-and-initialize)
### `Data`
- [`Firestore cloud`](https://firebase.google.com/docs/firestore/query-data/get-data?hl=en&authuser=2)
- [`Firestore data manage`](https://firebase.google.com/docs/firestore/manage-data/structure-data)
### `Auth`
- [`Firebase auth`](https://firebase.google.com/docs/auth/web/firebaseui)
- [`Manage users`](https://firebase.google.com/docs/auth/web/manage-users)
- [`User types`](https://firebase.google.com/docs/reference/js/auth.user)
### `Google Books`
- [`Books`](https://developers.google.com/books/docs/v1/getting_started)
- [`Volume`](https://developers.google.com/books/docs/v1/reference/volumes#resource-representations)
> `book.volumeInfo.imageLinks` - object contains images in poor quality that shouldn't be used. So I found the solution using another link in the directory `src/constants/api/BOOKS_IMAGE_PATH` with `book.id`
```
https://www.googleapis.com/your_request
```
## Figma :art:
Design and ui-kit based on these [layouts](https://www.figma.com/file/3KUeji625hyCsGa52g8MIB/Cosssy-%5BFurniture-store%5D-(Community)?type=design&node-id=451-965). But for some pages and components I had to create it myself :)