Search query in a react app without backend

Question

Has anyone made a react website with static data that does not have a backend to store information, but needs to add a query/search functionality in the front end that can fetch information(a specific keyword that can be present on multiple pages of the app) from the entire app?

What I am looking for is, an option to store the data and made a query from there without implementing a backend from scratch. Is that possible? From my research so far, what I have found so far is I need to store all the information to some storage services like Firebase or Firestore and need to retrieve data from the entire app and only thenI can implement search functionality using third-party apps like typesense or algolia. But did not find any specific example based on that. I am a beginner in react, so any kind of help would be highly appreciated.

Do you mean something like a built-in JSON data file within the app that can be imported into a component to be referenced/searched/filtered/etc? — Drew Reese
– Drew Reese, Commented Jul 31, 2022 at 22:26
You can easily store data just as a mydata.json file and then load it using fetch. If you load the json in the root App component, it will be available in the whole app. Firebase and such is only needed if you want to manipulate the data and then store it on the server again. — Kokodoko
– Kokodoko, Commented Jul 31, 2022 at 22:31
@Drew Reese Say, for example, I have a paragraph tag like this in several pages of the app (<p>Lorem ipsum dolor sit amet</p>) where I am hardcoding the information without fetching data from a backend server or database and I want to find all the pages that has the keyword "Lorem" in there by typing "Lorem" in the search input located in my home page, then how can I achieve them? — Ayesha
– Ayesha, Commented Jul 31, 2022 at 22:38
@Kokodoko, thanks for the information. Just to clarify, should I store data of all the components that I have in my app in the same JSON file and fetch it from there? — Ayesha
– Ayesha, Commented Jul 31, 2022 at 22:42
You want to search your app's rendered output for specific key words? If all the content is hardcoded then I suppose you'll be searching your source code. If the content is stored in a JSON then you only need to search that. BTW, you don't need to fetch the JSON file if it's a local asset, you can just import it normally. It's much simpler than setting up the lifecycle to fetch it and handle storing the response. — Drew Reese
– Drew Reese, Commented Jul 31, 2022 at 22:46

Drew Reese · Accepted Answer · 2022-08-02 04:38:53Z

1

You can use Local Storage API to save data on the frontend. You can store a JSON object as string in the localstorage using

localStorage.setItem('my-key', jsonObjectString);

Later you can retrieve the object using

const textFromStorage = localStorage.getItem('my-key');
let jsonObject = JSON.parse(textFromStorage)
// Now you can do your query here

edited Aug 2, 2022 at 4:38

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

answered Aug 1, 2022 at 5:20

heyitsvajid

1,2311 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Search query in a react app without backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related