Bookshelf
A modern web application designed to transform how we read, understand, and retain digital content.
React
Firebase
Tailwind CSS
Markdown
Knowledge Management
Reading Tool
Web Application
Project Overview
Bookshelf is a web application built for researchers, students, and avid readers to manage reading, take notes, and build knowledge networks. It aims to transform passive reading into active learning.
Key Features
- Enhanced Reading Experience: Rainbow progress bar, real-time statistics, responsive design, dynamic text scaling, smart content summarization.
- Intelligent Dictionary: Comprehensive dictionary with multiple sources and text-to-speech.
- Article Management: Hierarchical tag system, full-text search, progress tracking, bulk import/export.
- Active Reading Tools: Multi-color highlighting, rich margin notes, Spotlight Mode (immersive reading with keyboard navigation).
- Smart Notes: Rich markdown editor with live preview, bidirectional linking, real-time auto-saving.
- Knowledge Graph: Interactive 3D visualization (similarity, tags, timeline graphs), dynamic search, node highlighting.
Spotlight Mode Navigation
- ↑/k: Previous paragraph
- ↓/j/Space: Next paragraph
- b: Toggle bookmark
- v/n: Previous/Next bookmark
- z: Toggle extra zoom
- t: Toggle typewriter mode
- [/]: Adjust spotlight intensity
- c: Cycle accent colors
- Esc: Exit spotlight mode
Tech Stack
- React 18
- Firebase
- Tailwind CSS
- React Markdown
Key Features
- Enhanced Reading Experience: Rainbow progress bar, real-time reading statistics, responsive design, dynamic text scaling, smart content summarization.
- Intelligent Dictionary: Comprehensive dictionary with multiple sources (Free Dictionary API, Wiktionary API) and text-to-speech pronunciation.
- Article Management: Organize reading materials, hierarchical tag system, advanced full-text search, reading progress tracking.
- Active Reading Tools: Multi-color text highlighting, rich margin notes, Spotlight Mode for immersive reading with keyboard navigation (↑/k, ↓/j/Space, b, v/n, z, t, [/], c, Esc).
- Smart Notes: Rich markdown editor with live preview, bidirectional linking system, wiki-style internal references, real-time auto-saving.
- Knowledge Graph: Interactive 3D knowledge visualization, multiple graph views (Similarity Graph, Tags Graph, Timeline Graph), dynamic article search.
Challenges & Solutions
Designing an intuitive interface for managing large amounts of information. Implementing a performant and interactive knowledge graph. Integrating multiple APIs and libraries seamlessly.
What I Learned
Mastered React 18 features, Firebase, and advanced UI/UX design principles. Learned how to create interactive data visualizations and implement complex state management.