Reading List Application

ReadingList

A modern, intuitive application for managing my reading collections. Track books across different reading stages, organize my reading.

Features

📚 Book Collection Management

• Organize books into three distinct categories: In Progress, Backlog, and Done
• Add books to my collection with title and author information
• Remove books from my collection when no longer needed
• Book discovery through the Open Library API integration
• Move books seamlessly between reading statuses with a single click

💻 Modern React Implementation

• Built with React, Vite, and TypeScript for optimized performance and type safety
• State management using Zustand for predictable and efficient state updates
• Component-based architecture for maintainability
• Persistent storage with localStorage to maintain my reading list between sessions

🎨 Polished User Interface

• Clean, intuitive design using shadcn/ui components
• Responsive layout that works across devices
• Clear visual hierarchy with section headers and card-based book entries

Technical Stack

• Frontend Framework: React with Vite
• Language: TypeScript
• State Management: Zustand for simplified state management
• UI Components: shadcn/ui for Cards and Buttons
• API Communication: Axios for efficient HTTP requests
• Persistence: localStorage for client-side data storage
• External API: Open Library API for book search and discovery

Project Structure

The application follows a clean, modular architecture:

• Components: UI elements including the BookList component
• Store: Zustand-powered state management for book data and actions
• Types: TypeScript definitions for robust type checking
• API: Axios service layer for communication with Open Library API
• Hooks: Custom React hooks for reusable logic

Implementation Details

The core functionality is built around a BookList component that:

• Consumes book data from a Zustand store
• Provides intuitive controls for managing reading status
• Renders books filtered by their current status
• Persists reading list to localStorage for data retention
• Integrates with Open Library API for book discovery

Each book is displayed in a card format showing:

• Book title
• Author name
• Action buttons for status management and removal
• Drag handles for list reorganization

Data Flow

1. User searches for books using the Open Library API integration
2. Selected books are added to the Zustand store
3. Books are rendered in their appropriate lists based on status
4. User interactions trigger state updates in Zustand
5. State changes are persisted to localStorage
6. UI reactively updates to reflect the current state

Future Enhancements

• Reading statistics and progress tracking
• Cloud synchronization for access across devices
• Reading time estimation
• Reading reminders and goals tracking

GOTCHAS

1. Tailwind CSS works great but had to manually create tailwind.config.js file and add the following into it

   /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
     }
   

2. Following official documentation on Shadcn works for tailwind installation but I had to go into my index.css and add the following imports in addition to everything else.-

....
@tailwind base;
@tailwind components;
@tailwind utilities;
....

concepts

• State Management Redux VS Zustand
  • zombie-child problem, react concurrency, context loss --> Zustand (simpler)
• Typescript: Interfaces OOP
• Api requesting data, processing data(filter, unique)