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.

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.

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.

Team

Mentor

• Kalyan Karnati <kkarnat@ncsu.edu>

Members

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