Book Explorer – Assignment -First 📚 Book Explorer A modern, responsive web application for discovering and managing your favorite books. Built with Next.js, TypeScript, and styled with Tailwind CSS. Show Image ✨ Features
🔍 Smart Search: Search books by title, author, or genre 📋 Personal Reading List: Add and manage books in your "to-read" collection 🎨 Beautiful UI: Modern design with purple gradient themes and smooth animations 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices ⚡ Fast Performance: Built with Next.js for optimal loading speeds 🔄 Real-time Updates: Dynamic state management with Zustand 🌐 API Integration: Fetches book data from external API with fallback support
🚀 Demo Experience the live application: Book Explorer Demo 🛠️ Tech Stack
Frontend Framework: Next.js 14 with App Router Language: TypeScript Styling: Tailwind CSS State Management: Zustand Fonts: Geist Sans & Geist Mono Icons: Emoji-based icons for visual appeal Images: Unsplash integration for book covers
📦 Installation Clone the repository bashgit clone https://github.com/your-username/book-explorer.git cd book-explorer
Install dependencies bashnpm install
yarn install
pnpm install
Run the development server bashnpm run dev
yarn dev
pnpm dev
Open your browser Navigate to http://localhost:3000 to see the application.
🏗️ Project Structure book-explorer/ ├── app/ │ ├── globals.css # Global styles and Tailwind imports │ ├── layout.tsx # Root layout component │ └── page.tsx # Home page with book grid ├── components/ │ └── BookCard.tsx # Individual book card component ├── store/ │ └── bookStore.ts # Zustand state management └── README.md 🎯 Key Components BookCard Component
Displays book information with cover, title, author, genre, and year Interactive buttons for viewing details and managing reading list Hover effects and smooth transitions Fallback image handling
Book Store (Zustand) Global state management for books and reading list Functions for adding/removing books from reading list TypeScript interfaces for type safety
Main Page Book grid layout with responsive design Search functionality across multiple fields API integration with fallback data Loading states and error handling
🌐 API Integration The application integrates with the Zain Training API:
Endpoint: https://zain-training.vercel.app/api/books Fallback: Pre-defined collection of classic books Error Handling: Graceful fallback when API is unavailable Data Transformation: Flexible handling of different API response formats
🎨 Design Features Purple Gradient Theme: Consistent purple/violet/indigo color scheme Modern UI Elements: Rounded corners, shadows, and hover effects Responsive Grid: Adapts from 1 to 4 columns based on screen size Search Interface: Prominent search bar with clear functionality Interactive Cards: Hover animations and state-based styling Loading States: Smooth loading animations and status messages
📱 Responsive Design
Mobile First: Optimized for mobile devices Breakpoints:
Mobile: 1 column grid Tablet (md): 2 columns Desktop (lg): 3 columns Large Desktop (xl): 4 columns
🔧 Available Scripts bash# Development server npm run dev
npm run build
npm run start
npm run lint
🌟 Future Enhancements User authentication and personal accounts Book reviews and ratings system Advanced filtering (by year, genre, rating) Dark mode toggle Book recommendations based on reading history Integration with more book APIs Reading progress tracking Social features (share lists, follow users)
🤝 Contributing Fork the repository Create your feature branch (git checkout -b feature/AmazingFeature) Commit your changes (git commit -m 'Add some AmazingFeature') Push to the branch (git push origin feature/AmazingFeature) Open a Pull Request
📄 License This project is licensed under the MIT License - see the LICENSE file for details.
👤 Developer Huda Ghazi Email: hudaghazi520@gmail.com
🙏 Acknowledgments Next.js for the amazing React framework Tailwind CSS for the utility-first CSS framework Zustand for simple state management Unsplash for beautiful book cover images Zain Training API for book data