Library E-Store

A React-based e-commerce storefront for books, featuring a landing page, browsable/sortable catalog, individual book detail pages, and a fully functional shopping cart with quantity management and live tax/subtotal calculation.

Live demo: https://library-react-project-seven-ebon.vercel.app Repo: https://github.com/brenthippler-art/Library-E-Store

---

Features

• Landing page with highlights, featured titles, and a discounted-books section
• Book catalog with client-side sorting (price low→high, price high→low, rating)
• Book detail pages with dynamic routing per title (/books/:id)
• Shopping cart with:
  • Add/remove items
  • Editable quantity per line item
  • Automatic subtotal, tax, and total calculation
  • Empty-cart state with a call-to-action back to the catalog
• Responsive mobile navigation with a slide-out menu and live cart item count badge
• Lazy-loaded book images with skeleton loading placeholders for a smoother perceived load
• Per-page document titles via react-helmet for better SEO/tab context

Tech Stack

• React 18 (Create React App)
• React Router v5 for client-side routing
• React Helmet for per-page <title> management
• Font Awesome for icons
• Vanilla CSS (BEM-style naming)

Running Locally

git clone https://github.com/brenthippler-art/Library-E-Store.git
cd Library-E-Store
npm install
npm start

Runs at http://localhost:3000 in development mode with hot reload.

npm run build

Builds an optimized, minified production bundle to the build folder.

Project Structure

src/
├── components/       # Shared/layout components (Nav, Footer, home sections)
│   └── ui/           # Small reusable UI pieces (Book card, Rating, Price)
├── pages/            # Route-level pages (Home, Books, BookInfo, Cart)
├── data.js           # Sample book catalog data
└── App.js            # Route definitions and cart state management

Known Limitations

• Book data is static/local (data.js) rather than pulled from a live API or database.
• Checkout is a placeholder — cart totals calculate correctly, but there's no real payment flow behind the "Proceed to checkout" button, since this project's focus is the storefront browsing/cart UX rather than a payment integration.

Author

Brenton Hippler Frontend Developer | brentoncodes.dev 📧 brenton@brentoncodes.dev

License

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