E2433. Implement UI for the Student Teams: Difference between revisions
| Line 13: | Line 13: | ||
==Design Patterns== | ==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 in React 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. For instance, you could 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:=== | |||
Utilize the React hooks useState and useEffect to manage and respond to state changes within your components. This pattern allows you to keep components in sync with the application's state and external data sources efficiently. | |||
===Strategy Pattern:=== | |||
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 == | == Testing Plan == | ||
Revision as of 20:06, 8 April 2024
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.
Design
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
Files modified
Implementation
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 in React 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. For instance, you could 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:
Utilize the React hooks useState and useEffect to manage and respond to state changes within your components. This pattern allows you to keep components in sync with the application's state and external data sources efficiently.
Strategy Pattern:
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
Relevant Links
Team
Mentor
- Kalyan Karnati <kkarnat@ncsu.edu>
Members
- Sreenitya Mandava <smandav@ncsu.edu>
- Sree Tulasi Shevva <sshevva@ncsu.edu>
- Yogitha Seela <yseela@ncsu.edu>