This is Team D's project repository. Shall be tackling the problem of helping graduates/students find a reliable job by cutting down the search method or type that other sites use.
The comments from Deliverable 5 on this document must be addressed.
For any comment that was not addressed, deduct -2 points at minimum, or up to the amount of points originally deducted.
This will be based off your domain model, sequence diagrams, and architecture design. The new things you will make: 1) a design class diagram (DCD) which must include types and attributes and methods of all classes, and all functions, and 2) apply at least one design pattern in your class design/diagram.
Here is a template, which also links to an example for how to represent React components (which we have mostly implemented as functional components) (see on left next to comment: Example "Class" Diagram with React functional components represented as "ViewControllers).
Note that this is not technically a UML class diagram, instead it’s a similar representation I invented for this class. Here are links to more complicated ways of using UML to model web applications (which has grown into a book). In general, there is no “right” way to model, the purpose of these diagrams is to help you collaborate and represent what’s important about your application components and how they interact.
Team F 2022 is a good example that uses the template above and their basically matches it. The goal of making this design document is to map out your implementation, check the interfaces between components will actually work, agree on the types, attributes, and arguments for data and functions, agree on the hierarchy of components, agree on all the files and where functions, classes, interfaces, type declarations will be.
Here are reasonable examples for how to represent your domain objects/classes (e.g. Student, Card, StudySession, Friend, User) from past years. Some of these have views and controllers on them, those are not good examples for representing React components:
Limitations: functions with same names but in different namespaces won’t be visualized because the tool can’t tell the difference between them (because it is a static analysis tool and doesn’t actually run the code)
Review relevant class sessions and slides before doing this. Feel free to search online for class diagrams and domain models for similar domains as yours for inspiration, just cite them in your final detailed technical design.
The comments from Deliverable 5 on this document must be addressed.
For any comment that was not addressed, deduct -2 points at minimum, or up to the amount of points originally deducted.
This will be based off your domain model, sequence diagrams, and architecture design. The new things you will make: 1) a design class diagram (DCD) which must include types and attributes and methods of all classes, and all functions, and 2) apply at least one design pattern in your class design/diagram.
Here is a template, which also links to an example for how to represent React components (which we have mostly implemented as functional components) (see on left next to comment: Example "Class" Diagram with React functional components represented as "ViewControllers).
Note that this is not technically a UML class diagram, instead it’s a similar representation I invented for this class. Here are links to more complicated ways of using UML to model web applications (which has grown into a book). In general, there is no “right” way to model, the purpose of these diagrams is to help you collaborate and represent what’s important about your application components and how they interact.
Team F 2022 is a good example that uses the template above and their basically matches it. The goal of making this design document is to map out your implementation, check the interfaces between components will actually work, agree on the types, attributes, and arguments for data and functions, agree on the hierarchy of components, agree on all the files and where functions, classes, interfaces, type declarations will be.
Here are reasonable examples for how to represent your domain objects/classes (e.g. Student, Card, StudySession, Friend, User) from past years. Some of these have views and controllers on them, those are not good examples for representing React components:
Example 1
Design class diagram in two parts at end and design patterns
(domain model that the above design class diagram was based on)
Example 2
Class diagram without relationships is the first five pages of this
Class diagram slices (to make more manageable/understandable)
You can practice your skills for the detailed technical design by doing this short exercise and then compare against this solution.
Here are some tools for generating diagrams of your application from your code. You may find them useful.
Whole application: https://github.com/bakunin95/wavi
Works reasonably well
View focused: https://github.com/React-Sight/React-Sight
Only install this as click-to-run or inside its own chrome profile, so that it doesn't slow down regular browsing
Whole application: https://github.com/scottrogowski/code2flow
Limitations: functions with same names but in different namespaces won’t be visualized because the tool can’t tell the difference between them (because it is a static analysis tool and doesn’t actually run the code)
Review relevant class sessions and slides before doing this. Feel free to search online for class diagrams and domain models for similar domains as yours for inspiration, just cite them in your final detailed technical design.