CSC/ECE 517 Spring 2024 - E2425. Create a Courses user interface in ReactJS
About
The Courses page showcases a comprehensive list of courses, featuring vital information like the course title, institution name, dates of creation and updates, as well as associated functionalities like Edit course, Delete course, Add TA, Duplicate course.
The aim is to craft a user-friendly and interactive interface, facilitating seamless navigation and management of course-related data. The following features are included:
Intuitive Course Management: Developed a streamlined interface for easy navigation and management of courses Enhanced Widgets: Incorporated optimized widgets ensuring functionality and user engagement Responsive Design: The interface is accessible across various devices enhancing user experience. Performance Optimization: Enhanced loading speeds and overall performance metrics by required code refactoring
The features have been implemented using ReactJS and TypeScript.
Design
Added Instructor Column
The instructor column is now visible only for admin and superadmin users, enhancing the interface for better clarity. This dynamic feature ensures that the interface adapts based on the user's role, providing relevant information as needed.
Improved Readability with Hover Effects
Action buttons now have hover effects, enhancing readability and providing visual feedback to users. Hovering over action buttons triggers visual cues, making it easier for users to identify interactive elements.
Customized Page Headers
Page headers are now customized based on the user's role, offering a personalized experience. Depending on who is signing in, the page headers dynamically adjust to display relevant information, improving user engagement.
Enhanced Search Functionality
Implemented a search functionality based on instructors, allowing users to quickly find relevant information. Users can now easily search for instructors, streamlining the navigation process and improving user experience.
Modal Dialogue Box for Course Information
Added a link on the course name that opens a modal dialogue box, displaying detailed course information. This feature provides users with quick access to essential course details without navigating away from the current page.
Improved User Dropdown Selection
During the instructor selection process, all users were displayed in the dropdown menu, leading to potential confusion and inefficiency. Now, only actual instructors are shown, streamlining the selection process.
Code Refactoring and Optimization
Conducted code refactoring to enhance readability, maintainability, and performance. Added relevant comments to the codebase for improved understanding and documentation. Optimized UI code and made code snippets as independent as possible for better modularity and scalability.
The following screenshot shows that the new column Instructor Name is visible to only the admin role.