Warning
Work in Progress: This project is currently under development. Not all features may be fully implemented or working as expected.
Bookly is a modern full-stack desktop application for managing and browsing your book and author collection. Built with React 19, TypeScript, Tauri v2, Express.js, and Vite, it features a clean UI with shadcn/ui components, internationalization support (Arabic/English), theme switching, sorting, searching, and comprehensive book and author management capabilities.
- Browse your book collection in a beautiful card layout
- Manage authors with dedicated author pages and profiles
- Search for books by title or author
- Sort books and authors in ascending or descending order
- Add and delete books and authors with intuitive dialogs
- Individual book and author detail pages
- Multi-page navigation (Books, Authors, Data, Settings)
- Cross-platform desktop application powered by Tauri v2
- Native window controls and system integration
- Small bundle size and fast startup
- Runs on Windows, macOS, and Linux
- Multi-language support (English and Arabic)
- Automatic language detection
- Right-to-left (RTL) support for Arabic
- Language switcher in navigation
- Localized UI components and content
- Desktop-focused design with clean interface
- Dark/Light theme support with theme switcher
- Modern UI components powered by shadcn/ui and Radix UI
- Responsive navigation with dropdown menus
- Clean card-based layouts for books and authors
- Smooth transitions and animations
- Full-stack architecture with Express.js backend
- React 19 with TypeScript for type safety
- Internationalization with i18next and react-i18next
- RTL support with Radix UI DirectionProvider
- RESTful API for books and authors management
- TailwindCSS for utility-first styling
- Vite for fast development and optimized builds
- Component-based architecture with reusable UI elements
- Modern routing with React Router DOM v7
- React 19 - Modern React with latest features
- TypeScript - Type-safe development
- Vite - Fast build tool and dev server
- TailwindCSS v4 - Utility-first CSS framework
- shadcn/ui - Beautiful and accessible UI components
- Radix UI - Primitive UI components with RTL support
- React Router DOM v7 - Modern client-side routing
- i18next - Internationalization framework
- react-i18next - React integration for i18next
- Lucide React - Beautiful icons
- Express.js v5 - Fast and minimal web framework
- Vite Express - Integration between Vite and Express
- Node.js - JavaScript runtime
- JSON File Storage - Simple file-based data storage for books and authors
- Tauri v2 - Lightweight cross-platform desktop framework
- Rust - Backend runtime for native performance
- WebKitGTK - Web view for Linux
- WebView2 - Web view for Windows
- Node.js (v18 or newer recommended)
- pnpm (recommended package manager)
- Rust (for Tauri development)
- System dependencies for Tauri:
- Linux:
libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev - Windows: WebView2 (usually pre-installed on Windows 10/11)
- macOS: Xcode Command Line Tools
- Linux:
-
Clone the repository:
git clone https://github.com/yasiralamriki/bookly.git cd bookly -
Install dependencies for all workspaces:
pnpm install:all
-
Start the development server (web):
pnpm dev
-
Start the desktop app (Tauri):
pnpm tauri dev
-
Open http://localhost:5173 in your browser (for web version).
From the root directory:
pnpm dev- Start development server (both client and server)pnpm build- Build the client for productionpnpm start- Start production serverpnpm install:all- Install dependencies for both client and serverpnpm build:production- Build and start production serverpnpm tauri dev- Start Tauri desktop app in development modepnpm tauri build- Build the desktop app for productionpnpm tauri icon <path>- Generate app icons from a source image
bookly/
├── client/ # React frontend application
│ ├── src/
│ │ ├── components/ # Reusable React components
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ ├── books/ # Book-related components
│ │ │ ├── authors/ # Author-related components
│ │ │ └── navbar/ # Navigation components
│ │ ├── pages/ # Page components
│ │ │ ├── books/ # Books page and routing
│ │ │ ├── authors/ # Authors page and routing
│ │ │ ├── book/ # Individual book page
│ │ │ ├── author/ # Individual author page
│ │ │ ├── data/ # Data visualization page
│ │ │ └── settings/ # Settings page
│ │ ├── lib/ # Utility functions and helpers
│ │ ├── assets/ # Static assets (images, logos)
│ │ └── i18n.js # Internationalization configuration
│ ├── public/
│ │ └── locales/ # Translation files
│ │ ├── en.json # English translations
│ │ └── ar.json # Arabic translations
│ └── package.json # Client dependencies and scripts
├── server/ # Express.js backend
│ ├── data/ # JSON data files
│ │ ├── books.json # Books data
│ │ └── authors.json # Authors data
│ ├── lib/ # Server utilities and modules
│ ├── routes/ # API route handlers
│ ├── server.js # Main server file
│ └── package.json # Server dependencies and scripts
├── src-tauri/ # Tauri desktop application
│ ├── src/ # Rust source files
│ │ ├── main.rs # Main entry point
│ │ └── lib.rs # Library module
│ ├── icons/ # Application icons
│ ├── tauri.conf.json # Tauri configuration
│ └── Cargo.toml # Rust dependencies
└── package.json # Workspace configuration
This project uses shadcn/ui for UI components. To add new components:
cd client
npx shadcn@latest add [component-name]The application supports multiple languages with automatic detection:
- English (en) - Default language
- Arabic (ar) - Full RTL support with proper text direction
To add a new language:
- Create a new file
client/public/locales/[language-code].json - Add translated strings to the JSON file
- The application will automatically detect and switch based on browser preferences
The server provides RESTful API endpoints:
GET /api/books- Retrieve all booksPOST /api/books- Create a new bookDELETE /api/books/:id- Delete a bookGET /api/authors- Retrieve all authorsPOST /api/authors- Create a new authorDELETE /api/authors/:id- Delete an author
- Books Data: Edit
server/data/books.jsonto modify the book collection - Authors Data: Edit
server/data/authors.jsonto manage authors - Translations: Add or modify translations in
client/public/locales/ - UI Styling: Customize components in
client/src/components/ui/ - Theme: Configure themes in
client/src/components/themeprovider.tsx - API Routes: Add backend routes in
server/routes/ - Internationalization: Configure i18n in
client/src/i18n.js
The application includes multiple pages with full internationalization:
- Books: Book collection browser and management with search and sort
- Authors: Author management with individual author profiles
- Individual Book Pages: Detailed view for each book with notes and metadata
- Individual Author Pages: Detailed author profiles and their works
- Data: Data visualization and analytics dashboard
- Settings: Application configuration, theme, and language preferences
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow TypeScript best practices
- Use the existing component structure and patterns
- Ensure internationalization support for new features
- Test both LTR and RTL layouts
- Maintain consistent styling with shadcn/ui components
MIT