{"id":19056312,"url":"https://github.com/chanmeng666/library-management-system","last_synced_at":"2025-10-16T00:42:44.170Z","repository":{"id":260415114,"uuid":"880685834","full_name":"ChanMeng666/library-management-system","owner":"ChanMeng666","description":"A modern, full-featured library management system built with Next.js 15 and Supabase. Features real-time book tracking, user authentication, borrowing management, and a responsive UI powered by shadcn/ui components.","archived":false,"fork":false,"pushed_at":"2024-12-12T12:06:50.000Z","size":819,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-02T11:29:42.047Z","etag":null,"topics":["authentication","book-management","fullstack","library-management","nextjs","react","shadcn-ui","supabase","tailwindcss","typescript","web-application"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChanMeng666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"chanmeng66u","thanks_dev":null,"custom":null}},"created_at":"2024-10-30T06:56:58.000Z","updated_at":"2024-12-12T12:06:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"43761898-bf4a-4e0b-a203-f454e5328177","html_url":"https://github.com/ChanMeng666/library-management-system","commit_stats":null,"previous_names":["chanmeng666/library-management-system"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Flibrary-management-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Flibrary-management-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Flibrary-management-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Flibrary-management-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanMeng666","download_url":"https://codeload.github.com/ChanMeng666/library-management-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240112357,"owners_count":19749634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","book-management","fullstack","library-management","nextjs","react","shadcn-ui","supabase","tailwindcss","typescript","web-application"],"created_at":"2024-11-08T23:49:03.874Z","updated_at":"2025-10-16T00:42:44.161Z","avatar_url":"https://github.com/ChanMeng666.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/chanmeng66u"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n[![Project Banner](./public/images/placeholder-1.jpg)](#)\n\n# 📚 Library Management System\u003cbr/\u003e\u003ch3\u003eModern Digital Library Solution\u003c/h3\u003e\n\nA comprehensive web-based library management system that revolutionizes how libraries operate and how users interact with library services.\u003cbr/\u003e\nBuilt with Next.js 15, TypeScript, and Supabase, featuring real-time updates and intuitive user experience.\u003cbr/\u003e\nOne-click **FREE** deployment for your digital library transformation.\n\n[Live Demo][demo-link] · [Documentation][docs-link] · [Report Bug][issues-link] · [Request Feature][issues-link]\n\n\u003cbr/\u003e\n\n[![🚀 Visit Live Site 🚀](https://gradient-svg-generator.vercel.app/api/svg?text=%F0%9F%9A%80Visit%20Live%20Site%F0%9F%9A%80\u0026color=000000\u0026height=60\u0026gradientType=radial\u0026duration=6s\u0026color0=ffffff\u0026template=pride-rainbow)][demo-link]\n\n\u003cbr/\u003e\n\n\u003c!-- SHIELD GROUP --\u003e\n\n[![][github-release-shield]][github-release-link]\n[![][vercel-shield]][vercel-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link]\n\n**Share Repository**\n\n[![][share-x-shield]][share-x-link]\n[![][share-linkedin-shield]][share-linkedin-link]\n[![][share-reddit-shield]][share-reddit-link]\n\n\u003csup\u003e🌟 Transforming library management for the digital age. Built for librarians, students, and book enthusiasts.\u003c/sup\u003e\n\n[![][github-trending-shield]][github-trending-url]\n\n## 📸 Project Screenshots\n\n\u003e [!TIP]\n\u003e Experience the modern, intuitive interface designed for both librarians and library users.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/70bd5184-9eb6-4670-b3de-5a4002c34a46\" alt=\"Main Dashboard\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eUser Dashboard - Complete overview of borrowed books and library statistics\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/54da54eb-a64d-4f93-b69a-b36349c77a43\" alt=\"Book Catalog\" width=\"400\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/a0313675-7dd5-4a3b-911e-9df6e05aee32\" alt=\"Book Details\" width=\"400\"/\u003e\n  \u003cp\u003e\u003cem\u003eBook Catalog and Detailed Book Information\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e📱 More Screenshots\u003c/kbd\u003e\u003c/summary\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/dc8b1980-44a4-4b59-9f6d-c92f60016a0c\" alt=\"Authentication\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eSecure Authentication System\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/c67b34d7-b771-4b86-b43a-68704cec7acb\" alt=\"Search and Filter\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eAdvanced Search and Filtering\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c/details\u003e\n\n**Tech Stack Showcase:**\n\n\u003cdiv align=\"center\"\u003e\n\n \u003cimg src=\"https://img.shields.io/badge/next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/typescript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/react-20232a?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/supabase-3ECF8E?style=for-the-badge\u0026logo=supabase\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/tailwindcss-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/postgresql-316192?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white\"/\u003e\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003e [!IMPORTANT]\n\u003e This project demonstrates modern full-stack development practices with Next.js 15 and Supabase. It combines server-side rendering with real-time database operations to provide a seamless library management experience. Features include user authentication, book catalog management, borrowing system, and comprehensive dashboard analytics.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e📑 Table of Contents\u003c/kbd\u003e\u003c/summary\u003e\n\n#### TOC\n\n- [📚 Library Management SystemModern Digital Library Solution](#-library-management-systemmodern-digital-library-solution)\n  - [📸 Project Screenshots](#-project-screenshots)\n      - [TOC](#toc)\n      - [](#)\n  - [🌟 Introduction](#-introduction)\n  - [✨ Key Features](#-key-features)\n    - [`1` Smart Book Management](#1-smart-book-management)\n    - [`2` User-Centric Experience](#2-user-centric-experience)\n    - [`*` Additional Features](#-additional-features)\n  - [🛠️ Tech Stack](#️-tech-stack)\n  - [🏗️ Architecture](#️-architecture)\n    - [System Architecture](#system-architecture)\n    - [Component Architecture](#component-architecture)\n    - [Data Flow](#data-flow)\n    - [Component Structure](#component-structure)\n  - [⚡️ Performance](#️-performance)\n    - [Performance Metrics](#performance-metrics)\n  - [🚀 Getting Started](#-getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Quick Installation](#quick-installation)\n    - [Environment Setup](#environment-setup)\n    - [Development Mode](#development-mode)\n  - [🛳 Deployment](#-deployment)\n    - [`A` Vercel Deployment](#a-vercel-deployment)\n    - [`B` Docker Deployment](#b-docker-deployment)\n    - [`C` Environment Variables](#c-environment-variables)\n  - [📖 Usage Guide](#-usage-guide)\n    - [For Library Users](#for-library-users)\n    - [For Administrators](#for-administrators)\n    - [API Reference](#api-reference)\n  - [🔌 Integrations](#-integrations)\n  - [⌨️ Development](#️-development)\n    - [Local Development](#local-development)\n    - [Adding Features](#adding-features)\n    - [Testing](#testing)\n  - [🤝 Contributing](#-contributing)\n  - [📄 License](#-license)\n  - [👥 Author](#-author)\n\n####\n\n\u003cbr/\u003e\n\n\u003c/details\u003e\n\n## 🌟 Introduction\n\nWe are passionate about modernizing library management through innovative technology solutions. This comprehensive library management system bridges the gap between traditional library operations and modern digital expectations, providing both librarians and users with powerful, intuitive tools for managing and accessing library resources.\n\nWhether you're a library administrator seeking to streamline operations or a user looking for seamless book discovery and borrowing experiences, this system delivers enterprise-grade functionality with consumer-friendly design.\n\n\u003e [!NOTE]\n\u003e - Node.js \u003e= 18.0 required\n\u003e - Supabase account required for database and authentication\n\u003e - Modern web browser with JavaScript enabled\n\u003e - Email service for notifications (optional)\n\n| [![][demo-shield-badge]][demo-link]   | Experience the system firsthand with our live demo - no installation required!                           |\n| :------------------------------------ | :--------------------------------------------------------------------------------------------- |\n| [![][discord-shield-badge]][discord-link] | Join our community of developers and library professionals. |\n\n\u003e [!TIP]\n\u003e **⭐ Star us** to receive notifications about new features and updates!\n\n[![][image-star]][github-stars-link]\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ckbd\u003e⭐ Star History\u003c/kbd\u003e\u003c/summary\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=ChanMeng666%2Flibrary-management-system\u0026theme=dark\u0026type=Date\"\u003e\n    \u003cimg width=\"100%\" src=\"https://api.star-history.com/svg?repos=ChanMeng666%2Flibrary-management-system\u0026type=Date\"\u003e\n  \u003c/picture\u003e\n\u003c/details\u003e\n\n## ✨ Key Features\n\n[![][image-feat-core]][docs-feat-core]\n\n### `1` [Smart Book Management][docs-feat-core]\n\nExperience next-generation library catalog management with intelligent search, real-time availability tracking, and automated inventory management. Our advanced system provides comprehensive book information management with seamless user interactions.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/54da54eb-a64d-4f93-b69a-b36349c77a43\" alt=\"Book Catalog\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eAdvanced Book Catalog with Search and Filtering\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\nKey capabilities include:\n- 🔍 **Smart Search**: Advanced search by title, author, ISBN, and categories\n- 📚 **Real-time Inventory**: Live tracking of book availability and stock levels\n- 🏷️ **Category Management**: Organized book classification system\n- 📱 **Responsive Design**: Seamless experience across all devices\n- 🖼️ **Cover Management**: Support for book cover images and placeholders\n\n\u003e [!TIP]\n\u003e The search system supports partial matches and fuzzy search, making it easy for users to find books even with incomplete information.\n\n[![][back-to-top]](#readme-top)\n\n### `2` [User-Centric Experience][docs-feat-advanced]\n\nRevolutionary user dashboard that transforms how library patrons interact with library services. With personalized borrowing history, real-time notifications, and intuitive book management, users can efficiently manage their library experience.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/70bd5184-9eb6-4670-b3de-5a4002c34a46\" alt=\"User Dashboard\" width=\"600\"/\u003e\n  \u003cp\u003e\u003cem\u003eComprehensive User Dashboard with Statistics and Borrowed Books\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Dashboard Features:**\n- **Personal Statistics**: Track borrowing history and library engagement\n- **Active Loans**: Manage currently borrowed books with due dates\n- **Overdue Alerts**: Visual indicators for overdue items\n- **Quick Actions**: One-click book returns and renewals\n\n[![][back-to-top]](#readme-top)\n\n### `*` Additional Features\n\nBeyond the core functionality, this system includes:\n\n- [x] 🔐 **Secure Authentication**: Email-based authentication with Supabase Auth\n- [x] 📊 **Analytics Dashboard**: Comprehensive statistics and reporting\n- [x] 🔄 **Real-time Updates**: Live synchronization across all connected devices\n- [x] 📱 **Mobile Responsive**: Perfect experience on smartphones and tablets\n- [x] 🌙 **Dark Mode**: Eye-friendly dark theme option\n- [x] 🔔 **Smart Notifications**: Toast notifications for all user actions\n- [x] 📈 **Progress Tracking**: Visual progress indicators for all operations\n- [x] 🛡️ **Data Protection**: Secure data handling with PostgreSQL and RLS\n\n\u003e ✨ More features are continuously being added based on user feedback and library needs.\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n## 🛠️ Tech Stack\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/nextdotjs\" width=\"48\" height=\"48\" alt=\"Next.js\" /\u003e\n        \u003cbr\u003eNext.js 15\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/react\" width=\"48\" height=\"48\" alt=\"React\" /\u003e\n        \u003cbr\u003eReact 18\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/typescript\" width=\"48\" height=\"48\" alt=\"TypeScript\" /\u003e\n        \u003cbr\u003eTypeScript 5\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/supabase\" width=\"48\" height=\"48\" alt=\"Supabase\" /\u003e\n        \u003cbr\u003eSupabase\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/postgresql\" width=\"48\" height=\"48\" alt=\"PostgreSQL\" /\u003e\n        \u003cbr\u003ePostgreSQL\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/tailwindcss\" width=\"48\" height=\"48\" alt=\"TailwindCSS\" /\u003e\n        \u003cbr\u003eTailwindCSS\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Frontend Stack:**\n- **Framework**: Next.js 15 with App Router for optimal performance\n- **Language**: TypeScript for type safety and better development experience\n- **Styling**: TailwindCSS with custom design system\n- **UI Components**: Radix UI primitives with custom styling\n- **Icons**: Lucide React for consistent iconography\n\n**Backend \u0026 Database:**\n- **Backend-as-a-Service**: Supabase for authentication and database\n- **Database**: PostgreSQL with Row Level Security (RLS)\n- **Real-time**: Supabase real-time subscriptions\n- **Authentication**: Supabase Auth with email/password\n- **Storage**: Supabase Storage for file management\n\n**Development Tools:**\n- **Build Tool**: Next.js built-in build system\n- **Code Quality**: ESLint + TypeScript ESLint rules\n- **Form Handling**: React Hook Form with Zod validation\n- **Date Management**: date-fns for date operations\n- **Deployment**: Vercel for seamless deployment\n\n\u003e [!TIP]\n\u003e Each technology was selected for production readiness, developer experience, and seamless integration with the overall architecture.\n\n## 🏗️ Architecture\n\n### System Architecture\n\n\u003e [!TIP]\n\u003e This architecture supports real-time updates and scalable user management, making it suitable for libraries of all sizes.\n\n```mermaid\ngraph TB\n    subgraph \"Frontend Layer\"\n        A[Next.js App] --\u003e B[React Components]\n        B --\u003e C[Context Management]\n        C --\u003e D[Supabase Client]\n    end\n    \n    subgraph \"Backend Layer\"\n        E[Supabase API] --\u003e F[PostgreSQL Database]\n        F --\u003e G[Row Level Security]\n        G --\u003e H[Real-time Engine]\n    end\n    \n    subgraph \"External Services\"\n        I[Supabase Auth]\n        J[Supabase Storage]\n        K[Email Service]\n        L[Vercel Hosting]\n    end\n    \n    D --\u003e E\n    E --\u003e I\n    E --\u003e J\n    E --\u003e K\n    A --\u003e L\n    \n    subgraph \"Database Schema\"\n        M[Users Table]\n        N[Books Table]\n        O[Loans Table]\n        P[Categories Table]\n    end\n    \n    F --\u003e M\n    F --\u003e N\n    F --\u003e O\n    F --\u003e P\n```\n\n### Component Architecture\n\n```mermaid\ngraph LR\n    subgraph \"Pages\"\n        P1[Home Page]\n        P2[Books Catalog]\n        P3[Book Details]\n        P4[User Dashboard]\n        P5[Auth Pages]\n    end\n    \n    subgraph \"Components\"\n        C1[BookCard]\n        C2[SearchFilters]\n        C3[Header/Footer]\n        C4[UI Components]\n    end\n    \n    subgraph \"Contexts\"\n        CT1[AuthContext]\n        CT2[Toast Provider]\n    end\n    \n    subgraph \"Hooks\"\n        H1[useAuth]\n        H2[useToast]\n    end\n    \n    P1 --\u003e C1\n    P2 --\u003e C1\n    P2 --\u003e C2\n    P3 --\u003e C4\n    P4 --\u003e C4\n    CT1 --\u003e H1\n    CT2 --\u003e H2\n```\n\n### Data Flow\n\n```mermaid\nsequenceDiagram\n    participant U as User\n    participant F as Frontend\n    participant S as Supabase\n    participant D as Database\n    \n    U-\u003e\u003eF: Browse Books\n    F-\u003e\u003eS: Query Books\n    S-\u003e\u003eD: SELECT books\n    D-\u003e\u003eS: Return Results\n    S-\u003e\u003eF: JSON Response\n    F-\u003e\u003eU: Display Books\n    \n    U-\u003e\u003eF: Borrow Book\n    F-\u003e\u003eS: Create Loan\n    S-\u003e\u003eD: INSERT loan\n    S-\u003e\u003eD: UPDATE book availability\n    D-\u003e\u003eS: Transaction Complete\n    S-\u003e\u003eF: Success Response\n    F-\u003e\u003eU: Show Confirmation\n```\n\n### Component Structure\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── books/             # Book-related pages\n│   │   ├── [id]/         # Dynamic book detail page\n│   │   └── page.tsx      # Book catalog page\n│   ├── dashboard/        # User dashboard\n│   ├── login/           # Authentication pages\n│   ├── register/        # User registration\n│   └── layout.tsx       # Root layout\n├── components/          # Reusable components\n│   ├── books/          # Book-specific components\n│   ├── layout/         # Layout components\n│   └── ui/            # Base UI components\n├── contexts/           # React contexts\n├── hooks/             # Custom hooks\n├── lib/               # Utility libraries\n├── types/             # TypeScript definitions\n└── styles/            # Global styles\n```\n\n## ⚡️ Performance\n\n\u003e [!NOTE]\n\u003e Performance optimizations ensure fast loading times and smooth user experience across all devices.\n\n### Performance Metrics\n\n**Key Performance Indicators:**\n- ⚡ **Lightning Fast**: \u003c 2s initial page load\n- 🚀 **Instant Navigation**: Client-side routing with prefetching\n- 📱 **Mobile Optimized**: Perfect scores on mobile devices\n- 🔄 **Real-time Updates**: \u003c 100ms database synchronization\n- 📊 **Efficient Rendering**: Optimized React components\n\n**Optimization Techniques:**\n- 🎯 **Image Optimization**: Next.js Image component with lazy loading\n- 📦 **Code Splitting**: Automatic route-based code splitting\n- 🗄️ **Database Optimization**: Efficient PostgreSQL queries with indexes\n- 🔄 **Caching Strategy**: Static generation where possible\n- 📱 **Progressive Enhancement**: Works without JavaScript\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n\u003e [!IMPORTANT]\n\u003e Ensure you have the following installed and configured:\n\n- **Node.js** 18.0+ ([Download](https://nodejs.org/))\n- **npm/yarn/pnpm** package manager\n- **Git** ([Download](https://git-scm.com/))\n- **Supabase Account** ([Sign up](https://supabase.com/))\n\n### Quick Installation\n\n**1. Clone Repository**\n\n```bash\ngit clone https://github.com/ChanMeng666/library-management-system.git\ncd library-management-system\n```\n\n**2. Install Dependencies**\n\n```bash\n# Using npm\nnpm install\n\n# Using yarn\nyarn install\n\n# Using pnpm (recommended)\npnpm install\n```\n\n**3. Environment Setup**\n\n```bash\n# Copy environment template\ncp .env.example .env.local\n\n# Edit environment variables\nnano .env.local\n```\n\n**4. Supabase Setup**\n\n1. Create a new project on [Supabase](https://supabase.com/)\n2. Get your project URL and anon key\n3. Set up your database schema (see database setup guide)\n\n**5. Start Development**\n\n```bash\nnpm run dev\n```\n\n🎉 **Success!** Open [http://localhost:3000](http://localhost:3000) to view the application.\n\n### Environment Setup\n\nCreate `.env.local` file with the following variables:\n\n```bash\n# Supabase Configuration\nNEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key\n\n# Optional: Additional Configuration\nNEXT_PUBLIC_APP_URL=http://localhost:3000\n```\n\n\u003e [!TIP]\n\u003e Get your Supabase credentials from your project settings in the Supabase dashboard.\n\n### Development Mode\n\n```bash\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Start production server\nnpm start\n\n# Run linting\nnpm run lint\n```\n\n## 🛳 Deployment\n\n\u003e [!IMPORTANT]\n\u003e The application is optimized for deployment on Vercel, but can be deployed on any platform that supports Next.js.\n\n### `A` Vercel Deployment\n\n**One-Click Deploy:**\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Flibrary-management-system)\n\n**Manual Deployment:**\n\n```bash\n# Install Vercel CLI\nnpm i -g vercel\n\n# Deploy\nvercel --prod\n```\n\n### `B` Docker Deployment\n\n```bash\n# Build Docker image\ndocker build -t library-management-system .\n\n# Run container\ndocker run -p 3000:3000 library-management-system\n```\n\n### `C` Environment Variables\n\n\u003e [!WARNING]\n\u003e Never commit sensitive environment variables to version control. Use Vercel's environment variables settings for production.\n\n| Variable | Description | Required | Example |\n|----------|-------------|----------|---------|\n| `NEXT_PUBLIC_SUPABASE_URL` | Supabase project URL | ✅ | `https://xxx.supabase.co` |\n| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase anonymous key | ✅ | `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...` |\n| `NEXT_PUBLIC_APP_URL` | Application URL | 🔶 | `https://your-app.vercel.app` |\n\n\u003e [!NOTE]\n\u003e ✅ Required, 🔶 Optional\n\n## 📖 Usage Guide\n\n### For Library Users\n\n**Getting Started:**\n\n1. **Create Account** - Register with your email address\n2. **Browse Books** - Explore the book catalog with advanced search\n3. **Borrow Books** - Click \"Borrow\" on available books\n4. **Manage Loans** - Track your borrowed books in the dashboard\n5. **Return Books** - Use the dashboard to return books\n\n**Key Features:**\n- 📚 **Book Discovery**: Search by title, author, or ISBN\n- 🔍 **Advanced Filtering**: Filter by categories and availability\n- 📊 **Personal Dashboard**: View borrowed books and statistics\n- 🔔 **Due Date Tracking**: Never miss a return date\n- 📱 **Mobile Access**: Use on any device, anywhere\n\n### For Administrators\n\n**System Management:**\n- 👥 **User Management**: Monitor user accounts and activities\n- 📚 **Inventory Control**: Track book availability and status\n- 📈 **Analytics**: View system usage and statistics\n- 🔧 **Configuration**: Manage system settings and preferences\n\n### API Reference\n\n\u003e [!TIP]\n\u003e The system uses Supabase's auto-generated API with Row Level Security for data protection.\n\n**Core Database Tables:**\n- `books` - Book information and inventory\n- `users` - User profiles and authentication\n- `loans` - Borrowing records and transactions\n- `categories` - Book classification system\n\n**Key Operations:**\n```javascript\n// Search books\nconst { data: books } = await supabase\n  .from('books')\n  .select('*')\n  .ilike('title', `%${searchTerm}%`)\n\n// Borrow book\nconst { data: loan } = await supabase\n  .from('loans')\n  .insert([{\n    user_id: userId,\n    book_id: bookId,\n    due_date: dueDate\n  }])\n```\n\n## 🔌 Integrations\n\nThe system integrates seamlessly with modern web services:\n\n| Service | Purpose | Status | Documentation |\n|---------|---------|--------|---------------|\n| **Supabase** | Database \u0026 Auth | ✅ Active | [Setup Guide](docs/supabase.md) |\n| **Vercel** | Hosting \u0026 Deployment | ✅ Active | [Deploy Guide](docs/vercel.md) |\n| **Radix UI** | Component Library | ✅ Active | [Component Docs](docs/components.md) |\n| **TailwindCSS** | Styling Framework | ✅ Active | [Style Guide](docs/styles.md) |\n\n## ⌨️ Development\n\n### Local Development\n\n**Setup Development Environment:**\n\n```bash\n# Clone and install\ngit clone https://github.com/ChanMeng666/library-management-system.git\ncd library-management-system\nnpm install\n\n# Set up environment\ncp .env.example .env.local\n# Edit .env.local with your Supabase credentials\n\n# Start development\nnpm run dev\n```\n\n**Development Scripts:**\n\n```bash\n# Development\nnpm run dev          # Start dev server\nnpm run build        # Build for production\nnpm run start        # Start production server\n\n# Code Quality\nnpm run lint         # Run ESLint\nnpm run type-check   # TypeScript check\n\n# Database (if using local Supabase)\nnpx supabase start   # Start local Supabase\nnpx supabase stop    # Stop local Supabase\n```\n\n### Adding Features\n\n\u003e [!TIP]\n\u003e Follow the established patterns when adding new features to maintain code consistency.\n\n**Feature Development Workflow:**\n\n1. **Create Feature Branch**: `git checkout -b feature/new-feature`\n2. **Develop Component**: Add components in appropriate directories\n3. **Add Types**: Update TypeScript definitions\n4. **Test Functionality**: Ensure all features work correctly\n5. **Update Documentation**: Add relevant documentation\n6. **Submit Pull Request**: Follow PR template\n\n### Testing\n\n**Manual Testing Checklist:**\n- [ ] User authentication (sign up, sign in, sign out)\n- [ ] Book browsing and search functionality\n- [ ] Book borrowing and returning process\n- [ ] Dashboard statistics and display\n- [ ] Responsive design on mobile devices\n- [ ] Error handling and edge cases\n\n## 🤝 Contributing\n\nWe welcome contributions to improve the Library Management System! Here's how you can help:\n\n**Development Process:**\n\n1. **Fork the Repository**\n2. **Create Feature Branch** (`git checkout -b feature/AmazingFeature`)\n3. **Commit Changes** (`git commit -m 'Add some AmazingFeature'`)\n4. **Push to Branch** (`git push origin feature/AmazingFeature`)\n5. **Open Pull Request**\n\n**Contribution Guidelines:**\n- Follow TypeScript best practices\n- Maintain consistent code style\n- Add comments for complex logic\n- Test your changes thoroughly\n- Update documentation as needed\n\n**Types of Contributions:**\n- 🐛 **Bug Reports**: Help us identify and fix issues\n- 💡 **Feature Requests**: Suggest new functionality\n- 📚 **Documentation**: Improve our documentation\n- 🔧 **Code Improvements**: Optimize existing code\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n\u003ca href=\"https://github.com/ChanMeng666/library-management-system/graphs/contributors\" target=\"_blank\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"2\"\u003e\n        \u003cbr\u003e\u003cimg src=\"https://contrib.rocks/image?repo=ChanMeng666/library-management-system\"\u003e\u003cbr\u003e\u003cbr\u003e\n      \u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/a\u003e\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n**Open Source Benefits:**\n- ✅ Commercial use allowed\n- ✅ Modification allowed\n- ✅ Distribution allowed\n- ✅ Private use allowed\n\n## 👥 Author\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ChanMeng666\"\u003e\n          \u003cimg src=\"https://github.com/ChanMeng666.png?size=100\" width=\"100px;\" alt=\"Chan Meng\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eChan Meng\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n        \u003cbr /\u003e\n        \u003csmall\u003eCreator \u0026 Lead Developer\u003c/small\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Chan Meng**\n- \u003cimg src=\"https://cdn.simpleicons.org/linkedin/0A66C2\" width=\"16\" height=\"16\"\u003e LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)\n- \u003cimg src=\"https://cdn.simpleicons.org/github/181717\" width=\"16\" height=\"16\"\u003e GitHub: [ChanMeng666](https://github.com/ChanMeng666)\n- \u003cimg src=\"https://cdn.simpleicons.org/gmail/EA4335\" width=\"16\" height=\"16\"\u003e Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)\n- \u003cimg src=\"https://cdn.simpleicons.org/internetexplorer/0078D4\" width=\"16\" height=\"16\"\u003e Website: [chanmeng.live](https://2d-portfolio-eta.vercel.app/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003cstrong\u003e🚀 Transforming Library Management for the Digital Age 🌟\u003c/strong\u003e\n\u003cbr/\u003e\n\u003cem\u003eEmpowering libraries and readers worldwide\u003c/em\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n⭐ **Star us on GitHub** • 📖 **Read the Documentation** • 🐛 **Report Issues** • 💡 **Request Features** • 🤝 **Contribute**\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n**Made with ❤️ for the library community**\n\n\u003cimg src=\"https://img.shields.io/github/stars/ChanMeng666/library-management-system?style=social\" alt=\"GitHub stars\"\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/ChanMeng666/library-management-system?style=social\" alt=\"GitHub forks\"\u003e\n\u003cimg src=\"https://img.shields.io/github/watchers/ChanMeng666/library-management-system?style=social\" alt=\"GitHub watchers\"\u003e\n\n\u003c/div\u003e\n\n---\n\n\u003c!-- LINK DEFINITIONS --\u003e\n\n[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square\n\n\u003c!-- Project Links --\u003e\n[demo-link]: https://library-management-system-chanmeng666.vercel.app\n[docs-link]: https://github.com/ChanMeng666/library-management-system#readme\n[issues-link]: https://github.com/ChanMeng666/library-management-system/issues\n\n\u003c!-- GitHub Links --\u003e\n[github-stars-link]: https://github.com/ChanMeng666/library-management-system/stargazers\n[github-forks-link]: https://github.com/ChanMeng666/library-management-system/forks\n[github-issues-link]: https://github.com/ChanMeng666/library-management-system/issues\n[github-release-link]: https://github.com/ChanMeng666/library-management-system/releases\n[github-license-link]: https://github.com/ChanMeng666/library-management-system/blob/main/LICENSE\n[pr-welcome-link]: https://github.com/ChanMeng666/library-management-system/pulls\n\n\u003c!-- Community Links --\u003e\n[discord-link]: https://discord.gg/library-management\n[vercel-link]: https://vercel.com\n\n\u003c!-- Documentation Links --\u003e\n[docs-feat-core]: #1-smart-book-management\n[docs-feat-advanced]: #2-user-centric-experience\n\n\u003c!-- Shield Badges --\u003e\n[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/library-management-system?color=369eff\u0026labelColor=black\u0026logo=github\u0026style=flat-square\n[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black\u0026logo=vercel\u0026style=flat-square\n[discord-shield]: https://img.shields.io/discord/123456789?color=5865F2\u0026label=discord\u0026labelColor=black\u0026logo=discord\u0026logoColor=white\u0026style=flat-square\n[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/library-management-system?color=ffcb47\u0026labelColor=black\u0026style=flat-square\n[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/library-management-system?color=8ae8ff\u0026labelColor=black\u0026style=flat-square\n[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/library-management-system?color=ff80eb\u0026labelColor=black\u0026style=flat-square\n[github-license-shield]: https://img.shields.io/badge/license-MIT-white?labelColor=black\u0026style=flat-square\n[github-trending-shield]: https://trendshift.io/api/badge/repositories/123456\n[pr-welcome-shield]: https://img.shields.io/badge/🤝_PRs_welcome-%E2%86%92-ffcb47?labelColor=black\u0026style=for-the-badge\n\n\u003c!-- Badge Variants --\u003e\n[demo-shield-badge]: https://img.shields.io/badge/TRY%20DEMO-ONLINE-55b467?labelColor=black\u0026logo=vercel\u0026style=for-the-badge\n[discord-shield-badge]: https://img.shields.io/discord/123456789?color=5865F2\u0026label=discord\u0026labelColor=black\u0026logo=discord\u0026logoColor=white\u0026style=for-the-badge\n\n\u003c!-- Social Share Links --\u003e\n[share-x-link]: https://x.com/intent/tweet?hashtags=opensource,library,nextjs\u0026text=Check%20out%20this%20amazing%20Library%20Management%20System\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Flibrary-management-system\n[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/library-management-system\n[share-reddit-link]: https://www.reddit.com/submit?title=Modern%20Library%20Management%20System\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Flibrary-management-system\n\n[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black\u0026logo=x\u0026logoColor=white\u0026style=flat-square\n[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black\u0026logo=linkedin\u0026logoColor=white\u0026style=flat-square\n[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black\u0026logo=reddit\u0026logoColor=white\u0026style=flat-square\n\n\u003c!-- Images --\u003e\n[image-star]: https://via.placeholder.com/800x200/FFD700/000000?text=Star+Us+on+GitHub\n[image-feat-core]: https://via.placeholder.com/800x400/4CAF50/FFFFFF?text=Smart+Book+Management\n\n\u003c!-- Trending --\u003e\n[github-trending-url]: https://trendshift.io/repositories/123456\n\u003c/rewritten_file\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Flibrary-management-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanmeng666%2Flibrary-management-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Flibrary-management-system/lists"}