IBM Castle - [24 Hours] Preferences Screen Angular Implementation

This challenge is part of the *IBM Castle* Challenge Series. Competitors who win challenges in this series will compete in a leaderboard of points for additional prizes. We have lots of contests coming in this series so it is best that you participate early and frequently. More information, rules, and leaderboards available here.

This challenge will implement a simple preferences page within the app.  It just has to store the logged in user’s settings in couchdb, then reload them when the user comes back to the page.

Note: We do not have a UI Prototype for this.

Here are the tasks for this challenge:

1. When the user clicks on the User icon in the upper right corner of the screen, take them to a full page with the url /preferences
   (Note: This will eventually be a dropdown, but for this challenge, clicking this icon will be fine.)
   

2. Implement the settings shown in the page screen attached.  

   1. Standard UI elements are fine.

   2. Toggling the setting should save it to the DB

3. When the user clicks a save button at the bottom of the page, persist those settings in the couchdb for that user.

4. When the user logs back in, those settings should be reloaded/displayed.

 

Angularjs Guidelines

We are listing some points here related to the front end that you need to strictly follow. Reviewers will be asked to evaluate strictly using these guidelines

1. Make only those changes that are needed for this contest. Additional changes such as changing the indentation, spaces, additional features are not needed.

2. You will have to use the Loopback AngularJS SDK when making requests to the backend.

3. The Angularjs code is currently broken down into logical components. Make sure that you continue to follow this style.

4. Your code should work across Desktops, Tablets and Mobile devices. As such, you need to make use of CSS and ensure that the display is responsive. Using Javascript for such functions is strictly prohibited.

5. Run the front end linter on your submission before you submit. You can run it using the command $npm run lintFE. Do not add any exceptions to your code. Adhere to the linter rules.

6. Use appropriate naming conventions in your code.

7. Don’t expose everything to the scope. Only if the view needs it, then attach it to the scope. Else keep it private.

 

For the backend, you need to note the following:

1. You need to use AirBnb’s ESLinter for both javascript code style and checks. This already exists in the existing code base. Make sure that you verify that your submission is free from any warnings and errors. This is only for the javascript aspects of the code. DO NOT add any exceptions to the linter. You can run the linter for the backend using $ npm run lint

2. You can add custom routes to the backend. Follow this guide.

Overall, make sure that you follow the guidelines specified in the Loopback documentation

Final Submission Guidelines

Kindly make sure that before uploading your submission, it:

1. Meets the requirements mentioned above.

2. Passes all the lint checks using the ESLint rules that we mentioned

3. Implements all the endpoints requested

Once you are ready, create a .zip file of the submission and upload this through the Submit and Review tool for this contest.  The winner may be asked to make a merge request back to the branch.