Designs, diagrams, and use case scenarios - altanborali16/SWE574-Group2 GitHub Wiki

High-level system design

Use-case diagram

Use-case scenarios and activity diagrams

Use-case Scenario #0: Login and Registration: Activity Diagram

Use-case Scenario #1: Community Creation

USER: Yana, Community Enthusiast
ROLE: A user who wants to create a community for book lovers.

PRE-CONDITION: User logged in with valid credentials.

ACTIONS (Completed):

1. Yana clicks the "Create Community" button on the left-side menu.
2. She is directed to the community creation form where she fills in the "Community Name" as "Book Lovers Unite".
3. She writes a description in a markdown editor and checks the "Private" box.
4. She clicks "Create Community" at the bottom of the form.

SYSTEM RESPONSE:

• After clicking "Create Community," a loading spinner appears next to the button.
• Once the creation is successful, a green notification banner appears at the top of the page: "Community 'Book Lovers Unite' created successfully."
• The system redirects Yana to the new community’s homepage.

ACCEPTANCE CRITERIA:

• Community is created successfully, and Yana is designated as the owner of the community.
• The community is listed in her "Joined Communities" list, and the UI updates to show the "Invite Members" and "Manage Community" options available for owners.

Use-case Scenario #1: Community Creation: Activity Diagram

Use-case Scenario #2: Creation of Community Post Template

USER: Mehmet, Community Owner
ROLE: Mehmet wants to create a post template for his cooking community.

PRE-CONDITION: Mehmet is logged in and owns the "Cooking Tips" community.

ACTIONS (Completed):

1. Mehmet navigates to the "Cooking Tips" community.
2. He clicks on the "New Post Template" button, located at the top-right of the community post feed.
3. A modal window opens where he selects the “Field Name”, “Field Type”, and “Required” parameters for the template from the menu, and names the template.
4. Mehmet clicks the "Create Post Template" button.
5. The template becomes available for all other users subscribed to this community, alongside the default post template.

SYSTEM RESPONSE:

• A success message “Your post template has been successfully submitted” pops up, with a confirmation tick.

ACCEPTANCE CRITERIA:

• The new post template is successfully created and can be selected by that community’s members.

Use-case Scenario #2: Creation of Community Post Template: Activity Diagram

Use-case Scenario #3: Joining a Public Community

USER: Ahmet, Avid Reader
ROLE: Ahmet wants to join a public community for movie discussions.

PRE-CONDITION: Ahmet is logged in.

ACTIONS (Completed):

1. Ahmet clicks on "All Communities" in the navigation menu.
2. He sees a list of public communities displayed as cards, and selects the "Movie Buffs" community by clicking "Join" on its card.

SYSTEM RESPONSE:

• The button changes to "Joined" with a green checkmark.
• A small notification appears in the bottom-right corner: "You have successfully joined 'Movie Buffs' community."
• The community is added to Ahmet’s "Joined Communities" list on his homepage.

ACCEPTANCE CRITERIA:

• Ahmet is automatically a member of the "Movie Buffs" community, and its posts are now visible in his feed.

Use-case Scenario #4: Joining a Private Community

USER: Elif, Private Community Seeker
ROLE: Elif wants to join a private community for tech enthusiasts.

PRE-CONDITION: Elif is logged in.

ACTIONS (Completed):

1. Elif clicks on "All Communities" and finds the "Tech Enthusiasts" private community.
2. She clicks "Join" on the community’s card.
3. Later, Elif receives a notification that her request has been approved.
4. She navigates to "My Invitations" and clicks "Accept" on the invitation.

SYSTEM RESPONSE:

• After clicking "Join", a message is displayed: "Request sent to the community owner."
• Once she accepts the invitation, a confirmation message says: "You have successfully joined 'Tech Enthusiasts'."

ACCEPTANCE CRITERIA:

• Elif becomes a member of the "Tech Enthusiasts" community, and its posts become visible in her feed. She sees the community listed in her "Joined Communities".

Use-case Scenarios #3 and #4: Joining a Public/Private Community: Activity Diagram

Use-case Scenario #5: Kicking a Member Out
USER: Ali, Moderator
ROLE: Ali wants to remove an inactive user from his community.

PRE-CONDITION: Ali is a moderator in the "Fitness Freaks" community.

ACTIONS (Completed):

1. Ali navigates to the "Members" tab in the community management panel.
2. He clicks the dropdown menu next to an inactive member’s name and selects "Kick out member."

SYSTEM RESPONSE:

• The member’s name disappears from the list.

ACCEPTANCE CRITERIA:

• The inactive user is removed from the community, and the list updates without the removed member.

Use-case Scenario #5: Kicking a Member Out: Activity Diagram

Use-case Scenario #6: Editing a Profile
USER: Zeynep, Social Network User
ROLE: Zeynep wants to update her profile picture.

PRE-CONDITION: Zeynep is logged in.

ACTIONS (Completed):

1. Zeynep clicks on her profile icon and selects "Edit Profile" from the dropdown menu.
2. She clicks the "Upload Profile Picture" button and selects a new image.
3. She clicks "Save Changes."

SYSTEM RESPONSE:

• After saving, the page reloads with the updated profile picture.
• A message appears: "Profile updated successfully."
• The new profile picture is immediately displayed in the navigation bar.

ACCEPTANCE CRITERIA:

• Zeynep's profile picture is updated successfully and visible across the platform.

Use-case Scenario #6: Editing a Profile: Activity Diagram

Usecase Scenario #7: Advanced Search in Communities
USER: Can, Researcher
ROLE: Can wants to find specific posts related to data science in various communities.

PRE-CONDITION: Can is logged in.

ACTIONS (Not Completed):

1. Can clicks on the "Search" icon in the top navigation bar and selects "Advanced Search".
2. He types "Data Science" in the search bar and selects and types relevant filters (e.g., communities, posts, authors).
3. He selects “Science and Technology” label and he selects the date interval
4. Can clicks "Search."

SYSTEM RESPONSE:

• The system should display a loading spinner.
• Search results should be displayed in a list format, showing titles and excerpts from matching posts or communities.

ACCEPTANCE CRITERIA:
= All posts and communities related to "Data Science" are retrieved and displayed in an organized list.

Usecase Scenario #7: Advanced Search in Communities: Activity Diagram

Usecase Scenario #8: Creating a Post Using a Template USER: Ali, Community Member ROLE: Ali wants to create a post by using a post template in the community.

PRE-CONDITION: Ali is an active user and logged in.

**ACTIONS (Completed) **: -Ali navigates to the community he is a part of. -He clicks on the "New Post" button located at the top-right of the community feed. -A modal window opens where Ali selects a pre-defined post template from the dropdown menu. -He fills out the necessary fields in the template (e.g., Title: “Top 10 Hiking Tips,” Content: “Always carry a map, stay hydrated..."). -Ali clicks the "Submit Post" button.

SYSTEM RESPONSE: -After submission, a loading spinner appears on the "Submit Post" button. -A success notification pops up: "Your post has been successfully submitted." -The community feed refreshes, and Ali’s post appears at the top of the feed in the format defined by the template. ACCEPTANCE CRITERIA: -Ali’s post is successfully created and follows the selected post template. -The post is visible at the top of the community feed, and other members can interact with it (e.g., upvote, comment).

Usecase Scenario #8: Creating a Post Using a Template: Activity Diagram

Usecase Scenario #9: Upvoting a Post
USER: Selin, Active Member
ROLE: Selin wants to upvote a post she likes in the "Music Lovers" community.

PRE-CONDITION: Selin is logged in and is a member of the community.

ACTIONS (Completed):

1. Selin reads a post in the community.
2. She clicks the upvote arrow next to the post.

SYSTEM RESPONSE:

• After clicking, the upvote arrow changes color (e.g., blue), indicating the vote has been registered.
• The vote count next to the arrow increases by one.

ACCEPTANCE CRITERIA:

• The post’s upvote count increases by one, and Selin’s vote is registered.

Usecase Scenario #9: Upvoting a Post: Activity Diagram

Usecase Scenario #10: Archiving Communities
USER: Esen, Community Owner ROLE: Esen wants to archive her community.

PRE-CONDITION: Esen is Moderator and logged in.

ACTIONS (Completed): -Esen navigates to the "Manage Community" section of her community. -She clicks on the "Settings" tab within the management panel. -Esen scrolls down to find the "Archive Community" option and clicks it. -A confirmation modal pops up, asking: "Are you sure you want to archive this community?" -Esen clicks the "Confirm" button.

SYSTEM RESPONSE: -After confirming, a loading spinner briefly appears on the "Confirm" button. -A green notification banner appears: "Community 'Tech Innovators' has been successfully archived." -The community becomes read-only, and a lock icon appears next to its name in the community list. -All posts and content remain visible but no further interactions (e.g., posts, comments, reactions) are allowed.

ACCEPTANCE CRITERIA: -The community is successfully archived and becomes read-only for all users, including members and administrators. -The community remains visible and searchable depending on its privacy settings (public or private).

Usecase Scenario #10: Archiving Communities: Activity Diagram

Event Flow Diagrams

Recommendation service backend design

1. Tag-Based Similarity Matching
   Description: Communities with overlapping tags can be considered similar. The recommendation system will suggest communities that share common tags with the ones the user has already joined.
   How it works:
   When a user joins a community, look for other communities that have common tags with that community.
   The more tags two communities share, the higher the recommendation score.
2. Steps to Implement
   a. Tag Assignment to Communities
   Each community will have predefined tags that represent their focus areas (e.g., #basketball, #sport, #highlights).
   Ensure that each community has a set of relevant tags and allow the community creators to define these tags when setting up the community.
   b. Storing Tag Data
   Database Structure: Store community information along with their associated tags in a database table (e.g., Communities and CommunityTags).
   Example structure:
   Communities Table: CommunityID, CommunityName
   CommunityTags Table: CommunityID, Tag
   You will also need a table that tracks user membership in communities:
   UserCommunities Table: UserID, CommunityID
   c. Tag-Based Recommendation Algorithm
   Similarity Calculation:
   When a user joins a community, retrieve all the tags for that community.
   Query the database for other communities that share one or more of these tags.
   Calculate a similarity score based on the number of common tags.
   Example similarity score formula:
   similarity score = Number of common tags / Total tags in both communities

Recommendation Process:
When a user joins or interacts with a community (e.g., BasketballLovers), retrieve the tags of the joined community (#basketball, #sport, #highlights).
Find other communities that have one or more of these tags (e.g., FootballFans has #sport, #football, #discussion).
Rank these communities by the number of matching tags and suggest the ones with the highest similarity score.

Badge system: backend design

UI mockup designs

Login/register screens

Home feed screen

My feed screen

Communities page

Community screen

Create community screen

New version, with user-specific badges

Create template screen

Create post screen

Comments & Comments in comments screen

Users who liked a post screen

Advcanced search screen

Proof of concept login page written with React, for serving both web and mobile clients

The webpage in a desktop browser:

A download button creates an app on desktop show below :

And a desktop shortcut:

**The webpage in a mobile browser : **

Downloaded to main screen (see React shortcut):

Presentation to user on a mobile client (notice the absence of a URL):