MUC’s

University’s Students Social Network

Senior Project
By

Rachid Al Mustafa & Ibrahim Kassem

Submitted to the School of Arts & Science of

the Lebanese International University

In part of fulfillment of the requirements for the degree of

BACHERLOR OF SCIENCE IN
COMPUTER SCIENCE AND INFORMATION TECHNOLOGY

Supervised by: Dr. Bassel-Dhaine

Spring 2022-2023
Dedication:
First of all, we will dedicate this project to our almighty God, who gave us strength and

knowledge for our everyday life.

To our beloved parents and friends, for always supporting us in our studying and work, and for

helping us find and realize our potential.

Last to our respected professor Bassel-Dhaine for leading us step by step to reach our aim and to

overcome every single obstacle we faced during the time we worked on our project and even

before that during our three years of studying.

II | P a g e
Acknowledgment:
We have really worked hard and put so many efforts in our "MUC’s" project. However, it would

neither have been completed on time nor looked like we wanted without the kind and special

support of some individuals and organizations. We would like to extend our sincere thanks to all

of them.

We are highly indebted to our professor Bassel-Dhaine for his guidance and constant supervision

as well as for providing necessary information regarding our project.

My thanks and appreciations also go to our parents and friends for their encouragement that

helps us finish our project perfectly and on time.

III | P a g e
Abstract:

We are creating an University’s Students Social Network that allows the students from same university or
different to communicate with each other and make friends and join the communities that they interested to.

The University’s Students Social Network present many features for admin and advisor and members.
To explain more. The most important features for members are to see a list of the university’s ,and communities in
the website ,and see the members of the website that signed in , and he can see their details like username and their
university Only .And the member can make a friends from different universities and communities , contact with
them by chatting them inbox ,also the member can Join the community that he interested for it from the same
university that he belongs .
The advisor can make all the features of member but he can create a community to his/hear university and delete
it,Also the admin can create, and remove community for all universities and see the access the status of universities
students and communities , like which the university’s students create the highest percentage of users,which
community have the most number of member’s,he can also check the details that the normal member or the
advisor can access from his account with other modification update ,create ,delete.

e
List of Tables:
Table 1- Sign up use case.............................................................................................................................18

Table 2 – Login in use case..........................................................................................................................19

Table 3 – List of universities.......................................................................................................................20

Table 4 – List of communities to each university........................................................................................21

Table 5 – List of members of university......................................................................................................22

Table 6 – List of members of each community...........................................................................................23

Table 7 –Pop Up members ..........................................................................................................................24

Table 8 – Chat room....................................................................................................................................26

e
List of Figures:
Figure 1- Use Case Diagram........................................................................................................................17

Figure 2 - ER-Diagram................................................................................................................................35

Figure 3 - Relational Diagram.....................................................................................................................36

Figure 4 – Sign up........................................................................................................................................38

Figure 5-Sign In ...........................................................................................................................................38

Figure 6 – L i s t o f u n i v e r s i t i e s ..................................................................................................39

Figure 7 - List of communities to each university.......................................................................................39

Figure 8 - List of communities to each university ......................................................................................40

Figure 9 - Chat room.....................................................................................................................................41

Figure 10 - Pop Up members.......................................................................................................................41

Figure 11 – Advisor add community...........................................................................................................42

Figure 12 – Advisor Edit community..........................................................................................................42

Figure 13 – Admin view analysis by chart..................................................................................................42

Figure 14 – Admin add community local .....................................................................................................43

Figure 15 – Admin Edit community local...................................................................................................43

Figure 16 – Edit community local...............................................................................................................44

Figure 17 – Chat all members......................................................................................................................44

Figure 19 – Chat all community local .........................................................................................................45

69

VIII | P a g e
Table of Contents:

Contents
Dedication…........................................................................................................................................II
Acknowledgment................................................................................................................................III
Abstract.............................................................................................................................................IV
List of Tables.....................................................................................................................................V
List of Images....................................................................................................................................VI
Chapter 1......................................................................................................................................................11
1.1-Introduction:..........................................................................................................................................11
1.2-Objective:...............................................................................................................................................11
1.3-Scope:....................................................................................................................................................12
1.4-Technology Constraints.........................................................................................................................12
Software needed: Visual studio code, Xampp, Web browser....................................................................12
1.5-Problem..................................................................................................................................................13
1.6-Solution..................................................................................................................................................13
Chapter 2......................................................................................................................................................14
2.1-Functional and Conceptual Study..........................................................................................................14
2.1.1-Functional Requirements................................................................................................................14
2.1.2-Nonfunctional requirements...........................................................................................................15
Security................................................................................................................................................15
Performance:........................................................................................................................................15
Maintainability.....................................................................................................................................15
Reliability.............................................................................................................................................15
2.2-UML Use Case Diagram & Scenario................................................................................................16
2.2.1-Use Case Diagram......................................................................................................................16
2.2.2-Use Case scenarios (customer actor)..........................................................................................18
2.2.3-Use Case scenarios (Admin actor)..............................................................................................30
Chapter 3......................................................................................................................................................34
3.1-System Design:......................................................................................................................................34
3.1.1-ER-Diagram....................................................................................................................................34
ER Diagram Figure:.............................................................................................................................35
Relational Diagram Figure:..................................................................................................................36

IX | P a g e
Chapter 4......................................................................................................................................................37

4.2.16- Sign Up:...................................................................................................................................58

4.2.17-Sign In:......................................................................................................................................60
4.2.18- List of universities:..................................................................................................................61
4.2.19- List of communities:................................................................................................................62
4.2.20- List of members:.......................................................................................................................63
4.2.21- List of communities to each university:..................................................................................65
4.2.22- List of member to each university:..........................................................................................67
4.2.23- List of members to each community:......................................................................................68
4.2.24- List of community local:..........................................................................................................69
4.2.24- Chat local:................................................................................................................................69

Chapter 5......................................................................................................................................................70
5.1 Conclusion:........................................................................................................................................70
5.2 Future Work.......................................................................................................................................70
References................................................................................................................................................71

X|Page
 Chapter 1
In this chapter, we are going to state the problem that we find, and how our project helps in

solving it, in addition to mentioning technology constraints and our objective, then explaining all

of them in details.

1.1-Introduction:

In today's fast-paced world, university students often face challenges in connecting and building
meaningful relationships with their peers. Our project aims to address this by developing a web-based
social network exclusively for university students. This platform provides a convenient way for students to
sign in and access a list of universities they belong to.

Once signed in, students can explore and join communities associated with their university, creating a
space where they can connect with like-minded individuals who share similar academic interests and
passions. Within these communities, students can interact with fellow members, discover new friendships,
and engage in conversations that foster personal and academic growth.

Furthermore, our platform goes beyond the university-specific communities. Students can also explore
and connect with other students who have signed up using their university credentials, expanding their
social network beyond their immediate campus. This opens up opportunities to make friends from
different universities, exchange ideas, collaborate on projects, and support each other's personal and
professional endeavors.

Our project aims to enhance the university experience by providing a dedicated social network for
students, enabling them to forge meaningful connections, engage in fruitful discussions, and establish a
supportive community that extends beyond their immediate campus environment.

1.2-Objective:

The main Objective of our platform (website) for our "MUC’s" project that is specified by view

a universities and communities and students in the website and make friends and join the

community that he interested to it and make a chat with them, is to get rid of all difficulties that

can be faced to reach to students that he want and get information about the idea that he want.
1.3-Scope:

This system describes the modeling and the requirement analysis of the system; it

aims to get rid of what students faces. This system can be implemented to the

students in the Lebanon county. The system recommends to facilitates the

communication between other any time and available 24*7.

1.4-Technology Constraints:

Software needed: Visual studio code, Studio 3t, Web browser

Languages: Express,javascript,, html, css, mongosDb

Frameworks & libraries: tailwind, socket, axios,React.

Hardware: laptop.
 1.5-Problem:

Now adays university students face many problems, some of which are:

• Find and create new relations with other people who can share interests for you
• The lack of a common ground for universities students to communicate.
• Shar common problems that face the students of common major/communities

1.6-Solution:

1. Interest-based groups: Create spaces for students with similar interests to connect and build relationships.
2. Cross-university communication: Establish channels for students from different universities to interact and
communicate.
3. Community-specific discussion boards: Provide platforms for students in the same major or community to
discuss common problems and share experiences.
Chapter 2
This chapter describes both functional and non-functional requirements for our project. In

addition to that it shows the UML use cases and scenarios with all related details.

2.1-Functional and Conceptual Study

2.1.1-Functional Requirements:

1- Sign up: Every students should sign up to start make actions on this

website

2- Login: The system allows customers to login easily to view their own orders

using their email and password.

2.1.2-Nonfunctional requirements:

Security:

● Login: Any users who make use of the system needs to hold a Login email and password.

● Administrator rights: The admins can view as well as alter any information he want and

he can add advisor for community and create a community for all university’s and view

community who has more members joined it .

Performance:

1- Fast Response Time for User Login (The average response time for user

login after entering email and password should be no more than 3 secs and

the maximum response time should be 10 seconds),

2- Fast Average Time for Rendering a Page (After clicking on any link the

result should be rendered within no more than 1 second in average and it

should not take more than 10 seconds in maximum),

3- Minimum number of concurrent users: The website should be able to

address at least 1000 users concurrently.

4- If any internet problem takes place, a loading page will be opened to

inform the user about his connecting problem.

Maintainability:

● Errors: The system will track every mistake.

Reliability:

● Availability: The system is available all the time (24*7 available).

2.2-UML Use Case Diagram & Scenario
2.2.1-Use Case Diagram

Students actor uses our website to make chat online. Top level use cases are Browse, Login,

Search, choose university, join community, view details of members, chat with member’s

and community’s and Add Friends . Browse use case can be used by student as top level use

case if the students only wants to search for community and university and see details of

member. Login use case allows student to login to his page and view his/her information.

Sign up use case is included in login.

For the Admin actor there are several use cases which will be discussed below with details.

(see figure 1)
Figure 1- Use Case Diagram
2.2.2-Use Case scenarios (customer actor)

In this part we will be explaining all of the mentioned use cases of the user in details, regarding
primary actors, main flow, and the alternative one. In addition to a short description for each use case
making all points clear.
Login use case
Check table 1 – login use case scenario to see related details regarding login use case.

Table 1- login use case

Use case ID: R&I 1

Use case name: Login
Created by: Ibrahim kassem & rachid al Mustafa
Date created: 1 June 2023

This use case allows the students to login into the system to access the
relevant functions according to the Students’s role. To login to the
Description: system, all Students have to enter their email & password.
Students can save their password so that the next time they can login
faster.

Primary actor: Users

Secondary actor: None
Included use cases: Sign up
Extended use cases: Logout
Preconditions: The students has to sign in first.

1. The user enters valid email and password.

2. The user submits email and password.
3. The system validates the email and password.
Main flow:
4. The system verifies the email and password.
5. The use case ends
 3a. Missing email or password:
1- The system prompts for user email and password. 2-
The use case resumes at main flow step 1.
Alternative flow: 4a. Invalid email or password:
1- the system displays Invalid email or password message.
2- The system prompts for students email and password.
3- The use case resumes at main flow step 1.

Search use case

For more details about search use case, see table 2 – Search use case scenario

Table 2 – Search use case

Use case ID: R&I 2

Use case name: Search
Created by: Rachid al Mustafa and Ibrahim Kassem
Date created: 1 June 2023

This use case allows the user to search for specific university or
community or member. To find , it is enough for the user to enter the
Description:
name in the search place to view all related searches.

Primary actor: User

Secondary actor: None
Preconditions: None
Post conditions: The system outputs the results of searched items

1. The member enters item's name to search for.

2. The system receives the search query.
3. The system checks the presence of searched item.
Main flow:
4. The system displays all related.
5. The use case ends

1a. No results found:

1- The system displays a message alerting the student.
Alternative flow:
2- The use case resumes at main flow step 1.
Browse use case
See table 3 – Browse use case scenario, to check all details related to this case from the actors, to main
and alternative flow, and so on.

Table 3 – Browse use case

Use case ID: R&I 3

Use case name: Browse
Created by: Rachid al Mustafa and Ibrahim Kassem
Date created: 1 June 2023

This use case allows the student to view all university’s, community’s,
and member’s found in our website. It also allows the member to join
Description:
community and Add friend and chat with them. Briefly it shows the
Student our whole website.
Primary actor: User
Secondary actor: None
Preconditions: None
Post conditions: The website opens to the Members.

1. The Member enters our website.

Main flow: 2. The system opens the website home page to the user.
3. The use case ends

2a. No internet connection:

1- The system displays a loading page until connection returns.
Alternative flow:
2- The use case resumes at main flow step 2.
Sign up use case
For more details regarding sign up use case, see table 4 – sign up use case scenario.

Table 4 – sign up use case

Use case ID: R&I 4

Use case name: Sign up
Created by: Rachid al Mustafa and Ibrahim Kaasem
Date created: 1 June 2023

This use case allows the Member to sign in to our website. For signing in
the Member needs to enter username, email, password,and occupation
Description: and then university. After successful sign in the member will have a valid
account to login to our website.

Primary actor: Member

Secondary actor: None
Preconditions: None
Post conditions: Member can login to his valid account

1. The Member enters valid username, email and password.

2. The user submits the username, email and password.
Main flow: 3. The system validates the username, email and password.
4. The system allows the customer to login to his account.
5. The use case ends

3a. Missing username, email or password:

Alternative flow: 1- The system prompts for customer username, email or password.
2- The use case resumes at main flow step 1.
 Choose Category use case
See table 5 – choose category use case scenario to check information related to primary and secondary
actors, in addition to brief description of the use case and its flow.

Table 5 – choose category use case

Use case ID: R&I 5

Use case name: Choose University
Created by: Rachide al Mustafa anad Ibrahim kassim
Date created: 1 June 2023

This use case allows the Member to choose one of the university’s found
in our website. The buttons next to the name of university is members and
Description: community , the members button responsible for take the user into a
page that displays all the member of this university you select,and the
community button is for displays all the community to the selected
university
Primary actor: Students
Secondary actor: None
Extended use cases 1. show university
Preconditions: None
Post conditions: All university found bellow the chosen community’s and members will be
displayed.

1. The Member chooses one of the University.

2. The system looks through University lists.
Main flow:
3. The system displays all community/students bellow to the selected
university.
4. The use case ends

2a. No internet connection:

1- The system displays a loading page until connection returns.
Alternative flow:
2- The use case resumes at main flow step 2.
View Products use case
See table 6 – view community scenario to check information related to primary and secondary
actors, in addition to brief description of view products use case and its flow.

Table 6 – view community

Use case ID: R&I 6

Use case name: View Community
Created by: Rachid al Mustafa and Ibrahim Kassem
Date created: 1 June 2023

This use case allows the Member to view all community’s in a

specific university.
Description:

Primary actor: Student

Secondary actor: None
1. View community
Extended use cases:
2. Join community
Preconditions: The Member must choose a university first
Post conditions: All options related to the his university will be available to the member

1. The system opens the page of the Community.

2. The Member browses in the opened page.
Main flow: 3. (Extension point: The Member can choose whether to make join
community that he is browsing).
4. The use case ends

2a. No internet connection:

1- The system displays a loading page until connection returns.
Alternative flow:
2- The use case resumes at main flow step 2.
Make Order use case
See table 7 – View member scenario to view member information userName, in addition to brief
description of university and joined community use case and its flow.

Table 7 – View member

Use case ID: R&I 7

Use case name: View Member
Created by: Rachid al Mustafa and Ibrahim Kassem
Date created: 1June 2023

This use case allows the user to see all the members in our
website.and ech member has 2 buttons Add and Details.
Description:

Primary actor: Student

Secondary actor: None

1. Add friend
Extended use cases:
2. view details

Included use cases: Login

Preconditions: None
Post conditions: Details popup opens after click on the button that depend on the member
1. The Student chooses an member by holding on details button.
2. The system opens the details popup related to the member
3. The use case ends
Main flow:

3a. No internet connection:

1- The system displays a loading page until connection returns.
Alternative flow:
2- The use case resumes at main flow step 2.
View About us information
See table 8 – Chat room use case scenario to make chat with community or member that he friends
with .

Table 8 – Chat room

Use case ID: R&I 8

Use case name: Chat Room
Created by: Rachid al Mustafa and Ibrahim Kassem
Date created: 1 June 2023

This use case show a list of community that the member was joined and
Description: members that he friends to, and shows chat room that the member start
chatting with the community or member that he selected .

Primary actor: Student

Secondary actor: None
Extended use cases: 1. chat
Preconditions: None
Post conditions: None

1. The user opens chat page.

2. The system displays a list of contacts and chat room
Main flow: 3. The use case ends

2a. No internet connection:

1- The system displays a loading page until connection returns.
Alternative flow:
2- The use case resumes at main flow step 2.
Chapter 3
This chapter describes the system design, including the data base of our project, the related tables

and the relations between them.

3.1-System Design:

3.1.1-ER-Diagram

This ER (Entity Relationship) Diagram represents the University’s Students social network. It

shows all the instruments of database tables and the relations between them. The main entities of

the MUC’S are: products, orders, user's data, users, category, favorites, order details and contact.

(see figure 2)

MUC’s system entities and their attributes:

This ER (Entity Relationship) Diagram represents the University’s Students social network. It shows all
the instruments of database tables and the relations between them. The main entities of the MUC’S are:
Universities, Communities, Users, chatDB. (see figure 2)

MUCs entities and their attributes:

Universities: 'ID', 'Name', 'Acronym', 'website', 'Students', 'Advisors', 'Communities', with 'ID' as primary
key, 'Students' and 'Advisors' as references for the Users Entity, and 'Communities' as reference for the
Communities Entity.

Communities: 'ID', 'Name', 'Members', with 'ID' as primary key and 'Members' as references for the Users
Entity.

Users: 'ID', 'Name', 'Email', 'Password', 'Avatar', 'Occupation', ''isAdmin, 'isAdvisor', 'isVerified',
'University', 'Communities', 'Friends', with 'ID' as primary key, 'Communities' as reference for the
Communities Entity, 'University' as reference for the Universities Entity, and 'Friends' as reference for
the Users Entity. 'isVerified' is the boolean that indicat wether the user has done the nessecary steps to
become a verified user. 'isAdmin' and 'isAdvisor' are the booleans that check the autherization status of
the user, wether he is Student, Advisor, or Admin.
 Conversation: 'ID', 'Members', with 'ID' as primary key and Members shows the users inside a
conversation.

Messages: 'ID', 'ConversationId', 'Sender', 'Text', with 'ID' as primary key and 'ConversationId' as
reference for the Conversation Schema.

Diagram Figure:

Figure 2 - ER-Diagram
 Relational Diagram Figure:
See figure 3 – Relational Diagram to see all the attributes of each entity, in addition to the
relations between entities.

Figure 3 - Relational Diagram

Relational Diagram Figure:

See figure 4 – Entity Structure to see all the Structure of entity, in addition to the
relations between entities.
figure 4 – Entity Structure
 Chapter 4
This chapter describes the whole view of our website, it shows the design our projects in addition

to stating the main role of each page or button.

Implementation:

4.1-Introduction:

1. Homepage:

 The homepage will feature a clean and intuitive design. It will display the university's logo, name, and a

welcoming message.

 A search bar at the top will allow users to search for other students, groups, or specific content.

 The main section of the homepage will show a personalized news feed, displaying posts, updates, and

events from the user's friends, groups, and university-related pages.

 There will be a sidebar displaying shortcuts to important sections like profile, messages, notifications, and

settings.

2. Profile Page:

 Each user will have a profile page where they can showcase their personal information, profile picture,

and cover photo.

 The page will include sections for the user's bio, education details (degree, major, graduation year), and

contact information (email, phone number).

 Users can add and organize their personal photos, create photo albums, and share them with friends.

 There will be a timeline or activity log that displays the user's posts, photos, and interactions in a

chronological order.

3. Friends and Connections:

 Users will have the ability to search for other students by name, major, or interests, and send friend
 requests.

 The Friends section will display the user's current friends, and they can organize them into different

categories or lists.

 Users will be able to see the activity of their friends, such as their recent posts, photos, and updates.

4. Groups and Communities:

 Users can join or create different groups based on their interests, clubs, or courses.

 Group pages will have a description, member list, and a discussion board for group members to interact

and share information.

 Group administrators can post announcements, create events, and manage the group's settings.

5. Messaging and Notifications:

 Users will have an inbox where they can send and receive private messages from their friends.

 Notifications will be displayed in a separate section, informing users about friend requests, event

invitations, group updates, and other relevant activities.

6. Settings and Privacy:

 Users will have control over their privacy settings, allowing them to manage who can view their profile,

posts, and personal information.

 They can customize their notification preferences and decide what type of updates they want to receive.

 The settings page will also include options to change account details, password, and profile visibility.

Remember, this is just a basic overview, and the actual design and functionality can be customized based on your

specific requirements and target audience.

4.2- Project’s Parts:

4.2.1-Login page:
Our login is the first page that appears after visiting our website, it contains 2 inputs : email &
password , and a background image and the logo of our graduation project and contains if the user
doesn’t have a account he can press on a signUp button and start signUp. See figure 4
Here the user after pressing on sign up button it take the user to signUp page to load some details about him
self.. (see figure 6)

Hon sowar lal drop down

Here the user after Sign Up and Login it will takes him to a page that displays a personal information ,
The user can upload his profile picture and he can update his password and see his username ,also it shows
him the community’s that he joined and the list of friends that he adds ,also he can remove the friend or the
community that he doesn’t interested for .Note that the Side bar is a basic content on all pages to moves
between the pages (see figure 7)

Figure 7

And here the example when the user change his password (see figure 8)
 Figure 8

In addition When the user select he University page from the Side bar it will take him to a page only display the list of the
universities on the table . The table contains a Id for the each university in a row , And Name of the university and 2 buttons
:Communities and students each of one has a specifiec functionality As shown on the Figure 9. (see figure 9)

Figure 9
Note that when you search for a Specific university on the the search button it diplays only the university the user entered
as shown in the figure.
(see figure 10)

Figure 10

However if the user press on Communities on the side bar he will moves to communities page and it will
display like the above page but the list of communities that created on our website and they can the user join it
and see the members that joined a specific community from different universities it is local.
In addition when the user want to join this community , he can search for the community that he want and he
needed to press on the join button as see at the bottom
Here is the page of the member ,it will diplays when the user presson the members button on the side bar ,it will
take the user to its page and displays the members that regester on the website with own username and university
and each of one has a details button that can anyone press On it and see the username of him/her and the university
who from and the joined community this information is displayed by popup and ech of one has a add button can
any one add the member that he wants the add button likes make this member favorite to me to chat with him
later.

Note that the user can filtered the table by All,Advisor,students

This is the chat Page ,it contains the list of communities,following,uni,when the user want to start a chat with
community or a private chat with some one he must select from the list,

This page displays the room that changes every time when the user select some one, or community it will displays
like a whatsap.
We have some of functionality of the advisor can also do. Like delete ,update,add,community
from the same university that he advised for it.

After pressing on the + icon it will be diplays a popup that let the advisor to add community.

41 | P
When the advisor want to edit a community by deleting it or updates it name he must press on button edit
and it displays a popup like this:

42 | P
On this section lets see some of functionality and ability of admin that can view on his personal
information page ,that shows the pi-chart
That gives the percentages of the top 4 universities that reached in our website and 4 communities that
the members joined throught it :

The admin have a same function of adding and Editing(delete,update) ,but in addition of that the
admin use the local ,when the admin create a new community it created and displays on local
community and in the universities communities .

43 | P
this is where it displays:

Here is example when the admin want to change the name of community:

44 | P
In addition to the chat room , the admin he can chat with all of users,community in the website
that he wants .here is the example:

45 | P
46 | P
 Chapter 5
5.1 Conclusion:

In conclusion, MUCs is a valuable platform for individuals looking to connect with others who share their
interests and passions. By providing a space for universities and communities to come together, MUCs
helps foster a sense of belonging and encourages individuals to learn about new cultures, ideas, and
perspectives.

We encourage you to explore MUCs for yourself and discover all the amazing communities and
connections that await you!

5.2 Future Work:

MUCs offers a range of features that make it a valuable platform for individuals looking to connect with

others who share their interests. One of the key features of MUCs is its focus on universities and

communities, which allows users to join groups based on their interests, hobbies, or occupations.

Users are classified as either students or advisors, and can engage in private or group chats within the

community they share. This allows for meaningful conversations and connections to be made, and

provides a space for individuals to learn from each other and grow together.

47 | P
References

Developers, W. (n.d.). chatGpts. Retrieved from w3schools.com: ChatGPT (openai.com)

github. (n.d.). Retrieved from github.com: https://github.com/
stackoverflow. (n.d.). Retrieved from stackoverflow.com: https://stackoverflow.com/

48 | P