A modern, feature-rich book management system built with React and Vite. This system includes user authentication, an intuitive dashboard, and a sleek UI for efficient book management.
- Secure User Authentication: JWT-based login and registration with persistent sessions.
- Admin Dashboard: Comprehensive controls for managing books and user activity.
- Book Management: Full CRUD functionality for books.
- Powerful Search: Quickly find books with an optimized search tool.
- Form Validation: Seamless input validation for error-free user experience.
- Modern UI: Built with TailwindCSS for a clean and responsive design.
- RTL Support: Fully compatible with right-to-left languages.
- High Performance: Optimized with Vite for fast development and production builds.
- Responsive Design: Enhance mobile and tablet usability.
- Advanced Dashboard Features: Add analytics and detailed user management.
- Real-time Updates: Enable live data synchronization.
- Mobile View Optimization: Streamline for smaller devices.
- Frontend Framework: React
- Build Tool: Vite
- Styling: TailwindCSS with DaisyUI
- State Management: React Query
- Routing: React Router DOM
- HTTP Client: Axios
- Form Validation: Custom validation logic
- Notifications: React Toastify
Before setting up the frontend, ensure that you clone and run the backend project. The backend is developed using Node.js and Express and can be started with the following steps:
- Clone the backend repository:
git clone <bookshop-api>
- Navigate to the backend directory:
cd bookshop-api - Install dependencies:
npm install
- Start the backend server:
npm start
- Clone the frontend repository:
git clone https://github.com/keihanaf/Books-rtl.git
- Navigate to the project directory:
cd book-management-system - Install dependencies:
npm install
- Create a
.envfile: Add the following environment variable in the root directory:VITE_BASE_URL=your_api_base_url
- Start the development server:
npm run dev
src/
├── assets/ # Static assets (SVGs, images)
├── components/ # Reusable React components
│ ├── HOC/ # Higher Order Components
│ ├── modules/ # Modular components
│ └── templates/# Page templates
├── configs/ # Configuration files
├── context/ # React Context providers
├── hooks/ # Custom React hooks
├── layout/ # Layout components
├── pages/ # Page components
├── router/ # Routing setup
├── services/ # API services
├── styles/ # Global and scoped styles
└── utils/ # Utility functions
- JWT-based secure authentication.
- Persistent login state with cookies.
- Protected routes for authorized users.
- Pagination: Easily navigate through large book collections.
- CRUD: Create, read, update, and delete books effortlessly.
- Search: Quick and efficient book searching.
- Admin Controls: Manage books and monitor user activity.
- React Query Integration: Real-time data fetching and caching.
- Interactive Modals: Streamlined UI for adding or editing books.
- Custom Modals: Dynamic and reusable modal system.
- Loading Spinners: Indicate processing states.
- Toast Notifications: Provide user feedback.
- Data Tables: Display and manage tabular data.
- Custom Inputs: Stylish and validated form fields.
- SVG Icons: Enhance UI aesthetics.
Key configuration files:
tailwind.config.js: TailwindCSS configuration.vite.config.js: Vite build settings.src/configs/api.js: API configuration and interceptors.src/configs/reactQuery.js: Default React Query options.
- Desktop-Only Design: Not optimized for mobile or tablet devices.
- Fixed Layouts: Some components lack responsive scaling.
Contributions are welcome! Please feel free to submit a Pull Request. Key areas needing attention:
- Responsive design implementation.
- Mobile and tablet optimizations.
- Enhanced dashboard features.
This project is licensed under the MIT License. See the LICENSE file for details.
Special thanks to the creators of these tools and libraries: