liyatheresa/thesaurus

Thesaurus application built using ReactJS

thesaurus's Issues

Migrate to Ant Design

Use components from antd to improve the user experience of the app.

The transition will constitute the following sections in the UI:

• Input to accept a search query.
• Dropdown to display word suggestions (or a searchable Select).
• Modal in which meanings, synonyms, etc are displayed.
• Collapse to show/hide sections in modal.
  • Add Tags.
  • Display synonyms and antonyms.
  • Add part of speech headings inside definitions.
• Spin wherever loading states are to be shown.
• Icons wherever icons are required (Eg: Search).

Document the project in README.md.

README files tell other people why your project is useful, what they can do with your project, and how they can use it. Any good project will have a well-documented README file (or links to external documentation).

Let's create a good one for To Do. Make sure to include the following at the very minimum:

• Overview: Describe your project, purpose, features, tech stack used, etc.
• Dependencies: List external libraries that this project depends on, and their purpose.
• Invitation for others to contribute.

Links:

• Learn about creating a good README from here.
• Learn about formatting and styling in GitHub from here. (how to highlight, how to include code snippets, images, hyperlinks, tables)

README files are important and will help your project stand out. Take your time to complete this.

Pronunciations

Add a feature that would read out word pronunciations. Make use of a free public API or a third-party Javascript library for this.

Creation of Logo

Create a logo for the application.

Debounce search APIs

Add debouncing to the word search. This will help minimize API calls.

Add a tooltip to the speaker button that says `Read out`.

Collapse to show/hide sections in modal.

Dropdown not closing on losing focus.

Center Search Bar

Expected:

• Center the search input with the thesaurus text appearing above it.

Implement serialisers for APIs

Let's have a serializer function for each APIs.

Currently, whatever we are getting from the backend API, we are directly using it in the application from the response. This creates a tight coupling of data architecture between frontend and backend which makes it hard to maintain if there are any changes in the backend.

A serializer is simply a function that will take in the raw response received from the backend and return a well-formatted object with only the data required in the application. This will isolate the bulky data manipulation code from the component. Also, If a serializer is implemented, when there is a change in the backend API (e.g. change in API response field), we only need to change it in the serializer instead of everywhere in the React app.

Also, one side-effect of not having a serializer is that we see snake case in our React components which is not really nice.

Modal retains old information instead of showing the loading spinner when a second word is selected.

Add empty string validation.

Bugs

Create separate branches for each of the following bugs and work on them. (Use the Convert to issue button)

• #13
• #15
• #17