MyReads: A Book Tracking App

MyReads is a modern, responsive bookshelf app that allows you to manage and organize books you are currently reading, want to read, or have already read. The app features Google Books API integration, user authentication, and detailed book information pages.

This project was originally built using React as part of the Udacity React Nanodegree program and has been enhanced with modern features.

---

New Features (Phase 1)

✅ Google Books API Integration - Access to millions of books with rich metadata
✅ Firebase Authentication - Sign in with Google, GitHub, or Email/Password
✅ User Accounts - Each user has their own private bookshelf
✅ Book Details Page - View comprehensive information about any book
✅ Fully Responsive Design - Works beautifully on mobile, tablet, and desktop
✅ Firestore Integration - Cloud storage for user bookshelves

---

Installation and Setup

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (v14+ recommended)
• npm (comes with Node.js)

Step 1: Clone the repository

git clone https://github.com/chrisbraycodes/myreads.git
cd myreads

Step 2: Install dependencies

npm install

Step 3: Set up Firebase (Required for authentication)

Important: You need to configure Firebase for the app to work properly. See FIREBASE_SETUP.md for detailed instructions.

Quick steps:

1. Create a Firebase project at Firebase Console
2. Enable Authentication (Email/Password, Google, GitHub)
3. Enable Firestore Database
4. Copy your Firebase config to src/firebase.js

Step 4: Start the development server

npm start

This will launch the app in your browser at http://localhost:3000.

How to Use the App

Authentication

• Sign up or sign in using Email/Password, Google, or GitHub
• Your bookshelf is private and synced to your account

Main Page

The main page displays three shelves:

• Currently Reading - Books you're actively reading
• Want to Read - Books on your reading list
• Read - Books you've completed

You can:

• Click on any book to view detailed information
• Move books between shelves using the dropdown menu
• Add new books via the search page

Search Page

• Click the "+" button in the bottom-right corner to access search
• Search for books by title, author, or ISBN using Google Books API
• Click on any book in search results to view details
• Add books directly to your shelves from search results

Book Details Page

• View comprehensive book information including:
  • Full description
  • Publication date, page count, language
  • Categories/genres
  • Ratings and reviews
  • Links to preview and purchase

Project Structure

myreads/
├── public/
├── src/
│   ├── components/
│   │   ├── Auth.js          # Authentication component
│   │   ├── Auth.css
│   │   ├── BookDetails.js   # Book details page
│   │   └── BookDetails.css
│   ├── App.js               # Main App component with routing
│   ├── MainPage.js          # Main page showing bookshelves
│   ├── SearchPage.js        # Search page for finding books
│   ├── Bookshelf.js         # Bookshelf component
│   ├── BooksAPI.js          # Google Books API integration
│   ├── firebase.js          # Firebase configuration
│   ├── index.css            # Global CSS styles
│   ├── App.css              # Component-specific styles
│   └── index.js             # React entry point
├── FIREBASE_SETUP.md        # Firebase setup instructions
└── README.md

Features

✅ Search millions of books using Google Books API
✅ User authentication with Firebase (Google, GitHub, Email)
✅ Per-user bookshelf storage in Firestore
✅ Book details page with comprehensive information
✅ Fully responsive design (mobile, tablet, desktop)
✅ Click books to view details
✅ Persistent bookshelf across devices
✅ Smooth navigation with React Router

Technology Stack

• React 17+ - UI framework
• React Router - Navigation
• Firebase - Authentication & Firestore database
• Google Books API - Book search and metadata
• CSS3 - Responsive styling

Future Improvements (Phase 2+)

• Custom shelves (beyond the 3 default ones)
• Reading progress tracking
• Reading statistics dashboard
• Book reviews and ratings
• Social features (see friends' bookshelves)
• Reading challenges and groups
• Book recommendations
• Notes and highlights
• Import/Export functionality Contributing Feel free to fork the repository and submit a pull request with any improvements or bug fixes.

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

Acknowledgments Udacity React Nanodegree React