A comprehensive digital library platform that connects readers, publishers, and administrators in a seamless book discovery and management ecosystem. PagePlay provides an immersive reading experience with advanced features including AI-powered book recommendations, integrated PDF reader, blog system, and multi-role user management.
- Overview
- Features
- Architecture
- Technology Stack
- Getting Started
- Project Structure
- API Documentation
- User Roles
- Development
- Deployment
- Contributing
- License
PagePlay is a modern web application designed to revolutionize the digital reading experience. The platform serves three distinct user types—readers, publishers, and administrators—each with tailored functionalities. Built with scalability and performance in mind, PagePlay leverages cutting-edge technologies to deliver a responsive, secure, and feature-rich application.
- Multi-tenant architecture supporting three distinct user roles
- Advanced PDF rendering with interactive reading features
- AI-powered chatbot for personalized book recommendations
- Comprehensive blog and review system
- Real-time transaction processing
- Secure authentication with Supabase
- Responsive design optimized for all devices
- Book Discovery: Browse and search through an extensive catalog with advanced filtering by genre, author, rating, and popularity
- Interactive Reading: Feature-rich PDF reader with zoom, page navigation, bookmarking, and text search capabilities
- Personal Library: Manage purchased books, reading progress, and favorites in one place
- Wishlist & Cart: Save books for later and seamless checkout experience
- Reviews & Ratings: Share opinions and read community feedback
- Blog System: Create posts, comment, reply, and engage with the reading community
- AI Chatbot: Get personalized book recommendations powered by Google Gemini AI
- Reading Challenge: Track reading goals and progress
- User Profile: Customizable profile with reading statistics and preferences
- Book Management: Upload, edit, and manage book catalog with metadata and cover images
- Sales Analytics: Track book performance and revenue
- Transaction History: Monitor all sales and royalty payments
- Pending Requests: View books awaiting admin approval
- Profile Management: Maintain publisher information and branding
- PDF Preview: Review uploaded content before publication
- User Management: Monitor and manage all registered users
- Publisher Oversight: Approve publisher registrations and manage publisher accounts
- Content Moderation: Review and approve book submissions
- Transaction Monitoring: Oversee all financial transactions across the platform
- Report System: Handle user reports and content violations
- Analytics Dashboard: Comprehensive view of platform metrics and activities
- Admin Management: Add new administrators with appropriate permissions
PagePlay follows a client-server architecture with clear separation of concerns:
┌─────────────────┐
│ React Client │
│ (Vite Build) │
└────────┬────────┘
│
│ HTTP/REST API
│
┌────────▼────────┐
│ Express Server │
│ (Node.js) │
└────────┬────────┘
│
├──────────┬──────────┐
│ │ │
┌────▼───┐ ┌──▼──────┐ ┌▼────────┐
│PostgreSQL│ │Supabase │ │External │
│ Database │ │ Storage │ │ APIs │
└──────────┘ └─────────┘ └─────────┘
- Component-Based Architecture: Reusable React components with shadcn/ui
- RESTful API Design: Clean, predictable endpoint structure
- Repository Pattern: Database abstraction layer for data operations
- Middleware Chain: Authentication, validation, and error handling
- Responsive Design: Mobile-first approach with Tailwind CSS
- Framework: React 18.3.1 with TypeScript
- Build Tool: Vite 6.1.1
- Routing: React Router DOM 7.1.1
- UI Components: shadcn/ui (Radix UI primitives)
- Styling: Tailwind CSS 3.4.17
- PDF Viewer: react-pdf-viewer 3.12.0
- Form Management: React Hook Form 7.54.2 with Zod validation
- State Management: React Context API
- Icons: Lucide React, React Icons
- HTTP Client: Fetch API
- Date Handling: date-fns 3.6.0
- Runtime: Node.js
- Framework: Express.js 4.21.2
- Database: PostgreSQL with postgres.js driver
- Authentication: Supabase Auth
- File Storage: Supabase Storage
- File Upload: Multer 1.4.5
- CORS: cors 2.8.5
- Environment: dotenv 16.4.7
- Development: nodemon 3.1.9
- Authentication & Storage: Supabase
- AI Integration: Google Gemini API
- Database Hosting: PostgreSQL (Cloud-based)
- PDF Processing: pdfjs-dist 3.11.174
- Node.js 18.x or higher
- PostgreSQL 14.x or higher
- npm or yarn package manager
- Supabase account
- Google Gemini API key
- Clone the repository:
git clone https://github.com/Raisulll/PagePlay.git
cd PagePlay- Install frontend dependencies:
cd pagePlay
npm install- Install backend dependencies:
cd ../server
npm install- Configure environment variables:
Create .env file in the pagePlay directory:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_SERVICE_ROLE=your_supabase_service_role
VITE_GEMINI_API=your_gemini_api_keyCreate .env file in the server directory:
PORT=5000
DATABASE_URL=postgresql://user:password@localhost:5432/pageplay
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_key- Initialize the database:
# Run database migrations (if available)
# Or import the schema manually- Start the development servers:
Terminal 1 (Frontend):
cd pagePlay
npm run devTerminal 2 (Backend):
cd server
npm startThe application will be available at:
- Frontend: http://localhost:5173
- Backend: http://localhost:5000
PagePlay/
├── pagePlay/ # Frontend application
│ ├── Auth/
│ │ └── SupabaseClient.ts # Supabase client configuration
│ ├── public/ # Static assets
│ └── src/
│ ├── admin/ # Admin dashboard components
│ ├── assets/ # Images, fonts, etc.
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── blog/ # Blog-related components
│ │ ├── BookDetails/ # Book detail view components
│ │ └── pdf-reader/ # PDF viewer components
│ ├── data/ # Static data and constants
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ ├── publisher/ # Publisher dashboard components
│ ├── types/ # TypeScript type definitions
│ └── user/ # User-specific components
│
└── server/ # Backend application
├── routes/
│ ├── auth.js # Authentication endpoints
│ ├── userApis.js # User-related endpoints
│ ├── publisherApis.js # Publisher-related endpoints
│ └── adminApis.js # Admin-related endpoints
├── db.js # Database configuration
├── storage.js # Supabase storage utilities
└── index.js # Express server entry point
POST /auth/signup - Register new user
POST /auth/login - User login
GET /user/profile - Get user profile
POST /user/updateProfile - Update user information
POST /user/addToCart - Add book to cart
POST /user/payment - Process book purchase
GET /user/myBooks - Get purchased books
POST /user/addReview - Submit book review
POST /user/AddPosts - Create blog post
POST /user/likePost - Like a post
POST /user/addNewComment - Add comment to post
POST /publisher/addBook - Upload new book
GET /publisher/books - Get publisher's books
POST /publisher/updateProfile - Update publisher profile
GET /publisher/transactions - Get sales transactions
GET /admin/users - List all users
GET /admin/publishers - List all publishers
GET /admin/pendingBooks - Get books pending approval
POST /admin/approveBook - Approve book submission
POST /admin/rejectBook - Reject book submission
GET /admin/transactions - View all transactions
GET /admin/reports - Get platform reports
Default role for registered users. Can browse books, make purchases, write reviews, create blog posts, and interact with the community.
Special role granted by administrators. Can upload and manage books, view sales analytics, and track revenue.
Highest privilege level. Full access to platform management, user oversight, content moderation, and system configuration.
The project uses ESLint for code quality enforcement:
npm run lintUI components follow the shadcn/ui pattern with Radix UI primitives and Tailwind styling:
import { Button } from "@/components/ui/button"
export function MyComponent() {
return <Button variant="default">Click me</Button>
}React Context API is used for global state:
- User authentication state
- Cart management
- Theme preferences
- Utility-first approach with Tailwind CSS
- Responsive breakpoints: sm, md, lg, xl, 2xl
- Dark mode support (if implemented)
- Component variants using class-variance-authority
The frontend is optimized for deployment on platforms like Vercel or Netlify:
cd pagePlay
npm run buildBuild output is generated in the dist/ directory.
The backend can be deployed on services like Heroku, Railway, or DigitalOcean:
- Ensure environment variables are configured
- Set up PostgreSQL database
- Deploy using platform-specific commands
- Create PostgreSQL database
- Run schema migrations
- Seed initial data (if required)
- Configure connection string in environment variables
Ensure all environment variables are properly configured in the production environment:
- Database connection strings
- Supabase credentials
- API keys for external services
- CORS origins
- Authentication: Secure user registration and login with session management
- Book Management: Complete CRUD operations for book catalog
- Reading Interface: PDF rendering with navigation, zoom, and search
- Social Features: Reviews, ratings, blogs, comments, and likes
- Transaction Processing: Secure payment handling and order management
- Content Moderation: Admin approval workflow for books and users
- AI Integration: Chatbot for personalized recommendations
- Performance: Page load times under 3 seconds
- Scalability: Support for 10,000+ concurrent users
- Security: Data encryption, secure authentication, input validation
- Reliability: 99.9% uptime availability
- Responsiveness: Mobile-first design for all screen sizes
- Maintainability: Modular code structure with clear separation of concerns
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature - Open a pull request
Please ensure your code follows the existing style and includes appropriate tests.
This project is licensed under the ISC License. See the LICENSE file for details.
- Md Raisul Islam Rahad
- React and Vite communities for excellent documentation
- shadcn/ui for beautiful, accessible components
- Supabase for authentication and storage solutions
- Google Gemini AI for chatbot capabilities
- All contributors and testers who helped shape this platform
For issues, questions, or suggestions:
- Open an issue on GitHub
- Contact the development team
- Check the documentation wiki
Built with passion for the reading community.