📚 Book Tracker

A modern, personalized book recommendation and reading tracker app built with Next.js 15, Redux Toolkit, and Tailwind CSS.

✨ Features

📖 Book Management

• Personal Library: Add books to "Want to Read", "Currently Reading", or "Completed" lists
• Favorites: Mark books as favorites with visual indicators
• Ratings: Rate books 1-5 stars to improve recommendations
• Progress Tracking: Track reading progress by page number with visual progress bars
• Target Dates: Set reading goals with target completion dates

🔍 Discovery

• Google Books Integration: Search and discover books using Google Books API
• Smart Search: Find books by title, author, or genre
• Book Details: Rich book information including descriptions, ratings, and cover images

🎯 Reading Goals

• Daily/Weekly Goals: Set customizable reading goals (pages per day/week)
• Progress Tracking: Visual progress indicators and achievement system
• Reading Streaks: Track consecutive days of reading
• Statistics: View reading statistics and achievements

📝 Notes & Reviews

• Personal Notes: Add notes and thoughts for each book
• Rich Text: Simple note-taking with timestamps
• Book Reviews: Write and manage book reviews

🎨 User Experience

• Dark/Light Mode: Toggle between themes with system preference detection
• Responsive Design: Optimized for mobile and desktop
• Smooth Animations: Framer Motion animations for enhanced UX
• Modern UI: Clean, modern interface with Tailwind CSS

💾 Data Persistence

• Local Storage: All data persisted locally using Redux Persist
• Cross-Device Sync: Data syncs across browser sessions
• Import/Export: Easy data management and backup

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd book-tracker

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production and format code
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS v4 - Utility-first CSS framework
• Framer Motion - Animation library

State Management

• Redux Toolkit - Predictable state container
• Redux Persist - State persistence
• React Redux - React bindings

UI Components

• Radix UI - Accessible component primitives
• Lucide React - Beautiful icons
• Classnames - Conditional CSS classes

Data & APIs

• Google Books API - Book data and search
• Local Storage - Data persistence

Development

• ESLint - Code linting
• Prettier - Code formatting (120 character width)
• Turbopack - Fast bundling

📱 Usage

Adding Books

1. Go to Discover page
2. Search for books using the search bar
3. Click on a book to view details
4. Use the action buttons to add to your library:
   • Want to Read - Add to reading list
   • Start Reading - Mark as currently reading
   • Completed - Mark as finished
   • Favorite - Add to favorites

Tracking Progress

1. Open a book from your Library
2. Use the progress tracker to update current page
3. Set target completion date
4. View progress bar in library view

Setting Goals

1. Go to Goals page
2. Set daily and weekly page goals
3. Log pages read to track progress
4. View achievements and statistics

Taking Notes

1. Open any book from your library
2. Add personal notes and thoughts
3. Notes are automatically timestamped
4. Edit or delete notes as needed

🎨 Customization

Themes

• Toggle between light and dark modes using the theme button
• System preference detection for automatic theme switching
• Custom CSS variables for easy theme customization

Styling

• Built with Tailwind CSS for easy customization
• Responsive design patterns
• Custom component library in src/components/ui/

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── (routes)/          # Route groups
│   │   ├── book/[id]/     # Book detail pages
│   │   ├── discover/      # Book discovery
│   │   ├── goals/         # Reading goals
│   │   └── library/       # Personal library
│   ├── globals.css        # Global styles
│   └── layout.tsx         # Root layout
├── components/            # Reusable components
│   ├── ui/               # UI primitives
│   ├── BookCard.tsx      # Book display component
│   ├── NavBar.tsx        # Navigation
│   └── ThemeToggle.tsx   # Theme switcher
├── lib/                  # Utilities and configuration
│   ├── providers/        # React providers
│   ├── store/           # Redux store and slices
│   └── utils/           # Helper functions
└── hooks/               # Custom React hooks

🔧 Configuration

Environment Variables

Create a .env.local file for environment-specific configuration:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

Google Books API

The app uses Google Books API for book data. No API key required for basic usage.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Books API for book data
• Next.js for the amazing React framework
• Tailwind CSS for the utility-first CSS
• Redux Toolkit for state management
• Framer Motion for animations

---

Happy Reading! 📚✨