teal-tracker

Introduction

The teal-tracker is a personalized book tracking application designed for individual users. It allows users to log the books they have read, rate them, and add personal notes or reviews. This tool is ideal for avid readers who wish to keep track of their reading journey and gain insights into their reading habits and preferences.

System Overview

The teal-tracker system is a web-based application that provides users with a streamlined interface to manage their reading logs. Users can easily add new books, rate them, and write notes or reviews. The system is designed to be intuitive and user-friendly, focusing on individual use without unnecessary complexity. It supports features that enhance the user's ability to reflect on their reading experiences.

Functional Requirements

• As a User, I should be able to log the books I have read.
• As a User, I should be able to rate the books I have read.
• As a User, I should be able to add notes or reviews for each book.

User Personas

• User: An individual who uses the teal-tracker to log their reading activities, rate books, and write personal notes or reviews.

Visuals Colors and Theme

• primary: #2A9D8F (Teal)
• primary_light: #A8DADC (Light Teal)
• secondary: #E76F51 (Coral)
• accent: #F4A261 (Orange)
• highlight: #E9C46A (Gold)
• bg: #F1FAEE (Off White)
• surface: rgba(42, 157, 143, 0.8)
• text: #264653 (Dark Blue)
• text_muted: #8D99AE (Gray)
• border: rgba(233, 69, 96, 0.2)

Signature Design Concept

The teal-tracker's homepage will feature an interactive bookshelf design using @react-three/fiber and @react-three/drei. Users will see a 3D bookshelf where each book represents a logged entry. Hovering over a book will display its title and rating, while clicking on it will open a detailed view with notes and reviews. The bookshelf will have a dynamic lighting effect that changes based on the time of day, providing a warm, inviting atmosphere. Users can drag to rotate the bookshelf, offering a tactile and engaging experience.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, providing a layered depth effect as users scroll. The 3D bookshelf will be the focal point, with decorative elements like floating book covers and animated page-turning effects. Internal pages, such as the book detail view, will use an "animated" model with smooth transitions and hover effects to enhance user engagement.

Non-Functional Requirements

• The system should be responsive and accessible on various devices, including desktops, tablets, and smartphones.
• The application should load within 3 seconds on a standard broadband connection.
• Data entered by users should be securely stored and backed up regularly.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local orchestration: Docker, docker-compose

Assumptions and Constraints

• The application is intended for individual use and does not require multi-user or collaborative features.
• The system will primarily be accessed via web browsers.
• Users will have a basic understanding of web applications and reading logs.

Glossary

• User: An individual using the teal-tracker application.
• Log: The action of recording a book that has been read.
• Rating: A numerical or star-based evaluation of a book.
• Notes/Reviews: Personal reflections or comments about a book.