0% found this document useful (0 votes)
47 views4 pages

Roc8 Moonshot Assessment

The document outlines the requirements for developing a product analytics platform featuring an interactive data visualization dashboard and an email client app similar to Outlook. The analytics platform should include real-time data visualization, advanced filtering options, cookie management, user authentication, and URL sharing capabilities. The email client app should display a list of emails, allow viewing of email bodies, support marking emails as favorites, and enable filtering by read/unread status, with a focus on modularity and performance.

Uploaded by

Anusree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views4 pages

Roc8 Moonshot Assessment

The document outlines the requirements for developing a product analytics platform featuring an interactive data visualization dashboard and an email client app similar to Outlook. The analytics platform should include real-time data visualization, advanced filtering options, cookie management, user authentication, and URL sharing capabilities. The email client app should display a list of emails, allow viewing of email bodies, support marking emails as favorites, and enable filtering by read/unread status, with a focus on modularity and performance.

Uploaded by

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

Problem Statement: Interactive Data Visualization Dashboard

Background:
Imagine you are working on a project to build a product analytics platform for your company. The
platform provides users with real-time data on sales, user engagement, etc. Your task is to develop a
front-end application that includes interactive data visualization charts, advanced filtering options, and
efficient cookie management for user preferences.

Additionally, the user will be sharing a view of the page with specific filters enabled and dates selected
through the browser URL. Other users can then access the shared view by simply visiting this URL
upon authentication.

Requirements:

Interactive Data Visualization:


●​ Build a bar chart to represent the Features. A,B,C.. are features and x axis is total time spent
between the selected date range.
●​ Implement a line chart to display the time trend of a particular category upon clicking in the
bar chart. Chart should have pan, zoom-in, zoom-out options on time range.

Advanced Filtering:
●​ Include 2 filters: Age (15-25, >25), Age (male, female).
●​ Add a date range selector component that allows users to choose a specific time range for
analytics data. Update the graph based on the selected time range and filters

The dataset is given below. You have to create an API Integration layer and Data Pipeline. Create an
API from the framework of your choice. Here your data pipeline building skill will be evaluated as well
as API building skill.
Frontend Developer Assignment Data
https://docs.google.com/spreadsheets/d/1l7GstWHc69HPV0irSdvoMIyHgtufUPKsbtCiNw7IKR0
Cookie Management:
●​ Implement a cookie management system to store user preferences of filters and date range.
When users revisit the page, their previous settings are applied by retrieving data from
cookies. Provide an option for users to reset or clear their preferences.

Responsiveness:
●​ Ensure that the frontend application is responsive and works seamlessly on various devices,
including desktops, tablets, and mobiles.

User Authentication:
●​ Implement a basic user login interface. Users should be able to sign up, log in, and log out.

URL Sharing:
●​ Users should be able to share a chart created with date range and filters to another user via a
URL. The second user will have to log in first to view the chart because the data is
confidential.

________________________________________________________________________

Build an email client app like Outlook.

Following APIs are provided:


1.​ Get all emails
2.​ Get email body for a particular email

Sample UI Email List View (http://bit.ly/2VtQGcb)


Email body View (http://bit.ly/2I5DemI)
Color codes (http://bit.ly/2wa2pCa)

Product Features
1.​ The app features an email list page. This page shows the list of emails sent to a user.
2.​ Clicking on any email item in the list should split the screen into a master-slave
(left-right) screen type where the master (left) shows the email list (with the selected
email item) while the slave (right) shows the body of the email. The body of the email
is not known ahead of time and should be loaded only when the email item is clicked.
3.​ The app should allow any particular email item to be marked as “favorite”, it should
be done via clicking on an email item and then clicking the “Mark as Favorite” button
in the email body section.
4.​ The app should show read and unread mails in different CSS styles to distinguish
between the same.
5.​ Allow filtering emails by “favorites”, “read” and “unread”.

Must Haves:
1.​ Render all emails page using the API
a.​ Each email should have from, subject, short description, date and time.
b.​ The avatar (circular logo) in each email item should be populated with the first
character of first name (sent in API response).
2.​ Upon clicking a particular email, render the body section for it using the API. Email
body has 3 sections:
a.​ Email subject
b.​ Email body
c.​ Email date and time
3.​ Allow email to be marked favorite in the body section of the email
4.​ Filter emails marked as favorite, read and unread
5.​ UI should be as close to the mocks provided
6.​ The date should be rendered in format dd/MM/yyyy hh:mm a
Good to Have:
1.​ Email list could be long and hence is paginated. There are 2 pages i.e. page 1 and
page 2 which can be accessed via the APIs provided below.
2.​ Persist favorited and read emails across sessions using persistent storage
technologies.

Points to consider:
1.​ Focus on the modularity of code and design of the solution. Keep performance of the
application in mind.
2.​ Please refrain from using any plugins However, you can use tooling such as
webpack, grunt, gulp, etc.
3.​ The final solution should work without errors
4.​ Do not completely ignore the layout / visual design. A minimalist visual design /
layout must be followed, it is also important for us to evaluate your CSS knowledge.
5.​ Do not create a div soup instead use semantic HTML tags.

You will be evaluated based on:


1.​ Correctness and completeness of the solution.
2.​ Code design and quality.
3.​ Visual aesthetics (the UI should be as close as possible to the given design).
4.​ Technology choices (e.g. ES 6/7 over ES 5 - avoid mixing of ES 5/6/7).
5.​ Your understanding of the problem statement.

API Sources
1.​ Emails List APIs:​
https://flipkart-email-mock.now.sh/ (Not Paginated)​

https://flipkart-email-mock.now.sh/?page=<pageNumber> (Paginated) e.g.
https://flipkart-email-mock.now.sh/?page=1 and
https://flipkart-email-mock.now.sh/?page=2
2.​ Email body API:​
https://flipkart-email-mock.now.sh/?id=<email-item-id> e.g.
https://flipkart-email-mock.now.sh/?id=3

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy