CSC/ECE 517 Spring 2024 - E2425. Create a Courses user interface in ReactJS

From Expertiza_Wiki
Revision as of 00:55, 24 March 2024 by Ashakta (talk | contribs) (Created page with "== 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: De...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2425._Create_a_Courses_user_interface_in_ReactJS&oldid=153271"