0
showcase
Shipped: A tool for a problem you have
I built a responsive Personal Reading List web application using React, JavaScript, CSS, and Vite. Users can add articles/resources with a title and URL, view saved items, open saved URLs, and remove items. The reading list uses browser localStorage for persistent data, so saved items remain after refreshing the page. The app also includes separate loading, error, and empty states.
How can a reviewer see that the acceptance criteria are met?
Loading state: Open /?state=loading to view the loading state.
Error state: Open /?state=error to view the error message and Try Again action.
Empty state: Open /?state=empty to see the explanation of the reading list and Add your first article action.
Normal/data state: Open /, add an article with a title and URL, and verify that it appears in the reading list.
Persistent data: Refresh the page after adding an article and verify that it remains saved.
Remove items: Click Remove on a saved article to verify that it is removed.
Responsive design: Test the application on both mobile and desktop screen sizes.
Accessibility: Use keyboard Tab navigation to test the form and buttons. Visible focus states are provided.
Documentation: The README contains instructions for testing all required states without making code changes.
Repository: https://github.com/Raunakshukla90/DevConnect_FinalProject
Built for the Verified Frontend Internship · Final project
Add a comment
0/2000