You’ll begin this challenge by getting a copy of the starter website code. Next, you’ll configure rules and authentication. Then you’ll enable the search functionality in the website by using Stitch’s QueryAnywhere. Finally, you’ll put your site online using Stitch’s Static Hosting.
The Starter Website
We have created starter code for a website that allows you to search for Airbnb properties. You’ll use this code to complete the challenge.
1. Get a copy of the code in the GitHub repo https://github.com/mongodb-developer/weekly-challenge-5 by cloning the repo or downloading it.
index.html in your browser. The page should load, but the search functionality will not work until you update
data.js later in this challenge.
Rules and Authentication
The first step in this challenge is to configure access to the Airbnb data in your Atlas cluster via Stitch by defining rules. When using Stitch, your data is protected by default – applications won't be able to access any data before you create rules permitting access.
1. Since we'll be using the sample Airbnb dataset, create rules for the
sample_airbnb database and
listingsAndReviews collection that allow any user to read (but not write to!) the following fields:
2. Enable anonymous authentication. Even when rules are enabled, Stitch requires all requests to be authenticated. Since this data is not sensitive and we want our Airbnb searching site to be publicly available, you can simply enable anonymous authentication.
Enabling Searching with QueryAnywhere
It might not seem like much, but with Atlas and Stitch you've now created a simple backend that allows protected access to your data. Now, all that's left to do is connect your website to your data.
data.js in your favorite code editor.
2. Update lines 7-10 to ensure your frontend is pointing to the correct application and MongoDB service.
3. Next, the
searchAndBuild() function should query MongoDB for relevant data before populating the UI. Around line 50, write a query using Stitch's SDK to find documents that match all of the search parameters currently selected in the dropdowns and pass the results to the
refreshTable() function. Make sure that the query you write returns properties that:
a. Are located in the country specified.
b. Have at least as many bathrooms as specified.
c. Have at least as many bedrooms as specified.
d. Do not exceed the specified price per night.
e. Match the property type specified
Performance tip: Since Stitch operates on field-level rules, you can speed up your queries by adding a projection within your query options that filters out unnecessary fields.
4. In addition to the table, the site has text that displays:
a. How many results are being displayed
b. The total number of matching results
c. The average price for all results.
searchAndBuild() function is responsible for calculating the data described above. In order to calculate these, you should write an Aggregation Pipeline using the Stitch SDK that produces the total number of matching results and the average price. Update the
searchAndBuild() function to calculate the data and send the results to
Tip: You can use the Compass aggregation builder for help constructing your pipeline.
Checking Your Work
You can run the following search to verify that your search code is written correctly:
• Country: United States
• Type: Condominium
• Beds: 2
• Baths: 1
• Price: 500
This search should yield 72 results with an average price of $266 per night.
Hosting your Website
After testing your website locally to ensure that your connection to Atlas, authentication, rules, and queries work, it's time to host your site so that anyone can use it.
1. Use Stitch's Static Hosting to put your site online.
Once you have completed all of the challenge tasks, click the button below to submit your answers!