In this blog we will try to build an end to end app which will let the end user to search for a book in the store seamlessly with the information available to them in almost real time. For this purpose we will be leveraging the use of Solr in out project.
The underlying architecture of the project is:
Technologies Used:
- React (For designing the Admin Panel and the end Search Engine)
- Java (Spring Boot) — For making producer and Consumer
- Any DB (mySQL/ FirestoreDB, we will use. Since they are free. You can go for any as per convenience.).
- Kafka (For messaging queue) [ As we are trying to build event driven architecture]
- Apache SOLR infrastructure
The series would contain a whole lot of information. So stick with us till the end and we would basically build a fully functional Book Keeping app in the end.
Ideation
Before moving into the code part. Let us first imagine and list down what are the properties the book is going to have.
Book id (unique no to indentify the book), name, description, upc, sku, publisher, cost price, reatil price, Author, tags.
For now these would be enough. If you think of anything else as well. Please include those in the comment. This would help me as well as the other readers visiting the blog.
The Code
Building the Admin UI to register book in store
Please find the code base for making the admin UI to post a book to store. The prerequisite is you should know react.
API controller to post the data and publish the same to a Kafka topic
Please find the repo for the rest api along with the kafka producer for the app.
The app requires you to have the basic knowledge of Java and sprongboot. Along with a basics of the kafka.
- Start your kafka local/cloud cluster. Then create a topic (here — BOOK-STORE-SAMPLE).
kafka-topics.bat --zookeeper 127.0.0.1:2181 --topic BOOK-STORE-SAMPLE --create --partitions 3 --replication-factor 12. If using the command line then mvn clean , install and package. Otherwise let the intellij or Eclipse the work for you.
Consumer App for the BOOK-STORE-SAMPLE
The git repo for the consumer app is:
The prerequisite for this app as well is Java + Springboot and some basic knowledge of httpclient.
In this app apart from consuming the message we are publishing the message also in the the SOLR through the rest end point. I have configured the SOLR for Cross Origin. In the following repo. Feel free to clone or if you already have one then continue with that.
Once cloned then standard operating for the solr client is:
cd C:\solr-8.8.0\bin
solr start # to start the solr client on default port 8983
solr stop -p 8983 # to stop a solr client on specific port
solr stop -p all #to stop the slor client on all port
solr restart -p 8983 # to restart solr client
solr create -c sample_core # sample_core is the core name and this will form with default options
Start the solr client and navigate to localhost:8983 to have a graphical look of the solr client.
Building the UI for leveraging the search functionality in our app.
There are multiple solr client availble over at npm. But in this example we would be using the basic fetch by building the query in the solr client query builder. If you are interested in using the client you can look for solr-client, solr-node and more.
For my use case this is the query I used:
const url = `http://localhost:8983/solr/sample_core/select?q=name%3A*${textsearch}*%20or%20publisher%3A*${textsearch}*%20or%20description%3A*${textsearch}*`;I referred this link to learn on building the query
Please find the repo of the react searching app with the basic functionality:
With this, let’s end this series.
