FD Internship Assignment Question
FD Internship Assignment Question
www.aulacube.com
Assignment Question:
Assignment Title:
Building a React Component with Comment Filtering and Hosting.
Assignment Description:
Your task is creating a React application that fetches 100 comments from a public API, displays the
first comment associated with each post as if it were the post itself on the left side, and allows users to
filter these "posts" by their postId. Clicking on a "post" should display its associated comments on the
right side. Both the left and right sides should be scrollable to accommodate large datasets. Finally,
you will need to upload your project to a GitHub repository and host it on CodeSandbox.
Assignment Tasks:
1. Fetch Comments:
1.1. Retrieve 100 comments from the JSONPlaceholder Comments API.
2. Render Posts:
2.1. Display the first comment for each post as if it were the post itself on the left side.
2.2. Implement a filter that allows users to enter a postId and filter the left side based on this input.
3. Display Comments:
3.1. Clicking on a "post" on the left side should display its associated comments on the right side.
3.2. Ensure that both the left and right sides are scrollable to handle large datasets.
4. GitHub Repository:
4.1. Create a new GitHub repository for your project.
4.2. Push your project code to the GitHub repository.
5. CodeSandbox Hosting:
5.1. Host your project on CodeSandbox.
5.2. Share the CodeSandbox project URL for evaluation.
Evaluation Criteria:
You will be evaluated based on the following criteria:
• Effective React component development: How well you build and structure your React
components.
• Proper fetching and rendering of comments and "posts": Your ability to fetch data and
display it correctly.
• Implementation of the filter feature for "posts": How you allow users to filter posts
by postId. (You can also implement a drop down of available postIds that the user can
choose from).
• Correct display of associated comments on the right side: Ensuring that clicking on a "post"
shows its comments.
• Proper implementation of scrollable sections: Making both the left and right sides
scrollable for large datasets.
• Code readability: The clarity and organization of your code.
• UI Design (bonus): Bonus points for a well-designed user interface.