Readify

Readify is a full-stack web application built with React and Node.js server that enables users to manage, visualize, and track their personal book collections. The application provides interactive bookshelves, persistent user data management, and book discovery features powered by the OpenLibrary API.

---

▶️ Preview

readify.mp4

🌟 Features

• Create and manage custom bookshelves.
• Discover and search books via the OpenLibrary API.
• Add books directly to your library.
• Drag and drop books between shelves.
• Create, rename, and delete bookshelves.
• Track reading status, progress, and ratings.
• Search books and bookshelves.
• View detailed book and author information.
• Persist library data with a Node.js backend.

📂 Project Structure

app/
├── docs/
│   ├── design.png            - Figma design
│   ├── wireframe.png         - Excalidraw wireframe
│   └── use-case.svg          - Use case diagram
│
├── resources/                - Documentation resources
│   ├── screens/              - UI screenshots
│   └── readify.png           - Application logo
│
├── src/
│   ├── api/                  - API communication
│   ├── assets/               - Static assets
│   ├── components/           - Reusable UI components (24 components)
│   ├── context/              - State management contexts (5 contexts)
│   ├── hooks/                - Custom React hooks (3 hooks)
│   ├── pages/                - Page components (7 pages)
│   ├── services/             - Business logic services (5 services)
│   ├── app.css               - Global styles
│   ├── App.jsx               - Root component
│   └── main.jsx              - App entry point
│
├── package.json              - Project dependencies and metadata
├── package-lock.json         - Locked dependency versions
├── vite.config.js            - Vite build configuration
├── eslint.config.js          - ESLint rules configuration
├── index.html                - Main HTML entry point
├── Dockerfile                - Docker container setup
├── docker-compose.yml        - Docker compose configuration
├── README.md                 - Project documentation
└── LICENSE                   - License file

---

🛠 Requirements

⚙️ System Requirements

• Node.js (v16 or higher)
• npm or yarn package manager
• Modern web browser (Chrome, Firefox, Safari, Edge)
• Docker and Docker Compose (optional, for containerized setup)

📦 Dependencies

• React (v19.1.1) – UI library
• React DOM (v19.1.1) – React rendering for web
• React Router DOM (v7.9.5) – Client-side routing
• Vite (v7.1.7) - Build tool and dev server
• Axios (v1.13.1) - HTTP client for API calls
• Tailwind CSS (v4.1.16) - Styling framework
• DnD Kit (v6.3.1) - Drag and drop library
• Lucide React (v0.552.0) - Icon library

🔗 External APIs

• OpenLibrary API - For book discovery and metadata

🗄️ Backend Requirements

• Node.js server for data persistence
• MySQL Database support

---

⚙ Instalation & Setup

🖥️ Local Setup

1. Clone the repository

git clone git@github.com:ppatrik-dev/readify.git && cd readify

2. Install dependencies

npm install

or

yarn install

3. Start development server

npm run dev

4. Open application

http://localhost:8080

---

🐳 Docker Setup (Recommended)

Run with Docker Compose

docker compose up --build

---

💻 User Interface

🏠 Home Page

The Home screen includes sections for recommended books, continue reading, trending titles, and unfinished books, helping users easily navigate their reading activity.

---

📚 Library Page

The Library screen allows users to manage their personal shelves, including searching for shelves and organizing books via drag-and-drop between shelves.

---

📖 Shelf Page

This screen displays a specific shelf from the user’s library and supports searching books within the shelf, showing reading progress and book status.

---

🔍 Book Search

This screen provides a real-time search interface and displays books that are already added to the user’s library, allowing users to quickly find and manage their existing collection.

---

🗂️ Book Category

This screen contains predefined book categories that allow users to filter and automatically search books based on the selected category, making it easier to browse books by specific interests.

---

📘 Book Detail

The Book Detail screen provides comprehensive information about the selected book and its author, including reading progress, reading status, and star rating.

---

📄 Documentation

This project uses JSDoc annotations to improve code readability, maintainability, and IDE support.

During the development process, the following artifacts were created in sequence:

• Use Case diagram – Shows the main system interactions between users and the application.
• Wireframe – Low-fidelity layout illustrating the structure of the application screens.
• Design – Final UI design showcasing the visual style and component structure.

---

🧪 Testing

This project does not include automated tests. All functionality was verified through manual testing during development.

Manual testing focused on:

• Core user flows (creating and managing bookshelves)
• Drag and drop interactions between shelves
• Book search and addition via OpenLibrary API
• Updating reading status, progress, and ratings
• UI responsiveness and component behavior across views

📜 License

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