Skip to content

README.md

Latest commit

 

History

History
87 lines (67 loc) · 2.94 KB

README.md

File metadata and controls

87 lines (67 loc) · 2.94 KB
Raw

📚 Book Inventory Manager

A modern, responsive web application built with React and Tailwind CSS to manage a digital library. This application allows users to add, edit, delete, and search for books in real-time, featuring a clean UI with modal confirmations and strict data validation.

📸 Screenshots

Dashboard (Home) Book Details
Home Page Details Page

✨ Features

  • ☁️ Cloud Database: Uses MockAPI.io, so you don't need to run a local backend server.
  • 📖 Full CRUD System: Create, Read, Update, and Delete books seamlessly.
  • 🔍 Real-time Search: Instantly filter books by Title, Author, or Publisher as you type.
  • 🛡️ Smart Validation:
    • Prevents negative numbers or decimals in Age.
    • Enforces strict Email formatting.
    • Live error messages for invalid inputs.
  • 🖼️ Image Previews: Paste an image URL and see a live preview before saving.
  • 🔔 Interactive UI:
    • Custom Modal Popups for safe deletion.
    • Toast Notifications for success/error messages.
    • Split-screen Details Page for a professional reading view.
  • 📱 Fully Responsive: Looks great on mobile, tablet, and desktop.

🛠️ Tech Stack

  • Frontend: React.js (Vite)
  • Styling: Tailwind CSS
  • Routing: React Router DOM
  • HTTP Client: Axios
  • Backend: JSON Server (Mock REST API)

🚀 Getting Started

Follow these steps to get the project running on your local machine.

1. Clone the Repository

git clone [https://github.com/your-username/book-inventory.git](https://github.com/your-username/book-inventory.git)
cd book-inventory

2.Install Dependencies

First, download all the required libraries (like React and Tailwind) listed in the package.json file.

npm install

3. Start the application

npm run dev

📂 Project Structure

src/
├── components/
│   ├── BookForm.jsx        # Form with strict validation & live preview
│   ├── BookTable.jsx       # Main inventory list with badges
│   ├── Navbar.jsx          # Responsive navigation bar
│   └── Notification.jsx    # Toast popup for alerts
├── pages/
│   ├── BookDetails.jsx     # Detailed split-screen view
│   └── Home.jsx            # Dashboard logic (Search + Table)
├── services/
│   └── api.js              # Centralized Axios API calls
├── App.jsx                 # Routing configuration
└── main.jsx                # App entry point

📝 Learning Highlights

This project was built to master:

  • Connecting a React app to a remote REST API.
  • React Hooks (useState, useEffect, useParams).
  • Managing complex state (Modals, Search Filters, Forms).
  • Building reusable components.
  • Handling asynchronous API calls with Axios.

📄 License

This project is open source and available under the MIT License.