Comprehensive React Dashboard with Material UI
Create a comprehensive dashboard application using React.js and Material UI (MUI). The dashboard should include the following features: Functionalities Authentication & Authorization: Implement a login and registration system using Zustand for state management. Role based access control (Admin vs. User) to restrict specific features. Main Dashboard Layout: A responsive sidebar navigation menu with links to different modules (Books, Store, Purchases, Management, Checkout, Admin). A top navbar with search functionality, profile settings, and notifications. Modules Books Module: Display a list of books with pagination and search filters. Implement CRUD operations: Create: Form to add new books. Update: Edit existing book details. Delete: Remove books from the list. Book details should include title, author, genre, price, and stock. Store Module: Display available products with options to filter and sort. Add products to the store with details like name, category, price, and stock. Option to update or delete existing products. Purchases Module: Display a list of purchases made by users. Include functionality to view, filter, and search purchase history. Generate invoices for each purchase. Checkout System: A step by step checkout flow including cart review, address selection, and payment. Integration with a payment gateway (use a mock payment flow). Show order confirmation with details. Management Module: Admin panel to manage users, books, and store items. Display a list of registered users with options to deactivate or delete accounts. Add, update, or delete categories for books and products. Admin Dashboard: Display key metrics like total sales, active users, and revenue. Visual representation of data using charts (using MUI's chart components). Ability to export reports in CSV or PDF formats. Technical Requirements Use React.js for frontend development. Use Material UI (MUI) for styling and components. State management with Zustand for handling authentication and application state. Use Axios to handle API requests to the backend. Backend (you can use Express.js) with CRUD APIs connected to a MySQL or MongoDB database using Prisma ORM. Implement JWT authentication for secure access. Use React Router for navigation. Use React Hook Form or Formik for handling forms. Include client side validation and error handling. Additional Features (Optional) Dark mode toggle for the entire dashboard. Use React Lazy Loading for optimizing large datasets. Implement drag and drop functionality for managing lists (e.g., book categories). Notifications system using Toastify or similar for success/error messages. Mobile responsiveness with MUI Grid system and breakpoints. Deliverables A fully functional dashboard application meeting the above requirements. Well organized folder structure with separate components, pages, services, and hooks. Clean, maintainable, and scalable code. Documentation on how to set up and run the project locally.
