expansion
A thesaurus app powered by Thesaurus API. It fetches a list of 12 synonyms for words with colour co-ordinations.
Tech Stack
- Next.js
- Typescript
- Tailwind CSS
- Heroicons
- Axios
- API
Background
I wanted to challenge myself by using both Typescript to fetch data from an API and Tailwind CSS to design an attractive user interface. I decided to create a new Thesaurus app, using the Thesaurus API from API Ninjas.
Challenges
Using TypeScript with Axios and event handlers
- Accustomed to working with plain JavaScript, I had to delve into the structure of API requests with TypeScript due to encountering declaration errors. Following my research, I created an interface specifying the structure of the data I intended to fetch, including the word and an array of synonyms.I defined their types within the interface and put the interface into the state, allowing me to access it for displaying content on the page. I also ensured that this could be null, considering that there would be no data available before the API request. Additionally, I explicitly associated the interface with the GET request.
- I also ensured that I specifically defined the search bar submit event, by importing React's form event. To handle the onChange event, I imported React's Change Event.
Clearing the search input
- I encountered difficulties initially, thinking that the trim function would eliminate all characters and whitespace, only to discover that it exclusively removes whitespace. Following some research, I determined that the replace function was more suitable for replacing both lowercase and uppercase characters, along with whitespace, using an empty string.