Create an Expo React Native application that consumes an existing Algolia Search index. The app should include a search input and an area for displaying the results.
{
"title": "Writing Children’s Picture Books",
"image": "https://assets.cdn.bbcmaestro.com/55ed4ddb862ddaf992bb802ab30d393c.jpeg",
"slug": "writing-children-s-picture-books",
"state": "published",
"preorder": false,
"path": "/courses/julia-donaldson/writing-children-s-picture-books",
"maestro_section_body": "You couldn’t ask for a more qualified teacher. Julia’s books have sold more than 100 million copies worldwide, won too many awards to list and been adapted into eight award-winning animated films. And she’s a former Children’s Laureate to boot. So soak up the wisdom and insight from this formidable writer and her frequent collaborators – including her agent, her editor and The Gruffalo illustrator, Axel Scheffler.",
"maestro": {
"first_name": "Julia",
"last_name": "Donaldson",
"full_name": "Julia Donaldson",
"image": "https://assets.cdn.bbcmaestro.com/55ed4ddb862ddaf992bb802ab30d393c.jpeg",
"slug": "julia-donaldson",
"state": "published"
},
"lessons": [
{
"title": "Writing Children's Picture Books Introduction",
"image": "https://assets.cdn.bbcmaestro.com/a7db54344438e14ff5ec483a2ab2b583.jpeg",
"position": 0,
"duration": 5,
"state": "published",
"path": "/courses/julia-donaldson/writing-children-s-picture-books/lessons/writing-children-s-picture-books-introduction",
"keywords": [
"picture book",
"writing",
"characters",
"plot",
"language",
"illustrator",
"author",
"lesson",
"course",
"children",
"words",
"story",
"idea",
"publication",
"creation",
"inspiration",
"artist",
"education",
"art",
"music",
"poem",
"scheme",
"novel",
"partner",
"illustration",
"adventure",
"exercise",
"skills"
]
}
]
}Application ID: Shared separately
Search API Key: Shared separately
Index Name: courses
As a user, I want to enter a search query into a search input field so that I can find courses relevant to my interests.
As a user, I want the search results to update in real-time as I type so that I can see immediate feedback and find courses more efficiently.
As a user, I want to see a list of courses that match my search query so that I can quickly browse through the available options.
As a user, I want each search result to display the course title as the primary heading and the maestro's full name as a subheading so that I can easily understand the course offerings.
As a user, I want to see a message indicating no results were found when my search query does not match any courses so that I understand there are no available options for my search criteria.
As a user, I want to see an error message if there is an issue with the search (e.g., network error) so that I know something went wrong and can try again later.
Ensure the mobile application's accessibility by incorporating proper labeling and accessible elements for screen readers, implementing adequate color contrast, and ensuring text readability.
Implement best practices to maintain optimal performance as real-time results are updated in the application.
Questions or feedback on how we can improve this challenge are always welcome.