Eliot's Weekly Challenge is a competition for developers in the run-up to our annual conference, MongoDB World. Test out your skills and win prizes every week. Find out more here.
MongoDB is the best database for modern applications, and MongoDB Stitch and Atlas make it even easier to get started when building for web or mobile.  In this challenge, we've built on our earlier challenges using the sample Airbnb dataset, providing starter code for a website that allows you to search for properties.  In this challenge you’ll need to connect the starter code to that data in MongoDB and host the site. Â
You could build this site with the traditional MEAN stack – setting up a web server, creating an API, and integrating different services for your backed.  However, in this challenge we'll use the JAM stack (JavaScript, APIs, and Markup) – storing your data in MongoDB Atlas and using MongoDB Stitch as the API layer for user authentication, data access rules, and serving your static content.
Â
The first twenty correct submissions will receive a $10 prize and will be entered into a raffle for the main prize. The main prize for week 5 is:
• $5000
• $1000 MongoDB Atlas Credits
• A custom MongoDB onesie, which you’ll be able to retrieve at MongoDB World.
• A free Conference Pass to MongoDB World
Yuval! Congratulations Yuval, we will send you an email with all the details about your prize.
Â
And here are the names of all the others who submitted correct answers. We will notify you by email about your $10 prize!
Â
Jucilaine, Chris, Loan, Shrey, C, Mohamed, Agung, Tajay, Adam, Chi-Anh, Ryan, and Cameron!
Â
Check out our blog for the solution to this challenge!
For this week's challenge, you'll take a simple website and use Stitch to connect it to a dataset, quickly building out a simple website.  If you’ve completed some of the previous challenges, you can reuse your existing MongoDB Atlas cluster and Stitch application.
Â
If this is your first challenge (or you’d like to use a new cluster) you can start by:
Â
1. Launching a free MongoDB Atlas M0 instance.
2. Loading the Atlas sample data sets into your cluster.
3. Creating a Stitch application and linking your Atlas cluster to Stitch.
You have until Monday, June 3rd, at 5:00pm (Eastern Daylight Time) to submit your answers.
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.
2. Open 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:
a. address
b. bathrooms
c. bedrooms
d. name
e. price
f. property_type
Â
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.
Â
1. Open 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. Â
Â
The 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 updateAggregateText()
.
Â
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!
Â
Eliot's Weekly MongoDB World Challenge is a competition for developers in the run up to MongoDB's global conference. You can win up to $6,000!