personal_bookself

This is a React application allowing users to search for books using the Open Library API and maintain a personal bookshelf in the browser using localStorage.

Project demonstration Link :

https://drive.google.com/file/d/1rqnVCLIAa41XXegSvWOUQRGNfBv80HNg/view?usp=drive_link

Features:

• Book Search: Users can search for books using the Open Library API.

• Real-time Results: Search results are displayed in real-time as the user types.

• Add to Bookshelf: Users can add books from the search results to their personal bookshelf.

• Delete from Bookshelf: Users can remove books from their personal bookshelf.

• LocalStorage: The user's bookshelf is stored persistently in the browser using localStorage.

• Separate Pages: The application consists of separate pages for book search and the personal bookshelf.

• Efficient API Usage: Utilizes the Open Library API efficiently for fetching book search results.

• Proper React Component Structure: Maintains a proper React component structure and interactivity.

• User-Friendly Interface: Provides a smooth user experience with an intuitive interface.

• Styling Options: Offers flexibility in styling using CSS-in-JS, CSS modules, or regular CSS classnames.

• Responsiveness: The application is responsive and works well on various screen sizes and devices.

With these features, users can easily search for books, add them to their personal bookshelf, remove books as needed, and manage their reading list conveniently within the browser, on any device.

Installation

To install the project locally, follow these steps:

1. Clone the repository to your local machine:

git clone https://github.com/menavipandey/Personal_Bookself.git

2. Navigate to the project directory:

cd personal_bookshelf

3. Install dependencies using npm:

npm install

After setting up the project, start the development server:

npm start

Open your web browser and navigate to http://localhost:3000/.

Usage

• Use the search functionality to find books using the Open Library API.
• Click the "Add to Bookshelf" button to add books to your personal bookshelf.
• Navigate to the "My Bookshelf" page to view the books you have added.

Tech Stack

• React
• React Router
• localStorage
• CSS (Grid for styling)

credit

This project is based on a task provided as part of a frontend development challenge.

---