Challenge Overview
Challenge Objectives
-
Custom CMS (content management system) called Zeta, Yelp API, basic HTML / Javascript
-
This challenge will be a proof of concept to show that we can build Zeta CMS “components” that call an API (Yelp) and can display the results.
Project Background
-
This is the start of multiple projects that will use the Zeta CMS. We will be building out a few sites that use Zeta and provide new functionality for the client.
-
This challenge will show that we can do what the client is going to need, as well as properly deploy and use the Zeta CMS.
-
Lots of Zeta challenges will be upcoming, so this is a good chance to get in early and start to get up to speed.
Technology Stack
-
Zeta is built on Node.js, MongoDB, and MySQL
-
Zeta is tough to deploy by itself, so we have provided a Vagrant setup that should be easily deployable through `vagrant up`
-
Details on deployment and the test user to use at login will be provided in the forum
Individual requirements
For this challenge, we will build and deploy two Zeta components, detailed below. A Zeta developer guide will be provided as part of the Vagrant deployment Git repository to help guide members.
1. Yelp Search Component (Major requirement)
The Yelp search component will be:
-
A text field where the user can enter a search term
-
A button named “Search” that will run the search and display the results in a linked search results component.
In the Zeta DocDef, the setup for the component should allow for input of the name of the results component where the results will be shown (see below). The component should get the location from the browser for use in the search. A prompt from the browser to allow location is acceptable.
2. Yelp Search Results Component (Major requirement)
The search results component will be a tabular list that shows the results from a search, tied to the panel above.
There should be two pieces:
-
A label above the tabular results that has text like “Search results for {search term}”
-
A table of data that shows the results, including this information for each result:
-
Businesses[x].distance
-
Businesses[x].location
-
Businesses[x].name
-
Businesses[x].phone
-
The table should be sortable by name and distance, both ascending and descending
-
Yelp API (Major requirement)
The Yelp service should be integrated into the service-static app in the Zeta deploy, allowing for global usage from future components. See the Services API section of the developer guide.
We will cover just the search API: https://www.yelp.com/developers/documentation/v3/business_search
UI Requirements:
Both of the components can be relatively unskinned, but they should react as normal web components, including validation and error handling. For instance, if “Search” is clicked on the search component without any input, it would make sense to show a red border around the text field to indicate that input is required. Similarly, if an error occurs while retrieving search results due to an API failure, the search results component should show a general error message like “An error occurred while retrieving results from Yelp”. The error message would be cleared the next time the user tried to search.
General guidelines:
Our Zeta resources (see the developers guide) will follow the existing naming convention and will be called project-resources-jobs
Deployment guide and validation document
Make sure to require two separate documents for validation.
A README.md that covers:
-
Deployment: How the components are installed in Zeta, added to a DocDef, and then shown on a document.
-
Configuration: How do we configure the API details for Yelp?
-
Dependency installation: What new dependencies are required and how are they installed?
A Validation.md that covers:
-
How the deployed components are used, showing a couple test cases, including errors.
Validation video / screencast
-
A video is required for this challenge.
What To Submit
-
Component code
-
README.md
-
Validation.md
-
Link to your validation video