So I want to start from words. At first I'm thinking about getting thesaurus data, either in form of hard-coded data or 3rd-party API which I can call on demand. This, I'd thought, to cover any words that being inputted by user. The word that user input however can be ranged from any adjectives or nouns, and somehow I need to connect it with color. I thought this is a bit complex and I'm not sure how to put the rules to filter out user's submitted word. It's doable, but I just think it is too broad for Colorsss' case.
Then I found an idea what if we just start with color names. Interestingly, I found some website and repository on Github that provides this huge library of color names. The interesting about it is that some of the color names is submitted by user, so the name is what user perceived about certain color (sometimes the names are just too subjective, which I think is fine). That is quite fit with what I want. A library in this particular website even totalled 25 Mb, with the content only JSON string text, but the amount of data is 2 millions! 😱
I've tried to incorporated color names data into Nuxt. Putting it as Nuxt Content's data in a single JSON file. Although I successfully implemented search and filter based on user input using Nuxt's fullTextSearchFields features, I found that with 2 millions data, the app becomes a bit lag. Initially I've used 'on input' method, which triggered the search as user types, but this making the app even slower. I've read some of the workaround and trick to treat data fetch with huge amount of data, including using Vuex, but for right now it is just out of my knowledge. Also the other thing I've found with fullTextSearchFields is that we cannot control the accuracy of matching word. When I type "Cloud" for example, sometimes any words that starts with "cl" are getting included in the result.
Talking about Vuex however, I successfully implemented Vuex and localStorage with nuxt-vuex-localstorage, but just for the state of the data persistence. As user selects color, the app will save those data into Vuex then it will be carried out through every steps in the app. Also as user adjusting the color, the app save those changes into into Vuex and straight after that to localStorage. If user close the tab and re-open the tab at certain point on the app, it will load back the left off data.