Scribd
Upload
13 views

Frontend Developer Assessment

Uploaded by

People Choice
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Frontend Developer Assessment

Uploaded by

People Choice
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Frontend Developer Assessment

Task 1: Create a Side Navigation Bar


● Objective: Implement a side navigation bar similar to the one highlighted in
the provided image.
● Requirements:
○ The navigation bar should be responsive and collapse into a
hamburger menu on smaller screens.
○ Include at least three navigation items.
○ Highlight the active navigation item.
● Evaluation Criteria:
○ Correct implementation of the navigation bar layout.
○ Responsiveness on different screen sizes.
○ Proper highlighting of active navigation items.

Task 2: Graph Population Data


● Objective: Fetch population data from the provided API
(https://datausa.io/api/data?drilldowns=Nation&measures=Population) and
create a graph.
● Requirements:
○ Utilize React JS and any relevant libraries (e.g., Chart.js) to create the
graph.
○ Display the population data for different nations.
○ Provide appropriate labels, legends, and axis titles for the graph.
● Evaluation Criteria:
○ Successful retrieval and display of population data.
○ Accuracy and clarity of the graph representation.
○ Proper labeling and styling of the graph components.

Task 3: Display Cryptocurrency Prices


● Objective: Fetch cryptocurrency prices from the provided API
(https://api.coindesk.com/v1/bpi/currentprice.json) and display them in cards.
● Requirements:
○ Fetch data asynchronously using React's lifecycle methods or hooks.
○ Display prices of Bitcoin in multiple currencies (e.g., USD and Euro).
○ Design visually appealing cards to showcase the cryptocurrency prices.
● Evaluation Criteria:
○ Proper integration and retrieval of cryptocurrency prices.
○ Clear presentation of prices in the card format.
○ Visual appeal and consistency in card design.

Task 4: Integrate MetaMask Wallet (Optional)


● Objective: Implement a feature to connect the MetaMask wallet using Web3 JS
when the "Connect Wallet" button is clicked.
● Requirements:
○ Utilize Web3 JS library for MetaMask integration.
○ Display appropriate feedback/messages for successful/unsuccessful wallet
connection attempts.
○ Ensure compatibility with modern browsers and MetaMask extension.
● Evaluation Criteria:
○ Successful integration of MetaMask wallet connection functionality.
○ Proper handling of user interactions and error messages.
○ Compatibility and robustness across different browser environments.

Submission Guidelines:
● Provide a GitHub repository link containing the code for the tasks.
● Optionally, provide a hosted link (e.g., on GitHub Pages, Netlify, etc.) where the
assessment can be interactively viewed.

Evaluation for each task will be based on completing requirements, code quality, adherence
to best practices, and overall presentation. You must include the GitHub and optional hosted
links in your submission. If you need further clarification or assistance, feel free to ask to
reach out to [email protected] .

Sample Reference Image:

You might also like