Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rafal19987/recruitment-task-dynamic-table-nextjs-tailwind-typescript

An application created as part of a recruitment task for a front-end developer position. The task was to use google books api to present the required information.
https://github.com/rafal19987/recruitment-task-dynamic-table-nextjs-tailwind-typescript

2023 breadcrumb context frontend google-books-api junior-developer nextjs react recruitment-task tailwindcss typescript

Last synced: about 1 month ago
JSON representation

An application created as part of a recruitment task for a front-end developer position. The task was to use google books api to present the required information.

Awesome Lists containing this project

README

        

![image](https://github.com/user-attachments/assets/c4dd9ab0-7881-401d-880b-17b42613868b)

![image](https://github.com/user-attachments/assets/80289788-5647-4ada-a955-a7802d609f19)

![image](https://github.com/user-attachments/assets/4df683b2-3817-41a0-973a-8c877f8a37d5)

![image](https://github.com/user-attachments/assets/68a35e1f-4921-40c6-89de-0019ee21e40d)

Live APP https://dynamic-table-project.vercel.app/

## About

Project:
The application has been developed based on business requirements that include the following capabilities:

- Connecting to and fetching data from a public API (Google Books API was chosen).
- Displaying the fetched data, such as ID, Title, and Author, in a table.
- Interacting with the displayed data by clicking on a specific cell, which triggers the loading of new data specific to the selected cell.
- Implementing breadcrumbs that show our position in the data structure and allow interaction by navigating to previous structures.
- Implementing a responsive application design suitable for various types of displays.

Stack:

- React 18
- Next.js 13
- Tailwind 3
- Typescript 5

Deployment:

- Vercel https://dynamic-table-project.vercel.app/

Used API:

- Google Books API https://developers.google.com/books

## How to run

```bash
git clone https://github.com/rafal19987/dynamic-table-project.git
cd dynamic-table-project
npm i
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.