University Dashboard - Copy this React, Tailwind Component to your project
"Design and develop the complete front end for our university graduation project. The project involves managing our university's data and documents, and the front end must meet the following requirements: General Requirements: Use a modern front end framework (e.g., React, Angular, or Vue.js) for a responsive and user friendly interface. Ensure compatibility across devices (desktop, tablet, and mobile) with adaptive designs. Follow best practices for performance optimization and accessibility (e.g., WCAG guidelines). Features and Pages: Homepage: Overview of the system's capabilities. Quick navigation to core features. Dynamic dashboard summarizing key metrics and data insights. User Authentication: Login, registration, and password recovery functionality. Role based access (e.g., student, faculty, admin) with appropriate UI components for each role. Data Management Section: User friendly forms to input, update, and delete university data (e.g., attendance, academic records, or documents). Filter and search functionality with dynamic results. Document Management Section: Upload, preview, download, and categorize documents. Drag and drop functionality for document uploads. Display file metadata (e.g., type, size, upload date). Reports and Analytics: Visualize data insights using charts and graphs (integrate a library like Chart.js or D3.js). Export options (e.g., PDF, Excel) for reports. Settings and Preferences: Allow users to customize their experience (e.g., themes, notification settings). Manage account details and change passwords. UI/UX Design: Adhere to a modern and minimalistic design language. Use consistent color schemes, typography, and iconography aligned with the university's branding. Ensure intuitive navigation with a clear menu structure and breadcrumb navigation. Integration: Prepare the front end for integration with the backend APIs (developed using Node.js). Use state management tools (e.g., Redux, Context API, or Vuex) where necessary. Documentation: Provide detailed comments in the code for maintainability. Write a setup guide for the front end with installation and deployment steps. Tech Stack: Front End Framework: React.js (preferred), Angular, or Vue.js. UI Library: Material UI, Bootstrap, or Tailwind CSS. State Management: Redux or Context API (if React is chosen). Charting Library: Chart.js, D3.js, or similar. Deliverables: Complete front end codebase. Deployment ready build. Documentation for setup, usage, and contribution guidelines. Design the front end to be professional, scalable, and easy to use, ensuring it aligns with the overall project goals."
