Frontend of Bookwise App
Built with the tools and technologies:
A modern, feature-rich Library Management System frontend built with React and TypeScript.
- 🌟 Overview
- ✨ Features
- 🛠️ Tech Stack
- 🚀 Getting Started
- 🧩 Key Components
- 🔐 Authentication
- 💳 Payments
- 🤝 Contributing
Bookwise LMS is a comprehensive library management system that allows users to browse, search, and check out books. It includes features for user authentication, book reviews, and a payment system for late fees. The frontend is built with React and TypeScript, providing a responsive and user-friendly interface for both library patrons and administrators.
- 🔍 Browse and search for books
- 👤 User authentication and authorization with Okta
- 📖 Book checkout and return system
- ⭐ Leave reviews and ratings for books
- 💳 Payment system for late fees using Stripe
- 📊 Admin dashboard for library management
- 📱 Responsive design for mobile and desktop
- 📨 Messaging system between users and administrators
- 📚 Book quantity management for administrators
- React 18
- TypeScript 4
- Okta for authentication
- Stripe for payments
- Bootstrap for styling
- React Router for navigation
- Clone the repository
- Install dependencies:
npm install - Set up environment variables (see
.env.example) - Run the development server:
npm start
For more detailed instructions, see the Create React App documentation.
App.tsx: Main application component with routingNavbar.tsx: Navigation component with authentication statusHomePage.tsx: Landing page with featured books and servicesSearchBooksPage.tsx: Book search functionalityBookCheckoutPage.tsx: Book details and checkout processShelfPage.tsx: User's checked out books and historyPaymentPage.tsx: Late fee payment using StripeManageLibraryPage.tsx: Admin dashboard for book and message management
Authentication is handled using Okta. The OktaSignInWidget component is used for the login process, and the useOktaAuth hook is used throughout the application to manage authentication state.
The payment system for late fees is implemented using Stripe. The PaymentPage component handles the payment process, including displaying the amount due and processing the payment.
Contributions are welcome! Here are several ways you can contribute:
- Report Issues: Submit bugs found or log feature requests for the
bookwise-lms-frontendproject. - Submit Pull Requests: Review open PRs, and submit your own PRs.
- Join the Discussions: Share your insights, provide feedback, or ask questions.