Slide 1
Slide 1 text
INFUSING
INTELLIGENCE
TO REACT
APPS
SAHAN SERASINGHE
SOFTWARE ENGINEER
Slide 2
Slide 2 text
ABOUT ME
Sahan Serasinghe
👨💻 Software Engineer | GitHub
📣 twitter.com/@_SahanSera
✍ sahansera.dev
{
https://github.com/sahansera/rgs-2022-demo
Slide 3
Slide 3 text
AGENDA
§ The “search” problem
§ Key building blocks
§ Putting things together
§ What’s out there?
§ Reference Architecture
§ Implementation
§ Recap
§ Further improvements
https://github.com/sahansera/rgs-2022-demo
Slide 4
Slide 4 text
DEMO CODE
github.com/sahansera/rgs-2022-demo
https://github.com/sahansera/rgs-2022-demo
Slide 5
Slide 5 text
TYPICAL REACT
WEB APP
https://github.com/sahansera/rgs-2022-demo
Slide 6
Slide 6 text
https://github.com/sahansera/rgs-2022-demo
Slide 7
Slide 7 text
https://github.com/sahansera/rgs-2022-demo
Slide 8
Slide 8 text
THE PROBLEMS
How can you ingest data from many sources?
How do you make them searchable?
How do you give a great user experience by enriching with additional
context?
https://github.com/sahansera/rgs-2022-demo
Slide 9
Slide 9 text
KEY BUILDING BLOCKS
Data source Search Index Indexer AI enricher
https://github.com/sahansera/rgs-2022-demo
Slide 10
Slide 10 text
https://github.com/sahansera/rgs-2022-demo
Slide 11
Slide 11 text
PUTTING THINGS TOGETHER
React App
Search Index
Indexer
AI enricher
Data source
https://github.com/sahansera/rgs-2022-demo
Slide 12
Slide 12 text
WHAT’S OUT
THERE?
https://github.com/sahansera/rgs-2022-demo
Slide 13
Slide 13 text
MANY OPTIONS
• Azure Cognitive Search
• AWS Kendra
• Algolia
• Google Cloud Search
• Elasticsearch
https://github.com/sahansera/rgs-2022-demo
Slide 14
Slide 14 text
REFERENCE
ARCHITECTURE
https://github.com/sahansera/rgs-2022-demo
Slide 15
Slide 15 text
https://github.com/sahansera/rgs-2022-demo
Slide 16
Slide 16 text
https://github.com/sahansera/rgs-2022-demo
Slide 17
Slide 17 text
CODING TIME
https://github.com/sahansera/rgs-2022-demo
Slide 18
Slide 18 text
RECAP
React frontend and
with backend
Pushed data to a
data store
Created a pipeline
to ingest data
Added AI enrichment
to the data
https://github.com/sahansera/rgs-2022-demo
Slide 19
Slide 19 text
CONSIDERATIONS
• Additional datastores
• Serverless approach
• Azure Functions/AWS Lambda/BaaS
• Scalability
• Reliability
• Pricing
https://github.com/sahansera/rgs-2022-demo
Slide 20
Slide 20 text
FURTHER IMPROVEMENTS
• Support unstructured data (eg: images, PDFs etc.)
• Translations
• Custom AI enrichers
• Post recommendations
https://github.com/sahansera/rgs-2022-demo
Slide 21
Slide 21 text
THANK YOU
https://github.com/sahansera/rgs-2022-demo
Slide 22
Slide 22 text
RESOURCES
https://github.com/sahansera/rgs-2022-demo
• https://nextjs.org/
• https://mantine.dev/
• https://docs.microsoft.com/en-us/azure/search/search-
what-is-azure-search
• https://aws.amazon.com/kendra/
Slide 23
Slide 23 text
IMAGE CREDITS
• Photo by Lorenzo Herrera on Unsplash
• Photo by Marius Niveri on Unsplash
• Stock images provided by PowerPoint
https://github.com/sahansera/rgs-2022-demo