BookMind AI - AI-Powered Online Bookstore

A modern, responsive eCommerce bookstore application built with React.js, featuring AI-inspired user experiences, premium 2025 SaaS aesthetic, and comprehensive shopping functionality.

🚀 Project Overview

BookMind AI is a production-quality front-end application developed as an Applied AI Specialist capstone project. It demonstrates modern web development practices, responsive design, glassmorphism UI, and AI-enhanced user experiences for an online bookstore specializing in technology, AI, and professional development books.

✨ Key Features

Core User Flows

Authentication: Login/Signup with form validation and smooth transitions
Home Page: Premium hero section with AI recommendation widget, featured books
Product Catalogue: Advanced filtering, sorting, search with dark theme
Product Details: Comprehensive book information with related recommendations
Shopping Cart: Quantity management, price calculations, savings display
Checkout: Multi-step process (Shipping → Payment → Review) with glassmorphism cards
Order History: View past orders with "Buy Again" functionality
Order Confirmation: Beautiful confirmation page with order details

AI-Differentiated Features

✨ AI-Powered Recommendations: Personalized book suggestions with match percentages
🔍 Smart Search Assistant: Intelligent search with natural language
🤖 AI Pick Badges: Highlighted AI-recommended books
📊 Dynamic Recommendations: "Customers also bought" suggestions
🚚 AI-Estimated Delivery: Smart delivery time predictions
💡 Personalized Order History: Context-aware recommendations
🎯 AI Recommendation Widget: Real-time book suggestions on home page

Modern UI Features

🎨 2025 Premium SaaS Aesthetic: Dark theme with glassmorphism effects
✨ Premium Gradient Background: Multi-layer radial gradients with glow effects
🔮 Glassmorphism Design: Frosted glass cards with backdrop blur
🌊 Smooth Animations: Fade-ins, hover effects, scale transforms
📱 Mobile-First Responsive: Optimized for all screen sizes
🎭 Interactive Elements: Hover states, focus rings, smooth transitions
📜 Scroll Restoration: Automatic scroll to top on navigation and mode changes
📧 Newsletter Subscription: Functional email subscription with validation

🛠️ Tech Stack

React.js (v18.2.0) - UI library with hooks
Vite (v5.0.8) - Modern build tool and dev server
React Router DOM (v6.20.0) - Client-side routing with scroll restoration
Context API - Global state management
Local Storage - Data persistence for cart, orders, and subscriptions
CSS3 - Modern styling with custom properties, glassmorphism, gradients
HTML5 - Semantic markup with accessibility

📁 Project Structure

bookstore-capstone/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── common/
│   │   │   ├── Button.jsx/css          # Premium button with variants
│   │   │   ├── BookCard.jsx/css        # Glassmorphism book cards
│   │   │   ├── Input.jsx/css           # Dark theme form inputs
│   │   │   ├── Loading.jsx/css         # Loading spinner
│   │   │   ├── Notification.jsx/css    # Toast notifications
│   │   │   └── ScrollToTop.jsx         # Scroll restoration utility
│   │   └── layout/
│   │       ├── Navbar.jsx/css          # Glassmorphism navbar
│   │       └── Footer.jsx/css          # Footer with newsletter
│   ├── context/
│   │   └── AppContext.jsx              # Global state management
│   ├── data/
│   │   └── booksData.jsx               # 32 curated books
│   ├── pages/
│   │   ├── Home.jsx/css                # Hero + AI widget
│   │   ├── Catalogue.jsx/css           # Book grid with filters
│   │   ├── BookDetails.jsx/css         # Product details
│   │   ├── Cart.jsx/css                # Shopping cart
│   │   ├── Checkout.jsx/css            # Multi-step checkout
│   │   ├── Orders.jsx/css              # Order history
│   │   ├── Login.jsx/css               # Auth with dark theme
│   │   ├── Categories.jsx/css          # Category browsing
│   │   └── OrderConfirmation.jsx/css   # Order success
│   ├── App.jsx                         # Main app component
│   ├── index.jsx                       # Entry point
│   └── index.css                       # Global styles + gradient bg
├── vite.config.js
├── package.json
└── README.md

🎨 Design System

Color Palette (2025 Dark Theme)

Background: Multi-layer gradient (#020617 → #0B1120 → #111827)
Glow Effects: Indigo (#6366F1), Purple (#A855F7) radial gradients
Glass Cards: rgba(255, 255, 255, 0.05) with 24px blur
Primary: Indigo (#6366F1 → #4F46E5)
Accent: Purple (#A855F7), Cyan (#06B6D4), Amber (#F59E0B)
Semantic: Success (#10B981), Warning (#F59E0B), Error (#EF4444)
Text: White (#FFFFFF), Gray-300 (#D1D5DB), Gray-400 (#9CA3AF)

Typography

Font Family: Inter, system-ui, -apple-system, sans-serif
Headings: Bold (600-700), hierarchical sizing (2rem - 3rem)
Body: Regular (400), 1rem with 1.6 line-height
Premium: Letter-spacing adjustments for elegance

Visual Effects

Glassmorphism: backdrop-filter: blur(24px) with semi-transparent backgrounds
Gradients: Linear and radial gradients for depth
Shadows: Multi-layer box-shadows for elevation
Hover States: Scale transforms, glow effects, color transitions
Animations: Smooth 0.3s ease transitions

Components

Reusable button variants (primary, secondary, outline, ghost)
Glassmorphism cards with hover effects
Dark theme form inputs with focus states
Loading spinners with gradient animation
Toast notifications with auto-dismiss
Scroll restoration on navigation

📚 Mock Data

The application includes 32 carefully curated books covering:

AI & Machine Learning
Software Engineering
System Design & Architecture
Data Science & Analytics
Tech Leadership & Management
Cloud Computing & DevOps
Cybersecurity
Product Engineering

Each book includes:

Title, author, category
Pricing with discounts (up to 40% off)
Ratings (4.0-5.0) and review counts
Detailed descriptions
ISBN, pages, publisher info
Tags and delivery estimates
AI recommendation scores
High-quality placeholder images

🚀 Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn

Installation

Clone the repository:

git clone <repository-url>
cd bookstore-capstone

Install dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:5173 in your browser

Build for Production

npm run build

The optimized build will be in the dist/ folder.

Preview Production Build

npm run preview

💡 Usage Guide

Demo Mode

The application runs in demo mode with simulated backend:

Login: Use any email and password (min 6 characters)
Data Persistence: Uses localStorage for cart, orders, subscriptions
Mock Checkout: Simulates payment processing with 2-second delay
Newsletter: Stores subscriptions locally with duplicate detection

Key User Journeys

Browse & Discover
- Explore featured books on home page
- View AI recommendation widget with match percentages
- Use smart search assistant
- Filter by category, author, price range
- Sort by popularity, price, rating, newest
Shopping
- Add books to cart from any page
- Adjust quantities in cart
- View savings and totals
- Remove items
- Proceed to checkout
Checkout
- Enter shipping information (validated)
- Select payment method (Credit/Debit/UPI/COD)
- Review order summary
- Confirm and place order
- Receive order confirmation
Order Management
- View complete order history
- See order details and status
- Use "Buy Again" for quick reorder
- Get personalized recommendations
Account
- Login/Signup with validation
- Session persistence
- Smooth mode switching (login ↔ signup)
- Auto-scroll on mode change

🎯 Features Implemented

Mandatory User Flows ✅

AI Features ✅

Smart recommendation widget with real books
AI search assistant input
Dynamic recommendation badges
"Customers also bought" suggestions
AI-estimated delivery labels
Personalized order history recommendations
AI match percentage display

Quality Features ✅

Modern UI Features ✅

📱 Responsive Design

The application is fully responsive across:

Desktop: 1024px and above (multi-column layouts)
Tablet: 768px - 1023px (2-column grids)
Mobile: 320px - 767px (single column, touch-optimized)

Features:

Mobile-first CSS approach
Collapsible hamburger navigation menu
Touch-friendly button sizes (min 44px)
Optimized layouts for all screen sizes
Responsive images and cards
Adaptive typography scaling

🔒 State Management

Uses React Context API for:

User authentication state
Shopping cart management (add, remove, update quantity)
Order history tracking
UI notifications (success, error, info)
Loading states
Newsletter subscriptions

Data persists in localStorage:

User session (isAuthenticated, user info)
Cart items (books, quantities)
Order history (all past orders)
Newsletter subscriptions (email list)

🎨 UI/UX Highlights

Modern Design: 2025 premium SaaS aesthetic with dark theme
Glassmorphism: Frosted glass effect on cards and navbar
Premium Gradients: Multi-layer background with radial glows
Smooth Animations: Fade-ins, scale transforms, hover effects
Visual Feedback: Loading spinners, success messages, error states
Intuitive Navigation: Clear hierarchy and flow
Premium Feel: Elegant spacing, shadows, rounded corners
Accessibility: Semantic HTML, ARIA labels, keyboard navigation
Scroll Restoration: Auto-scroll to top on page/mode changes
Interactive Elements: Hover states, focus rings, active states

🧪 Testing Recommendations

Manual Testing Checklist

Browser Compatibility

Chrome/Edge (Chromium) ✅
Firefox ✅
Safari ✅
Mobile browsers ✅

🚧 Future Enhancements

Backend API integration with Node.js/Express
Real payment gateway (Stripe/Razorpay)
User reviews and ratings system
Wishlist functionality
Advanced search with AI-powered suggestions
Email notifications for orders
Social sharing features
Multi-language support (i18n)
Real-time inventory updates
User profile management
Book preview/sample chapters
Reading lists and collections

📊 Performance Optimizations

Vite for fast builds and HMR
Code splitting with React.lazy
Optimized images and assets
CSS custom properties for theming
Efficient re-renders with React.memo
localStorage for instant data access
Smooth 60fps animations

📄 License

This project is created for educational purposes as part of an Applied AI Specialist capstone project.

👨‍💻 Author

Applied AI Specialist Capstone Project - 2026

🙏 Acknowledgments

React.js community for excellent documentation
Modern SaaS design inspiration from Vercel, Linear, and Stripe
Glassmorphism design trend
AI/ML book recommendations based on industry standards
Open-source community for tools and libraries

📝 Recent Updates

Version 2.0 - Modern UI Overhaul (May 2026)

✨ Complete UI redesign with 2025 premium SaaS aesthetic
🎨 Dark theme with glassmorphism effects
🌈 Premium gradient background with radial glows
🔮 Frosted glass cards throughout the app
📜 Scroll restoration on navigation and mode changes
📧 Functional newsletter subscription
🎯 AI recommendation widget on home page
🎭 Enhanced hover effects and animations
📱 Improved mobile responsiveness
🐛 Bug fixes for input styling and dropdown themes

Note: This is a front-end demonstration project with simulated backend functionality. All data is stored locally in browser localStorage and will persist until cache is cleared. The application showcases modern React development practices, premium UI design, and AI-enhanced user experiences suitable for a capstone project portfolio.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
AI_DEVELOPMENT_PROCESS.md		AI_DEVELOPMENT_PROCESS.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation