7.POCE.3: Read Later


Create a frontend-only app that stores a list of links to articles that you want to read at a later time.
Sample UI for this app


Begin with the base React repo.


Create a form and a submit button. When the user types a link into the text box and clicks submit, put that link into a list of links. Display the list of links.


List component

Create a separate LinkList component that renders the list of links. Note that the list array data structures should still be stored in the parent component.

Read and Unread Lists

Add a checkbox to mark when the user has read a link. The link should be transferred to a new list of already-read links.

Validate URLs

Add an NPM library that validates if the input is a valid URL. If it is not, show an error to the user and do not add the link to the list.

Reference solution

Click here to see a reference solution for this post class.