Roc8 Moonshot Assessment
Roc8 Moonshot Assessment
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:
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.
________________________________________________________________________
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.
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