Link https://stanleyy7.github.io/googlebooks/
The main aim of this project was to utilise our existing knowledge of HTML, CSS and Javascript and to build upon it by using newly acquired skills (React framework, Vite, use of Async, fetch and await) to create a responsive website which allows the user to search for a book via their input and to have it outputted as well.
Below are the website designs/wireframes I created in Canva for the initial view of the website, and then when the user presses either the search icon or enter. As well I created a design for any modals too.
The main requirements for this project were:
- A Header section introducing the page
- A Form containing a text input and a submit / search button
- An output displayed on a grid.
More specifically the grid of books should:
- When the submit button is clicked it needs to request books from the Google books API using the input value as the query string
- The books that are received should be rendered in the books grid.
- Each book in the grid should have an image, author, title and description
- The grid should be responsive on different screen sizes
- Async/await is to be used for the request code, NOT .then
- Added Jest tests.
I met the above requirements by first creating a website wireframe/design, then I worked on the MVP requirements. I then worked on media queries for the website layout itself. After that I then added bonus features such as a modal opening upon clicking of a card and did the appropriate media queries for that as well. The main challenges experienced were managing state (figuring out which state to use and where, making the use of state concise where possible) and media queries for different components (as media queries can overlap/overwrite for the same component).
- HTML
- CSS/SCSS
- Javascript
- React
- Vite