This is a submission for the KendoReact Free Components Challenge.
What I Built
🌿 Quranic Verse Explorer:
A spiritually resonant React app that lets users explore Quranic verses through natural language search, read and listen to the words of the Supreme Power.
đź“Ś Motivation Behind Choosing This Project:
Many Quran apps offer keyword-based search, but few allow natural language queries that return only Quranic verses. This app bridges that gap, offering clarity, purity, and spiritual depth.
🧠App Overview:
Quranic Verse Explorer is composed of three thoughtfully designed sections: Search, Explorer, and About.
Search: Ask anything about Allah ﷻ, Islam, or the Quran—using natural language. Unlike many platforms that restrict you to keywords, this app understands full questions and returns answers exclusively from Quranic verses. No extra commentary—just the divine response, directly from the source.
Explorer: A visual gateway to all 114 surahs. Each surah card invites you to explore its English translation and listen to its recitation. With a single click, you’re immersed in the message and melody of revelation. When you're done, simply close the view and continue your journey through the Quran.
About: This section includes: A brief introduction about me. Technical details behind the app. A feedback system powered by Formspree, where you can share your thoughts. I’d love to hear from you!
✨ Features:
-Natural language search powered by Nuclia
-Verse-only results for focused reflection
-Surah Explorer with translation and recitation
-Feedback form via Formspree
-Elegant UI with KendoReact components
🛠️ Tech Stack:
-Frontend: React, JavaScript, HTML, CSS
-Backend: Node.js server to securely connect with NucliaDB
-Search Engine: NucliaDB for natural language Quranic verse retrieval
-Feedback Collection: Formspree integration
-AI Assistance: Kendo AI Coding Assistant (via VSCode) and Microsoft Copilot for setup and troubleshooting.
This architecture ensures fast, secure, and meaningful interactions with Quranic content. The UI is designed with accessibility in mind, ensuring readability and ease of navigation for all users.
Demo
Visit the Live App at Render
Github Repository for this app
Demo Video on YouTube
Screenshots of App Functionalities
âś… Challenge Eligibility:
a) KendoReact Components Used
This app is built entirely with React and includes exactly 10 KendoReact components:
1. AppBar: Displays app name at the top of each page
2. TabStrip: Holds the three main tabs
3. Input: Accepts natural language queries
4. StackLayout: Displays search results
5. Button: Used for search, feedback submission, recitation playback, and closing views
6. Card: Represents each surah in Explorer
7. Avatar: Displays my photo in the About section
8. Loader: Spinner shown before surah translation loads
9. PanelBar: Organizes About section items
10. TextArea: Allows users to submit feedback
b) Kendo AI Coding Assistant Usage
Kendo AI Coding Assistant and Microsoft Copilot supported me throughout development—from component usage to backend setup. Proof of integration and usage is available in the Kendo AI usage
c) Nuclia Integration
NucliaDB enables natural language search, returning Quranic verses relevant to your query. Proof of integration and usage is available in the
Nuclia integration
This is my first hackathon submission—and my first project beyond academic coursework. I really enjoyed building it, learning new technologies, solving unexpected issues, and growing with every challenge. Each solution brought joy, and every moment added to my memory of sincere effort. I hope you all would explore my application, and try the search system at least once, ask whatever is in your heart and receive your answer directly from the words of the Most Gracious. Your feedback would mean a lot to me.
Thanks to the organizing team for creating a space where beginners like me can step into the Dev world. Also thanks to everyone for supporting me during the challenge. One thing I loved most is the spirit of mutual help. And when I faced an issue, others responded immediately. Perhaps that's the true beauty of Dev world!
Top comments (1)
Masha Allah