JavaScript Developer Assessment Task

Table of Contents

• JavaScript Developer Assessment Task
  • Table of Contents
  • Objective
  • Task Overview
  • Task Description
    • Mandatory Requirements
    • Encouraged Requirements
  • Assignment date
  • Submission Deadline
  • Environment setup
  • About the REST API
    • Explanation
    • Configuration
  • Submission
  • FAQ
    • 1. I am getting node-gyp error while running npm install.
    • 2. I am getting Object is possibly 'undefined' error while running npm run serve.

Objective

You will be adding a new feature to an existing website.

Task Overview

Make sense of the provided REST API endpoints and add new route(s) (navigation) to the website to visualize the data received from the API in any preferable manner.

Task Description

Understand and get comfortable with the given website codebase
Make sense of the provided REST API
Use the REST API endpoints in the website to fetch data.
Add new route to the website. Route should be shown in the left navigation bar
Use that new route to visualize data fetched from the API. Use your design sense and imagination.

Mandatory Requirements

1. Website must have one additional route than the existing ones.
2. The new route should visualize the data fetched by the provided REST API.

Encouraged Requirements

1. At least one table based representation of data is encouraged.
2. Use Vuex store to store data
3. Clean code and maintaining proper design pattern is highly encouraged.

Assignment date

Submission Deadline

Environment setup

Prerequisite: Git, Nodejs version <= 14.18.1

Run the following commands to clone the website repository and start the development server.

# clone the project
git clone https://github.com/armour/vue-typescript-admin-template.git

# enter the project directory
cd vue-typescript-admin-template

# install dependency
npm install --legacy-peer-deps

# development
npm run serve

It should automatically launch the website at port 9527

You can learn more about the project structure and features of this website here.

About the REST API

Link to the REST API: Click here.

Explanation

The REST API is open sourced and provided by RapidAPI

Configuration

1. Signup/Login to RapidAPI first. Usage of RapidAPI requires you to have an API key which cannot be retrieved if you don't have an account.
2. Go to COVID-19 API

You can test the endpoint in their API playground and get comfortable with the data fetched. You can also get your API key and necessary headers from the playground code snippet.

One sample request (implemented with JavaScript axios) is shown below for reference:

const axios = require("axios");

const options = {
  method: 'GET',
  url: 'https://covid-193.p.rapidapi.com/countries',
  headers: {
    'X-RapidAPI-Key': 'abcde1234',
    'X-RapidAPI-Host': 'covid-193.p.rapidapi.com'
  }
};

axios.request(options).then(function (response) {
 console.log(response.data);
}).catch(function (error) {
 console.error(error);
});

In this request:

1. API Key : abcde1234
2. API endpoint : https://covid-193.p.rapidapi.com/countries

Submission

1. Upload your code to a public GitHub repository
2. Fill out this form
   • Provide your repository link to the Solution Link section.
   • Make sure to mention your notice period.
   • If you are a fresher, or currently not associated with any company, use the date of your submission as the notice period.

FAQ

1. I am getting node-gyp error while running npm install.

Answer: Please use node version <= 14.18.1 to support fibers in Windows OS.

2. I am getting Object is possibly 'undefined' error while running npm run serve.

Answer: Please follow the link to solve the error.

Best wishes for the task. For any further query, feel free to mail at contact@tajirhas9.xyz