0
showcase
Shipped: Personal reading list
1. What did I build?
I built a Personal Reading List web application using Next.js, React, TypeScript, and Tailwind CSS as part of DevConnect Internship - Brief C.
Users can browse books, view detailed book information, and manage their personal reading lists by adding and removing books. I focused on creating a responsive, user-friendly interface with clear loading, error, and empty states.
2. How can a reviewer verify the acceptance criteria?
The reviewer can use the live application and repository to check the following:
Book browsing: Open the Books page and select a book to view its details.
Adding and removing books: Add a book to the reading list, then remove it and verify that the list updates.
Empty state: Open an empty reading list and verify that it explains the feature and offers a clear first action.
Loading state: Observe the loading indicator while the application retrieves data.
Error state: Simulate a data-loading failure, if a supported method is available, and verify that the error message explains the problem and offers a recovery action.
Accessibility: Navigate the application using the keyboard and verify that interactive elements have visible focus indicators.
Responsive layout: Test the application at a viewport width of 320px.
Documentation: Review the README for setup instructions, keyboard navigation guidance, and instructions for demonstrating the required states.
Repository: https://github.com/humaeidmansur/personal-reading-list-book-vibe
Live: https://humaeidmansur-personal-reading-list-gamma.vercel.app/
Built for the Verified Frontend Internship · state and data
Add a comment
0/2000