CSC/ECE 517 Spring 2024 - E2433 Implement UI for the Student Teams

Description

The main objective of this project is to reconstruct and enhance the frontend components of the Expertiza platform, specifically targeting the "Student teams" interface. The mission is to engineer a robust and dynamic user interface utilizing React.js and TypeScript, which will serve to facilitate the management and viewing of student teams within the application. This includes crafting fully operational React components that not only replicate the existing functionality but also introduce improvements in usability and design, in alignment with the modern web development standards.

This is the design diagram for the UI implementation:

Proposed Design

Page Structure Components:

HeaderComponent: Renders the navigation bar with links such as Home, Assignments, Profile, Contact Us, and Anonymized view.

FooterComponent: A small component at the bottom that provides links to help or external resources like "Papers on Expertiza".

Team Information Section Components:

TeamNameHeader: A component to display "Team Information for Final project (and design doc)" and the editable team name field with an "Edit name" button.

MemberTable: A functional component that generates a table with team member information. It includes a MemberRow sub-component for each row, displaying username, full name, email, and a ReviewActionButton for review actions.

Invitation and Management Components:

InviteSection: This component contains the invitation input and submit button allowing users to invite other participants by entering a username.

InputField: A reusable input component customized for entering the user login in the invitation section. Button: A reusable button component styled consistently for various actions such as "Invite", "Create Advertisement", and "Back".

Advertisement for Teammates Components:

AdvertisementSection: A simple section that includes a button to create advertisements for looking for teammates.

State and Logic Handling:

useTeamInfo: A custom React hook for encapsulating the state and logic related to the team information, handling actions like editing team names, inviting members, and creating advertisements.

useForm: If using a form library like Formik, this custom hook manages form state and submission for invitations and team name editing.

User Interaction Components:

LeaveTeamButton: A button that allows a user to leave the team, possibly triggering a confirmation dialog before proceeding.

Utility Components:

AlertDialog: For displaying alerts or confirmations when the user performs certain actions like leaving a team or inviting a new member.

LoadingComponent: To signify ongoing data operations, such as loading the team members list or submitting an invitation.

Navigation:

BackButton: A dedicated component to navigate back to the previous page, which is particularly useful in multi-step workflows.

By assembling these React components with careful consideration to their props and states, the "Team Information for Final Project" page can be effectively implemented with a focus on user experience and maintainability. Each component is designed to be modular and reusable, ensuring consistency and efficiency in the development process.

Database

For the database component of our project, we decided to employ mock JSON data to simulate the backend interactions. This approach was chosen to facilitate front-end development and testing in the absence of a fully implemented backend system.

Components

• interfaces.ts: This file defines TypeScript interfaces for form-related props and fields used in React components, including options for form elements and Formik field props.
• App.tsx: This file defines the main routing structure of the React application, configuring routes and their corresponding components, including authentication, user management, institution management, roles, assignments, participants, courses, and questionnaire sections.
• StudentTeamsView.tsx: This file defines TypeScript for implementing the Your Team page for students to view.

Files to be modified

• src/App.tsx
• src/utils/interfaces.ts
• src/pages/StudentTeams/studentTeamsView.tsx
• src/pages/StudentTeams/student_teams.tsx

Implementation

• Constructing the Page Layout: The Header and Footer components will be implemented to reflect the navigation and informational structure of the Expertiza platform. This will provide users with a consistent and familiar navigation experience.

• Building the Team Information Section: The TeamNameHeader and MemberTable components will be developed to display the team's name and list of members dynamically, allowing for interaction such as editing the team name and reviewing member details.

• Developing Invitation Functionality: The InviteSection component will be crafted to allow team leaders or members to invite new participants by entering their user logins and submitting the form. Validation checks will be implemented to ensure the accuracy of user input.

• Enabling Team Management: Functionality for leaving the team will be encapsulated in the LeaveTeamButton, ensuring that team members can withdraw from the team with appropriate confirmations and updates to the backend.

• Creating Advertisement Feature: The AdvertisementSection will be developed to facilitate the creation of advertisements for finding new teammates. This will integrate with the rest of the platform's advertisement system.

• Fine-tuning User Interactions: Components such as the InputField and Button will be refined to handle user interactions smoothly and responsively, adhering to React's best practices for state and event handling.

• Ensuring State Management and Logic: Custom hooks like useTeamInfo will be implemented to manage the application state related to the team information page. This will include handling asynchronous operations and updating the UI in response to user actions.

• Polishing Utility Components: Alert dialogs and loading indicators will be polished to ensure clear communication with the user during various operations, such as processing invitations or leaving a team.

• Facilitating Navigation: The BackButton component will be implemented to provide a seamless experience when navigating back to the previous page or the main dashboard.

Design Patterns

Composite Pattern:

This is ideal for UI development as it lets you compose interfaces using nested components (e.g., tables, buttons, forms). React's component model naturally follows this pattern, allowing you to build complex interfaces from simpler, reusable components.

Provider Pattern with Context API:

This pattern is extremely useful for providing a global state or shared data to multiple components, regardless of where they are in the component tree, without prop drilling.

Higher-Order Components (HOC):

HOCs are great for reusing component logic. We would use HOCs to wrap components with additional functionality like error handling, loading states, or access control, which are common requirements in managing team information.

Observer Pattern with Hooks:

We would like to utilize the React hooks useState and useEffect to manage and respond to state changes within your components. This pattern allows us to keep components in sync with the application's state and external data sources efficiently.

Strategy Pattern:

This pattern is useful for forms and validation within your application, this pattern can manage different validation rules or form submission behaviors that might vary between different types of team operations, like creating a new team, adding members, or sending invitations.

Testing Plan

Test 1: Test the "Enter user login" field accepts text input.

Test 2: Click "Invite" without entering data to check for proper validation messages.

Test 3: Enter a valid username and click "Invite"; check if an invitation is sent and reflected correctly.

Test 4: Click "Leave team" and verify if the user is removed from the team member list and the backend is updated.

Test 5: Click "Create" under "Advertisement for teammates" and ensure it leads to the advertisement creation interface.

Test 6: Click "Back" and ensure it returns to the previous page or dashboard as expected.

Test 7: Click "Help" and "Papers on Expertiza" to verify if they open the corresponding resources.

Relevant Links

GitHub repository: https://github.com/msndev/reimplementation-front-end
Pull request: https://github.com/expertiza/reimplementation-front-end/pull/48

Team

Mentor

• Kalyan Karnati <kkarnat@ncsu.edu>

Members

• Sreenitya Mandava <smandav@ncsu.edu>
• Sree Tulasi Shevva <sshevva@ncsu.edu>
• Yogitha Seela <yseela@ncsu.edu>