Project: Shared Bookmarks

As developers, we spend a lot of time reading articles on the web and we often want to record useful links to come back to them later. It is fun to share your bookmarks with others so that they can find interesting and useful links too.

Here are some examples of bookmark sites:

• Jason Kottke
• Jeremy Keith
• Andy Baio
• Ali Smith

Your task is to write code which allows a user to save a link with a short description and share them with others.

You should make a frontend, which displays a list of bookmarked links and the user’s description. A user can create new bookmarks by submitting a form with the URL and the description. You should use HTML and JavaScript only. You should not use CSS. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI.

Supplied scaffolding

We have provided a storage.js file, which contains four functions to help with data storage. storage.js is a file containing four functions:

• getUserIds(): when called, returns an array of strings, each of which is a user id
• getData(userId): when called with a user id string as an argument, returns an array of objects, each of which represents a bookmark that belongs to the user
• setData(userId, data): when called with a user id string and a data object as arguments, it will store the data for the user. The object should contain information about the bookmark, such as the URL, title and description. The function does not return anything
• clearData(userId): when called with a user id string as an argument, it will clear any stored data associated with the user id. This is provided to help with development, and is not required in the final code

Note: None of the storage functions perform any validation or de-duplication, so ensure that you are sending the correct data before storing it.

Requirements

You must submit both a link to your GitHub repo, and a link to the deployed website.

Your website must be hosted on the internet, and must be automatically deployed when you merge changes to your GitHub repo.

Your website must include a drop-down to select a user to display information for. When a user is selected, you must display the list of bookmarks for that user. If there are no bookmarks for the user, you should present a message explaining this.

You must not implement any kind of authentication. Just a drop-down to choose which user’s information to display. You must not implement data storage yourself, as we have provided that for you.

After picking a user, your website should display the list of bookmarks in reverse chronological order. For each bookmark, it should display the title and description of the bookmark. The title should be hyperlink to the URL of the bookmark. The timestamp at which the bookmark was created should be displayed.

Your website must include a form with text inputs for the URL and title, a textarea for the description and submit button that allows a user to add a new topic. This form must be accessible, so for example, hitting the Enter key will also submit the topic name, the same as clicking the submit button.

After the new data has been stored, the updated list of bookmarks must be displayed (including the new bookmark) for the relevant user.

Your GitHub repository must contain unit tests which demonstrate that your code works. End to end tests are optional.

Rubric

All of the below requirements must be met for the project to be considered complete:

• The website must contain a drop-down which lists two users
• Selecting a user must display the list of bookmarks for the relevant user
• If there are no bookmarks for the selected user, a message is displayed to explain this
• The list of bookmarks must be shown in reverse chronological order
• Each bookmark has a title, description and created at timestamp displayed
• Each bookmark’s title is a link to the bookmark’s URL
• The website must contain a form with inputs for a URL, a title, and a description. The form should have a submit button.
• Submitting the form adds a new bookmark for the relevant user only
• After creating a new bookmark, the list of bookmarks for the current user is shown, including the new bookmark
• The website must score 100 for accessibility in Lighthouse
• Unit tests must be written for at least one non-trivial function

Music data project

A common task in software is to take some data, process it in some way, and present it usefully to someone.

We have supplied a collection of data for you to analyse. Your task is to write code which processes this data and shows useful conclusions to a user.

Make a small HTML + JavaScript frontend which displays the answers to several questions, which are listed below.

Some principles to remember throughout this project:

1. This is a project about data processing, not UI. You should make a simple frontend to show the data in valid semantic HTML. No credit will be given for making prettier or more complicated frontend. Do not write any CSS.
2. You should assume the data will change in the future, but will have the same schema. So you shouldn’t pre-compute anything. Your code should always read the data and calculate results from scratch.

data.js is a file containing three functions:

1. getUserIDs(): when called, returns an array of strings, each of which is a user ID.
2. getListenEvents(userID): when called, returns an array of objects, each of which contains information about a single time that the given user listened to a song. The listen events are sorted by when they happened, oldest to newest.
3. getSong(songID): when called with one string as an argument, returns an an object containing information about a single song.

Requirements

This is an individual project. You are expected to work on it on your own. You can talk to other trainees and volunteers and get help and advice, but you should write all of the code yourself.

You must submit both a link to your GitHub repo, and a link to the deployed website.

Your website must be hosted on the internet, and must be automatically deployed when you merge changes to your GitHub repo.

Your website must include a drop-down to select a user to display information for. When a user is selected, you must display answers to all of the questions for that user. If a question doesn’t apply to that user, you should not show the question.

You must not implement any kind of authentication. Just a drop-down to choose which user’s information to display.

Your GitHub repository must contain unit tests which demonstrate that your code works. End to end tests are optional.

Questions to answer

1. What was the user’s most often listened to song according to the data?
2. What was the user’s most often listened to artist according to the data?
3. What was the user’s most often listened to song on Friday nights (between 5pm and 4am)?
4. What are the answers to the above questions if using listening time rather than number of listens?
5. What song did the user listen to the most times in a row (i.e. without any other song being listened to in between)? How many times was it listened to?
6. Are there any songs that the user listened to every day between the first day that user listened to any songs and the last day that user listened to any songs? If the answer is yes, you should show which one(s). If the answer is no, you should not show anything about this question.
7. What were the user’s top three genres to listen to by number of listens?

Rubric

All of the below requirements must be met for the project to be considered complete:

• The website must contain a drop-down which lists four users.
• Selecting a user must display answers relevant to that user (see table below).
• The code written to calculate the answers to the questions must seem like it could handle different data if it were supplied, including the following edge-cases:
  • User 4 has no data, so no questions apply to the user. Some intelligible statement should be shown to the user (e.g. “This user didn’t listen to any songs.”).
  • If a question doesn’t apply (e.g. if no songs were ever listened to on a Friday night), the interface should completely hide the question and answer. Displaying the question and an empty result, or any kind of error, is not acceptable.
  • If fewer than three (but more than zero) genres were listened to the site should list the top genres listened to. It must not display text like “Top 3 genres”, but may say “Top genres” or “Top 2 genres” or similar.
• Unit tests must be written for at least one non-trivial function.
• The HTML is valid.

Bonus points (which don’t mean anything):

• Re-using code between the “most often” questions (i.e. questions 1, 2, 3, 4).
• End-to-end tests.

Expected output data:

Codewars Leaderboard project

Codewars provides an API that can be used to look up an individual user’s rank and score.

We will use this to build a leaderboard, similar to the one on the Codewars website.

Your task is to create a website which allows a user to input a list of Codewars users, fetch their scores from the API and then display them so that you can compare. You should focus on HTML and JavaScript. Some CSS is required for completing this task, but the website’s design is not the focus of the assessment. We will assess you on correct logic. You don’t need a perfect UI, and it’s ok if your UI is incomplete.

Requirements

TODO: Decide whether this is an individual or group project, then include instructions here

You must submit both a link to your GitHub repo, and a link to the deployed website.

Your website must be hosted on the internet, and must be automatically deployed when you merge changes to your GitHub repo.

You must be able to explain every line of code in your project, even ones other people in your group wrote.

You should assume that Codewars ranks will change in the future. So you must not pre-compute anything. Your code should always read the data and calculate results from scratch.

Your website should display an input, allowing the user to add a comma-separated list of Codewars usernames (e.g. “CodeYourFuture,40thieves,SallyMcGrath”) that they want to display on the leaderboard.

You must not implement any kind of authentication or data storage. Just a form to pick which usernames to display on the leaderboard.

When a user is happy with the list of usernames, they can trigger your website to fetch data from the Get User endpoint of the Codewars API. Within this data, each user has a ranks property which should be used to calculate their ranking.

Using the leaderboard ranking data, your website should calculate all of the possible languages that the users have a ranking in. Your website should show a drop-down allowing the user to pick from all of these language rankings, plus the overall ranking.

Your website should display a table for the ranking data that the user has selected from the drop-down. The table should default to showing the overall ranking if a language has not been selected yet. If the user selects another language from the drop-down, the table should show it’s ranking data.

The table should have columns for username, clan and score. Each user should have a row in the table showing their relevant data points for selected language ranking. The rows should be sorted so that the user with the highest score for the selected language ranking is at the top, and the user with the lowest score is at the bottom.

If a user does not have a ranking for the currently selected language, the user should not be shown in the table.

The user with the highest score should be highlighted in some (fun!) way so that their achievement can be celebrated.

Your GitHub repository must contain unit tests which demonstrate that your code works.

Supplied test scaffolding

A test demonstrating the usage of the nock testing library has been provided for you. This library is helpful for replacing fetch calls with “mocked” data, allowing you to control the test fully.

You must run npm install within the Project-Codewars-Leaderboard folder in order for the scaffolding to work.

Running npm test (within the Project-Codewars-Leaderboard folder) will run the tests.

You are welcome to use as much of the provided files as you want, or to ignore/delete them if you don’t.

Rubric

All of the below requirements must be met for the project to be considered complete:

• The website must contain an input to accept a comma-separated list of users
• Submitting the list of users fetches data from the Codewars API about each of the users
• Based on the leaderboard data, a drop-down is shown, allowing the user to pick from all of the possible language rankings plus the overall ranking
• The default ranking selected is the overall ranking
• A table is shown for the current ranking, with columns for each user’s username, clan and score
• Changing the selected ranking will update the table to reflect the newly selected ranking
• The table is sorted from the highest to lowest score, top to bottom
• The top user’s score is visually highlighted
• The website must score 100 for accessibility in Lighthouse
• Unit tests must be written for at least one non-trivial function

Below is an example of a table showing the overall ranking for 3 users: CodeYourFuture, SallyMcGrath and 40thieves.

Please note that the individual ranks/scores shown in the above table may not be accurate as they may change if new katas are completed by these accounts. To see up-to-date data, you can look it up in the API responses: CodeYourFuture, SallyMcGrath, 40thieves.