Book Shelf is a React-based CRUD application designed to be your personal digital library. With this app, you can search for books, categorize them, take notes, and archive them. Built with local storage and integrated with the Google Books API, it offers a seamless book search experience.
Table of Contents
- Search for Books: Easily find any book using the integrated Google Books API.
- Categorize Books: Organize your collection into four categories:
- Current Reading: Track books you're currently reading and add notes.
- Favorites: Keep a list of your top reads.
- To Read: Plan your future reading list.
- Have Read: Archive books you've completed.
- Archive Books: Move books to an archived state to restrict further activities until they are unarchived.
- My Notes Page: Access all notes, including those from archived books.
- Editable & Deletable: Modify or remove notes from Current Reading books.
- Archived Notes: Notes on archived books are read-only and cannot be deleted.
- Warning System: Get alerts when attempting to delete books with existing notes for added confirmation.
- Conditional Archiving: Only books with no notes can be archived, ensuring users are aware of their reading history.
- Seamless Navigation: Effortlessly switch between the Home, My Books, and My Notes pages for an enhanced reading experience.
VisualPreview.1.mp4
VisualPreview.2.mp4
- React: The core framework powering the user interface.
- SCSS: For stylish and maintainable CSS styling.
- react-router-dom: Enables smooth navigation between different pages.
- framer-motion: Adds fluid animations for a polished user experience.
- react-hot-toast: Provides clean and customizable notifications.
- sweetalert2: Enhances interactivity with pop-up alerts and confirmations.
To run locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Khus07hi/ReadStack-PersonalBookshelf.git
-
Navigate to the project directory:
cd ReadStack-PersonalBookshelf -
Install dependencies:
npm install
-
Start the application:
npm start