Build an app to log book reading habits

Here’s how you can build a simple yet functional web app to log book reading habits. This app will allow users to:

• Add new books they’re reading or have read.

• Track progress (pages or chapters read).

• Mark books as finished.

• Optionally rate or review books.

We’ll use React for the frontend and local storage for data persistence in this simple version.

App Features

• Add Book: Title, Author, Start Date, Status (Reading, Completed)

• Update Progress: Pages or % complete

• Mark as Completed

• Add Notes or Review

• Store data in localStorage

React App Code

Let’s build it as a single file React component for clarity:

jsx
CopyEdit
import React, { useState, useEffect } from 'react';

const App = () => {
  const [books, setBooks] = useState([]);
  const [form, setForm] = useState({ title: '', author: '', progress: '', status: 'Reading', review: '' });

  useEffect(() => {
    const saved = localStorage.getItem('books');
    if (saved) setBooks(JSON.parse(saved));
  }, []);

  useEffect(() => {
    localStorage.setItem('books', JSON.stringify(books));
  }, [books]);

  const addBook = () => {
    if (!form.title || !form.author) return;
    setBooks([...books, { ...form, id: Date.now() }]);
    setForm({ title: '', author: '', progress: '', status: 'Reading', review: '' });
  };

  const updateBook = (id, field, value) => {
    setBooks(books.map(book => book.id === id ? { ...book, [field]: value } : book));
  };

  const deleteBook = (id) => {
    setBooks(books.filter(book => book.id !== id));
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Book Reading Tracker</h1>

      <div className="space-y-2 mb-6">
        <input className="border p-2 w-full" placeholder="Title" value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} />
        <input className="border p-2 w-full" placeholder="Author" value={form.author} onChange={e => setForm({ ...form, author: e.target.value })} />
        <input className="border p-2 w-full" placeholder="Progress (e.g., 120 pages)" value={form.progress} onChange={e => setForm({ ...form, progress: e.target.value })} />
        <select className="border p-2 w-full" value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}>
          <option value="Reading">Reading</option>
          <option value="Completed">Completed</option>
        </select>
        <textarea className="border p-2 w-full" placeholder="Review or Notes" value={form.review} onChange={e => setForm({ ...form, review: e.target.value })} />
        <button onClick={addBook} className="bg-blue-500 text-white px-4 py-2 rounded">Add Book</button>
      </div>

      <div className="space-y-4">
        {books.map(book => (
          <div key={book.id} className="border p-4 rounded shadow-sm">
            <div className="flex justify-between items-center mb-2">
              <h2 className="text-lg font-semibold">{book.title} <span className="text-sm text-gray-500">by {book.author}</span></h2>
              <button onClick={() => deleteBook(book.id)} className="text-red-500 text-sm">Delete</button>
            </div>
            <div className="text-sm">
              <div>Status: 
                <select className="ml-2" value={book.status} onChange={e => updateBook(book.id, 'status', e.target.value)}>
                  <option value="Reading">Reading</option>
                  <option value="Completed">Completed</option>
                </select>
              </div>
              <div className="mt-2">Progress:
                <input className="ml-2 border p-1" value={book.progress} onChange={e => updateBook(book.id, 'progress', e.target.value)} />
              </div>
              <div className="mt-2">Review:
                <textarea className="border p-1 w-full mt-1" value={book.review} onChange={e => updateBook(book.id, 'review', e.target.value)} />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

How to Run

1. Set up React app:

   bash
   CopyEdit
   npx create-react-app book-tracker
   cd book-tracker
   

2. Replace App.js with the code above.

3. Install Tailwind (optional for styling) or customize with plain CSS.

4. Start the app:

   bash
   CopyEdit
   npm start
   

Future Enhancements

• User authentication for multi-user access

• Cloud storage (Firebase, Supabase)

• Graphs of reading trends

• Mobile app with React Native or Expo

• Export/Import reading logs as CSV/JSON

Let me know if you’d like backend integration, mobile support, or analytics features added.