Challenges Faced (and To Face!) - kpatenio/quoi-react-app GitHub Wiki

Back when QUOI was intended to be a Chrome extension, the plan was to make QUOI parse through an English-French dictionary site and read its HTML. The concept of CORS, to me at the time, was completely unheard of. It was then when I made that discovery that I decided to rely on an API.

In the context of using Flask and React, CORS warnings were still encountered. Fortunately, flask-CORS allows the Flask backend and React frontend to communicate with each other.

I hoped to use Google Cloud Platform's translation API, but there was a required fee during the initial stages of QUOI. Alternatives needed to be considered, and I found the Collins Dictionary API to be the best option. As of August 16, 2019, it appears that GCP no longer has a required fee for its translation services, assuming that there is low usage. At the moment, QUOI will only use the Collins API - GCP translate or other APIs may be considered in future versions of the app.

• Glosbe -- could not get API key. However, it might be possible to use without it.
• Yandex API -- unsure. Translation and dictionary APIs available.
• Pons
• FreeDict

The API sends a long string of HTML content to the frontend. To display the content in React, using the DOM attribute dangerouslySetInnerHTML is the only known and official way to do so. This attribute isn't always safe to use due to potential exposure to cross-site scripting (XSS); the official React documentation especially states this. In addition, the semantic markup of the content, in my opinion, wasn't the best structured - using only <div> and <span> tags with id and class selectors.

To address XSS vulnerabilities, I used DOMPurify to sanitize received content. As for styling, I considered 2 different approaches:

1. Study how the content is structured and attempt to CSS style accordingly using the provided class selectors.
2. Use another library like html-react-parser to parse through the content and replace tags and/or attributes when needed.

I still haven't decided how to address the issues with styling.

Currently WIP. Some patterns to consider:

• MVC
• Proxy
• Other patterns

Planned features:

• English-French and French-English toggle
• Search bar
• Recently viewed terms
• Favourites
• Personal notes
• collections
• tags

Other ideas in mind:

• user accounts (requires a db)
• toggle dictionaries (if additional APIs used)
• translation (if GCP used)

Currently, I only have a French-English version in mind. However, if I have the time, I may consider supporting additional languages.