ShelfWise

A platform to catalog your personal book collection, track reading progress, and discover new titles, built with React, TypeScript and Django REST Framework.

Table of Contents

• Description
• Live Demo
• Features
• Tech Stack
• Screenshots
• Getting Started
• Attribution
• Contact

Description

Shelfwise is a full-stack web application that allows users to discover, track, and organize their reading journey. Built with React and Django, ShelfWise integrates with Google Books API to provide comprehensive book information and reading progress tracking.

The application features a clean, responsive interface built with React and Tailwind CSS, backed by a robust Django REST API with JWT authentication and Redis caching for optimal performance.

Live Demo

The application is deployed and publicly accessible:

• Frontend (Vercel): https://shelfwise-library.vercel.app
• Backend (Render): https://shelfwise-be3f.onrender.com
• Database (Neon): PostgreSQL database hosted on Neon
• Caching (Redis Cloud): Redis caching database for improved performance

Note: The backend is hosted on a free Render instance, so the initial server response might be slow as the instance "wakes up" from a sleep state.

Features

• User Authentication: Secure registration, login, and JWT-based authentication
• Book Discovery: Search and explore books using Google Books API
• Personal Library: Add books to your personal collection
• Reading Progress: Track reading status (Plan to Read, Reading, Finished)
• Progress Tracking: Monitor page progress for books you're currently reading.

Tech Stack

The project is built with React and Django and other modern technologies:

• Frontend: React, TypeScript, Tailwind CSS
• Backend: Django, Django REST Framework
• Database: PostgreSQL, Redis
• Authentication: JWT
• APIs: Google Books API
• Key Libraries:
  • axios: For making API requests
  • framer-motion: For UI animations
  • shadcn/ui: For UI components
  • zod: For schema validation

Screenshots

Home Page

Discover and search for books with a clean, intuitive interface.

Explore Page

Discover books by genre.

Book Search

Search through millions of books using Google Books API integration.

Personal Library

Manage your personal book collection with reading status tracking.

Book Details

Detailed book information with options to add to library and track progress.

Reading Progress Tracking

Track your reading progress with status updates (Plan to Read, Reading, Finished).

Login Page

Secure user authentication with JWT tokens.

Sign Up Page

Easy registration process for new users.

Getting Started

Follow these instructions to set up and run the project locally.

Prerequisites

• Node.js (v18 or later)
• Python (v3.8 or later)
• PostgreSQL (v12 or later)
• Redis (for caching)
• Git

1. Clone the Repository

git clone https://github.com/JoyM268/Shelfwise.git
cd shelfwise

2. Backend Setup

Navigate to the server directory:

cd server

Create and activate a virtual environment:

# Windows
python -m venv env
env\Scripts\activate

# macOS/Linux
python -m venv env
source env/bin/activate

Install dependencies:

pip install -r requirements.txt

Create a .env file in the server directory:

SECRET_KEY="your-secret-key-here"
GOOGLE_API_KEY="your-google-books-api-key"
ALLOWED_HOSTS="127.0.0.1,localhost"
ALLOWED_ORIGINS="http://localhost:5173"
CSRF_TRUSTED_ORIGINS="http://localhost:5173"
DATABASE_URL="postgresql://user:password@localhost:5432/shelfwise"
REDIS_URL="redis://localhost:6379"

Note: For local development, you can use PostgreSQL or SQLite. To use SQLite for development, you can temporarily modify the DATABASES setting in settings.py to use the commented SQLite configuration.

Run database migrations:

python manage.py makemigrations
python manage.py migrate

Start the development server:

python manage.py runserver

The backend will be available at http://127.0.0.1:8000

3. Frontend Setup

In a new terminal, navigate to the client directory:

cd client

Install dependencies:

npm install

Create a .env file in the client directory:

VITE_SERVER_URL="http://127.0.0.1:8000"

Start the development server:

npm run dev

The frontend will be available at http://localhost:5173

Attribution

This project uses the Google Books API to provide comprehensive book information and search functionality.

• Google Books API: https://developers.google.com/books

Contact

For any questions or suggestions, please reach out to [email protected].