Building a Citizen Science Web Application for Tree Observation Data Collection

Back-end Development

Our clients run a Citizen Science service which collects data from the general public to feed in to large scale science projects.   Our job is to build a web application to support collecting data about trees.  The scientists have given us a set of attributes they want to collect for each tree observation. Our job is to build the website to support this and incorporate some features to motivate users to take part - leaderboards and personal profiles.

The back-end team is hard at work putting the server side code together. This code, they tell us, will provide an API that delivers JSON data and accepts form submissions to update the data collection.  Our job in the front-end team is to make use of this API to build the web application.

• Main Page (/): contains some summary information, list of recent observations, current top 10 leaderboard of users and a link to the form to add an observation. The user and observation entries link to their individual views (user profile view and observation detail view).
• Observation Form (/#!/submit): a view containing the form to submit an observation. The user will fill out the form and submit it. If the form is incomplete, a list of errors will be shown above the form and the user will be able to fix them and resubmit. If the submission is successful, the user is shown the User Profile View where the new observation will be included in the observation list.
• User Profile View (/#!/users/): shows the brief details of the user (name, avatar) and a complete list of the observations they have made, most recent first, each observation links to the Observation Detail view
• Observation Detail View (/#!/observations/): shows the full details of one observation including all fields
• Observation List View (/#!/observations): shows the complete list of observations, each observation includes at least the location and weather fields and links to the Observation Detail view
• Leaderboard View (/#!/users): lists the full list of users in order of the number of observations that they have made. Each entry links to the profile view for that user.

This will be a single page HTML application which means that only one HTML page will be loaded from the server. It will contain Javascript code that will construct the different views as required based on

At this point in the project, the back-end team has not dealt with authentication yet, so we just assume that one user (Bob Bobalooba) is logged in.

The JSON API is provided by a Python web application. You can run the application from the starter kit with the command:

The server provides endpoints for users and for observations. A user record looks like this:

An important part of the application is the form to add a new observation.  When submitting an observation to the URL /api/observations via a POST request, all of the fields in the observation record are required except for the id and timestamp fields.  These are added by the server and returned in the added record.

The complete observation will include the timestamp and id of the observation.

In this case you should update the page to show the User Detail View where the new observation should be included in the observation list for that user.

If the request failed (due to missing fields for example) the response looks like:

In this case you should update the page to show the list of error messages on the same page as the form so that the user can correct these errors.

There will be automated tests for the application. These will be in two parts: unit tests and functional tests. All tests will be run with the Cypress testing system (this runs tests on your application in a browser and will be introduced over the next week).

Unit tests check that your Javascript code does what it should.  We will provide unit tests for the functions that access the API and supply the interface for the data to the rest of the application (the Model).

Functional tests check the actual web pages that your code generates.  These tests simulate clicks on links in the page and submission of forms, then check for the correct response in the updated page.

Marks will be given for passing the tests that are supplied.