creating a social network web application for discovering old music and entertainment

14 UC_01 Register A guest registers an account in the system Guest UC_02 Login A guest authenticates with the system to use other features Guest UC_04 Logout The actor logs out of the sy

Project Description

Project O verview

The project is about creating a social network service that allows users to exchange content regarding vintage music or just simply use the platform to entertain The website functions as a radio with a variety of channels that can also facilitate connections The web application is built upon the Strapi and Remix frameworks

The application is a web-based network targeting people who share their interests in vintage entertainment, particularly music The application can be classified as a niche network, which aims to unite a specific group of people, to help users to get closer to people sharing their interests and exchanging ideas.

The Purpose of the Project

1 Why build a social network service to discover vintage aesthetic music?

The three main reasons explained why there should be a platform for discovering vintage aesthetic music are as follows Firstly, music is an art form with which we are constantly in contact Music is also the essence of a culture; it may be thought of as a database for storing all information and methods of survival Secondly, in the globalization era, many kinds of music come to Vietnam and slowed down the development and the uniqueness of Vietnamese music And the last but not least, there are also not enough non-biased platforms to research old music and to study the cultural and historical data at the time

2 Why choose the Strapi and Remix technology solution stack?

Strapi is an open-source headless CMS that gives developers the freedom to use whatever tools and frameworks they want and allows editors to work with whatever content they want Strapi can save a significant amount of time when developing the project's API

Remix is a full-stack web framework that allows you to focus on the user interface while working back through web basics to offer a fast, sleek, and durable user experience that deploys to any Node.js server and even non-Node.js edge environments like Cloudflare Workers

In conclusion, by using these two frameworks as a core for us in programming the project can be developed focusing more on the business value

The project's goal is to create a web application for a social network service that allows users to exchange content about historical music or simply use the platform to entertain themselves The website functions as a radio with a variety of channels that can also facilitate connections.

The Scope of the Project

From a cultural perspective, Korean popular culture has become dominant in East and Southeast Asia over the last two decades, which is coined with the term

“Hallyu” (The Korean Wave) Korean television programs, such as the Netflix series are increasingly penetrating different countries, including Vietnam According to a survey of 1,114 students conducted by Dr Phan Thi Thu Hien in 2012, students tend to have a positive report with K-movie (59%) and K-pop (50%) There are no convergence views despite increasing scholarship and media coverage of the role of

3 Korean cultural products because of several different factors – including political, historical, economic, and cultural ones

To explain this phenomenon, the framework of cultural imperialism is a reliable thesis to explain the Korean cultural market in the globalization market s ince the one-way flow of cultural products from Korea to other countries is similar to the one-way flow of cultural products from Western countries to developing countries

The consequence of cultural dominance, which is similar to the consequence of colonialization, results in a variety of effects Individual experiences might be influenced by the societal repercussions of having a dominating culture Individuals from a culture may assimilate the dominant culture's values and norms to acquire access to dominant culture privileges The country with the dominant culture in fact can produce values from the culturally dominated countries from many sources the same as imperialism Hence, it is necessary to promote the original cultural products of a country to preserve and produce values from it

The most obvious evidence of getting rid of cultural dominance is the minorities in Vietnam Despite having to inscribe themselves to the Vietnamese culture, the minorities still can define themselves with many cultural assets, especially musical products According to Vietnam Tourism (2018), the traditional costume of many other minorities are modified to fit the modern lifestyle but the Bo

Y people still preserve their costumes with unique technical skills

- Understandability: The application aims at building up a community for music enthusiasts and artists

- Learnability: The user interface is simple enough with a powerful search bar that helps users in finding people with the same taste or their favorite artists

- Interoperability: A user can be authenticated with Facebook or Twitter before accessing any further features

The user can easily connect by using subscribe features and direct messaging The users can also share their music tastes through the “Hear With Me” features The application does not focus on any categories of music

- Understandability: The application aims at building up a community with user- generated content and drawing people who are interested in fishing

- Learnability: The user interface is simple, and there are also charts for users to analyze data on the fishes and seasons

- Interoperability: The user can authenticate with Google and Facebook or Email The user can use the site as a community blog site and connect and not the same as a social network

- Understandability: The application aims at building up a community where everybody can participate in music The application does not target any specific music genre

- Learnability: The user interface is simple, the user can simply go to the application and listen to music or they can share their songs

- Interoperability: Can easily integrate with other social network services or major authentication vendors

The Requirements of the Project

Description The software shall authenticate users before them using any other feature

Rationale To personalize the experience and improve the authenticity when using the service, users must be authenticated with the application

Fit Criterion The application should allow users to register with a unique username and password

Description The software shall provide users with real-time communication

Rationale As a social network service, real-time communication helps users share their experiences quickly with other people

Fit Criterion The application must allow users to chat and receive responses in real-time

Table 3 Functional requirements: Real-time chatting

Description The software shall allow users methods to add their wanted users to their contact list

Rationale As a social network service, when finding their favorite users or acquaintances, users can add the users to their contact list

Fit Criterion The application must allow users to add or delete other users to or from their contacts

Table 4 Functional requirements: Manage contacts

Description The software shall allow users to live stream the songs on internet radio

Rationale As an internet radio, users can live stream songs for entertainment or just to find something old but new to them

Fit Criterion The application must have an mp3 player component that allows users to stream audio from the server

Table 5 Functional requirements: Internet radio

Description The software shall allow users to share their thoughts by blogging

9 Rationale As a social network service, sharing thoughts as posts help users to find users sharing their music taste or ideas more easily

Fit Criterion The application must provide users with media for blogging and reading blogs

2 Non-functional Requirements a Usability Requirements

Description The product shall make users want to use it

Rationale Just like cooking, mixing drinks also needs practice That is why the product should encourage people to use it to improve their skills

Fit Criterion The application must be as personalized as possible

Table 7 Non-functional requirements: Encouragement

Description The product shall use symbols, images, and words naturally which are understandable for users of all ages

10 Rationale Using symbols and images can reduce the time users try to figure out what the function does and what is going on with the application

Fit Criterion The application must use icons and short keywords for content on the website more accessible

Table 8 Non-functional requirements: Intuition

Name No need for prior knowledge

Description The product shall be easy for anyone who has no prior knowledge of mixology to use and zero time learning how to use the application

Rationale The main purpose of the application is a bridge to the mixology so making the application complicated is not necessary

Fit Criterion The information is not too overwhelming for new users

Table 9 Non-functional requirements: No need for prior knowledge b Look and Feel Requirements

Description The product shall appear informal and friendly to users

Rationale Since to make users build up their new habits, delivering them an enormous amount of information is not necessary Fit Criterion The content is enjoyable and could be less formal

Table 10 Non-functional requirements: Informality and Friendliness

All the information needed to be gathered is listed in the below diagram:

Figure 4 Entity Relationship Diagram of the software

System Analysis and Design

Use Cases

Figure 5 “Manage” use cases in specific

Figure 6 Overall use cases of the project

UC_01 Register A guest registers an account in the system

UC_02 Login A guest authenticates with the system to use other features

UC_04 Logout The actor logs out of the system

UC_05 Request an Author account

The user wants to be an editor and issue a request to the system

UC_06 Read tags The system provides the actor with tags data

UC_07 Delete tags The actor deletes tags Editor, Admin UC_08 Create tags The actor creates tags Editor, Admin

UC_09 Edit tags The actor updates existing tags

UC_10 Read posts The system provides the actor with posts data

UC_11 Delete posts The actor deletes posts Editor, Admin UC_12 Create posts The actor creates posts Editor, Admin

UC_13 Edit posts The actor updates existing posts

UC_14 Vote The actor presses the vote button on a post

UC_15 Add Friends The user adds another user as a friend to the personal contact

UC_16 Get friends The system provides the actor with friend data

UC_17 Delete friends The actor deletes a friend connection

UC_18 Send messages to a random user

The user sends messages to a random user suggested by the system

UC_19 Send messages to a user from contacts

The user sends a message to a friend in the contact

UC_20 Reply comments The user reply other’s comments

UC_21 Approve reports on comments

The actor approves to block the reported comments

UC_22 Publish/unpublish posts The actor proofreads and publishes a post

16 UC_23 Report comments The actor report on the other’s comment when it is harmful

UC_24 Read streams The system provides the actor with streams data

UC_25 Delete streams The actor deletes streams

UC_26 Create streams The actor creates streams

UC_27 Edit streams The actor updates existing streams

UC_28 Access to a channel to listen

The actor navigates the channel to listen to the streaming audio

UC_29 Subscribe channel The actor subscribes to a channel for later access

UC_30 Comment on Post The actor comments on a post

UC_31 Search posts The actor search for a post

UC_32 Bookmark The user bookmarks posts

17 UC_33 Approve an author account

The actor approves whether should they create an Author account

UC_34 Find posts by tags The actor finds posts in the system by using tags

UC_35 Share The actor shares the content on Facebook, Facebook Messenger, Twitter, Pinterest

UC_36 Send messages to a subscriber of a channel

The actor messages a subscriber of a channel

UC_37 Report posts The actor report on the other’s comment when it is harmful

UC_38 Approve reports on posts

The actor approves to block the reported comments

18 Pre-condition No pre-condition

Post-condition No post-condition

Additional Actors No additional actors

Basic Path 1 The actor first accesses the site and clicks on “Create account”

2 The application shows the credential input fields for users

3 The actor enters and submits the required fields

4 The application redirects the form to the login form

1 The application toast up the message that either the username or the email existed in the database

3b “The required fields must be input”

1 The application toast up the message that the required fields must be input

19 Pre-condition 1 The guest must have an account that existed in the database Post-condition No post-condition

Basic Path 1 The actor first accesses the site and the application shows the credential input fields for users

2 The actor enters and submits the required fields

3 The application redirects the form to the index page

Exceptions 3a “The identifier not existed”

1 The application toast up the message that either the username or the email not existed in the database

3b “The required fields must be input”

1 The application toast up the message that the required fields must be input

1 The application toast up the message that the password of the identifier input is wrong

Pre-condition No pre-condition

Additional Actors Admin, Editor, Author

Basic Path 1 The actor clicks on the profile icon to open the dropdown

2 The application shows the dropdown with settings for the user to access

3 The actor clicks on the logout button

4 The application removes the authentication cookies and redirects the user back to the login page

Alternatives From the admin page, the admin and editor can click on the

Logout button at the sidebar

21 Additional Actors No additional actors

Basic Path 1 The actor clicks on the request editor account button to start the request

2 The application shows the confirmation dialog

4 The application saves the request to the database and waits for the admin to approve

Exceptions 2a “The user chooses to cancel”

1 The application redirects to the index page

Table 15 Use cases – Request an editor account

Basic Path 1 The user navigates to the index page

2 The application tags as chip buttons below the header bar

22 Alternatives 1 As admin or editor, the user navigates to “Content -

Type manager” on the Admin page and selects the Tag button

2 The application shows all data as data grids

3 The use case ends Exceptions No exceptions

Table 16 Use cases – Read tags

Pre-condition The actor accessed the admin page successfully

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Tag button

2 The actor clicked “Delete” on wanted to be deleted the record

3 The application shows a dialog for confirmation

5 The application show “Deleted successfully”

1 The actor chooses the cancel button

Table 17 Use cases – Delete tags

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Tags button

3 The application shows the form for inputting the required fields

4 The actor inputs and submit the required fields

5 The application show “Added successfully”

1 The application shows the unique fields that exist in the data

Table 18 Use cases – Create tags

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Tags button

3 The application shows the form with populated fields

4 The actor edits and submits the wanted-to-be-edited fields

5 The application shows “Edit successfully”

Table 19 Use cases – Edit tags

25 Post-condition No post-condition

2 The application show lists of posts below the header bar

3 The user chooses a post to read

4 The application show details of the posts

Alternatives 1 As an admin or editor or author, the user navigates to

“Content-Type manager” on the Admin page and selects the Post button

2 The application shows all data as data grids

3 The use case ends Exceptions No exceptions

Table 20 Use cases – Read posts

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Post button

Table 21 Use cases – Delete posts

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Posts button

Table 22 Use cases – Create posts

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Posts button

Table 23 Use cases – Edit posts

2 The application show lists of posts below the header bar

3 The user clicks on the vote button for a post in the post component

4 The application updates the new number of votes for the post

Alternatives 1 In the post details page, the user clicks on the vote button below the title

2 The application updates the new number of votes for the post

Pre-condition The user is connecting with another user

2 The actor clicked the “Add friends” icon

3 The application updates the friend list of the actor

Table 25 Use cases – Add friends

30 Basic Path 1 The user navigates to the index page

2 The application shows a friend list in the sidebar

Table 26 Use cases – Get friends

Pre-condition The user is connecting with another user

2 The actor clicked the “Delete friends” icon

3 The application updates the friend list of the actor

Table 27 Use cases – Delete friends

Name Send messages to a random user

31 Post-condition No post-condition

2 The actor clicked the “Connect” icon

3 The application connect the user with a random user

4 The application shows a form for the user to input messages

5 The user inputs messages and submits the form

6 The system calls the third-party platform to send notifications to the connected user

Table 28 Use cases – Send messages to a random user

Name Send messages to a user from contacts

Pre-condition The actor must have friends in contact

2 The actor clicked on a friend in a sidebar

3 The application connect the user with a corresponding user

Table 29 Use cases – Send messages to a user from contacts

Pre-condition The post has a list of comments before

Additional Actors No addition actors

Basic Path 1 The user navigates to the single post page

2 The application shows information about the post

3 The user scrolls down to the comment box and clicks the reply button on the message component

4 The user enters a message to reply and submit

5 The list of comments is updated with the new comment

Table 30 Use cases – Reply to comments

Name Approve reports on comments

Basic Path 1 The actor navigates to the “Comments” page

2 The actor read the reports and clicked “Approve ” on the reports

3 The application blocks the comments

Alternatives 2a “The actor clicks on cancels”

2 The status of the report changes

Table 31 Use cases - Approve reports on comments

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Post button

2 The actor clicked on a Post

3 The application shows the form for updating fields

4 The actor clicks publish button

5 The application shows “Publish successfully” and makes the post available

Alternatives 4a “If the post is already published”

1 The actor clicks on the unpublish button

2 The application shows “Unpublished successfully” and makes the edited post unavailable

3 The use case ends Exceptions 4a “The data exists”

Table 32 Use cases – Publish/unpublish posts

Basic Path 1 The actor navigates to the single post page and scrolls to the comment box

2 The actor clicked the report button of a person

Table 33 Use cases – Report comments

2 The application fetches a random stream for a user to listen to

Alternatives 1 The user can change to another stream to listen with control buttons in the Music Player component

Table 34 Use cases – Read streams

Basic Path 1 The actor navigates to the “Content-Type manager” page and chooses the Streams button

Table 35 Use cases – Delete streams

Table 36 Use cases – Create streams

Table 37 Use cases – Edit streams

Name Access to a channel to listen

Basic Path 1 The actor navigates the index page

2 The actor fetches stream data from the corresponding mountpoint

3 The Music Player plays the stream data

Alternatives The user can change to a different mountpoint by controlling buttons in the Music Player component

Table 38 Use cases – Access to a channel to listen

2 The actor clicks on subscribe channel in the Music Player component

3 The application updates the subscribed channels

Table 39 Use cases – Subscribe to a channel

Basic Path 1 The actor navigates to a post page

2 The actor enters text in the Comment textbox component

3 The application updates and shows up a new list of comments

Table 40 Use cases – Comment on posts

41 Additional Actors No additional actors

2 The actor enters a search query in the search text box component

3 The application sends requests to the Meilisearch instance and returns the result to the user

1 The actor navigates to a post

2 The actor enters a search query in the search text box component

3 The application sends requests to the Meilisearch instance and returns the result to the user

Table 41 Use cases - Search posts

2 The actor clicks on the bookmark icon on the card component

3 The application saves the post and the user

1 The actor navigates to a post

2 The actor clicks on the bookmark icon on the card component

3 The application saves the post and the user

Name Approve an author account

Basic Path 1 The actor navigates the “Content-type manager” and clicks the AuthorRequest menu item

2 The actor read and click on change the status from PENDING to APPROVE

3 The application saves the state and shows

1 The actor read and click on change the status from PENDING to APPROVE

Table 43 Use cases – Approve an author account

Name Find posts by tags

2 The actor clicks on the chip buttons in the posts section

3 The application updates in corresponding tags submitted by the actor and shows the list of the most relevant posts

Table 44 Use cases – Find posts by tags

Basic Path 1 The actor navigates the single post page

2 The actor clicks on the Facebook share button in the posts section

3 The application opens a dialog for sharing content on Facebook

4 The actor input content and then click Accept

1 The actor clicks on the Twitter share button in the posts section

2 The application opens a dialog for sharing content on Twitter

The use case ends 2b “Facebook Messenger”

1 The actor clicks on the Facebook Messenger share button in the posts section

2 The application opens a dialog for sharing content on Facebook Messenger

The use case ends 2c “Pinterest”

1 The actor clicks on the Pinterest share button in the posts section

2 The application opens a dialog for sharing content on Pinterest

Name Send messages to a subscriber of a channel

2 The actor clicked on a subscriber in the “Người lạ ở kênh” section in a sidebar

3 The application connect the user with a corresponding user

8 The use case ends.s Alternatives No alternatives

Table 46 Use cases - Send messages to a subscriber of a channel

Basic Path 1 The actor navigates to the single post page

2 The actor clicked the report button of a post

3 The application shows the dialog to choose reasons and submit

4 The application shows “Report successfully”

Table 47 Use cases – Report posts

Name Approve reports on posts

Basic Path 1 The actor navigates to the “Posts” page

2 The actor read the reports and clicked “Approve” on the reports

3 The application blocks the posts

Alternatives 2a “The actor clicks on cancels”

2 The status of the report changes

Table 48 Use cases - Approve reports on comments

System Analysis and Class Identification (Class Diagrams)

Figure 7 Overall class diagram of the projects

Interaction Diagrams (Sequence Diagrams)

Figure 10 Sequence Diagram: Access to a channel to listen

Figure 11 Sequence Diagram: Add friends

Figure 12 Sequence Diagrams: Send messages

User Interface

Description: The page is first encountered by the User after signing in The page consists of:

1 The logo for the web application and to use as a button to get back to the homepage

1 The search input used for searching posts

2 The button to open the dropdown to see the notifications

3 The avatar component act as a button to open a dropdown for personal settings or logout

4 A list of subscribed channels of the user, when clicked on a channel changes the radio mountpoint to the corresponding mountpoint

5 A list of subscribers of a channel, when clicked on a user the chat box connected to the corresponding user

6 A list of added friends of the user logged in, when clicked on a friend button changes the chat box connected to the corresponding user

7 The list of featured posts

8 The list of chip buttons for filtering posts listing on the index page

9 The list of posts from the Strapi server, when the component is clicked navigates to the Single Post with the corresponding post content

10 The radio component helps control channels

Figure 14 User Interface: Index page

Description: The layout is the same as the index page except in the middle show the details of the post navigated to The page consists of:

1 The cover of the post

2 The title of the post

3 The author's information in the post

5 The “go to comment section” button

7 The content of the post

Figure 15 User Interface: Single Post page

Description: The page consists of:

3 The register button to change the form into a register form

Figure 16 User Interface: Login page

The System Architecture

The software architecture is established as a three-tier web-based software application The ability to isolate user interface from business logic and domain concerns is this architecture's most evident virtue This separation facilitates future maintenance and expansion of the product as well as easier creation

Figure 17 The three-tier architecture of the software

Figure 18 The three-tier architecture of the software

The advantages of a three-tier architecture are useful for the software since each module is plugged with different batteries

- At the Data layer, for simplicity and flexibility, MySQL is used as the database management system for the software Currently, MySQL is still supported nicely by the community with various backend technology

- At the Logic layer, the Strapi, which is defined as a headless CMS, helps speed up the development process by bootstrapping the API easily and uncomplicatedly customizing it to fit this project

- At the Presentation layer, the Remix, which is a full-stack web framework, helps developers in focusing on the user interface more and comply with the web standards to reduce the coding time

Figure 19 The software architecture diagram

The system comprises three modules: The Radio module, The Microblogging module, and The Real-time communication module Besides the core technologies introduced above, the software is connected with other third-party applications to work properly

- Cloudinary is used as storage for files such as songs, streaming configuration, and photos in this project With simple and generous pricing Cloudinary is the most suitable for small and startup projects

- Radio Mast is a streaming audio platform for online radio, the application uses the Radio Mast Streaming Network which provides Icecast- compatible audio streams for internet radio and lives event broadcasting, and is accessible via web browsers and mobile devices

- Icecast, a platform for streaming media, may be used to build a privately operated jukebox, an Internet radio station, and many other things It is particularly adaptable since it supports open standards for communication and interaction and allows for the very simple addition of new formats Paring with the LiquidSoap – deployed on Google Cloud App Engine, which is a software that helps send audio data to streaming servers – Icecast in this case, the internet radio would run smoothly without interruption

- CometChat is a platform for integrating audio, video, and text messaging capabilities so that your users may communicate with each other on the website, online applications, and mobile applications

- Pusher is a real-time communication platform integrated into the software paired with CometChat for sending push notifications to users when sending messages This reduces the time for implementing and maintaining complex technologies in real-time such as WebSocket

- Lyket is used as a feedback system for the project that helps users analyze what users are currently interested in

- Meilisearch is a free and open-source search engine created in the Rust programming language Meilisearch deployments take fewer steps than those of other well-known search engines, and you can run a Meilisearch server and query it using a single command-line program Meilisearch includes functions like fuzzy matching and schema-less indexing in addition to a web interface for demonstration purposes In more complex deployments, integration with the InstantSearch javascript library is supported The Meilisearch paired with the Strapi enables a powerful searching function for the application in no time

59 The project is deployed as 2 Cloud Run units – a managed serverless service provided by Google Cloud Platform - a web application built with Remix and a headless CMS built with Strapi, which are containerized as Docker containers and hosted on Artifact Registry – a registry service allow users to register their Docker containers The database uses the Cloud SQL for MySQL by the Google Cloud Platform which is demonstrated in the diagram below

Test Plans

Approach

The approach of the project is based on the use case testing method As the application is tested with this method we can save more time to meet the deadline and also to understand the requirements of the system more for future development

The steps to reproduce a use case are based on the scenarios described in the Use case specifications Any steps of scenarios of a use case that lead to unexpected behaviors made the use case a fail case.

Test cases

UC_18 Send messages to a random user Pass

UC_19 Send messages to a user in contacts Pass

UC_28 Access to a channel to listen Pass

Table 49 Summary of results of tests

Test Description Conditions Designed/Executed

Testing if a user can authenticate with the service

The user enters the correct username and password

No expected result No result Pass

Press enter or click “Đăng nhập”

The frontend application redirects the user to the main page

62 Testing if a user can register with the service without inputting some information

Expected Results Actual Results Pass/Fail

The user enters the information of the username, full name, and email without entering the password

2 Press enter or click “Đăng kí”

The application does not redirect and toast the error message where the required fields must be input

Testing if a user can see the post and search for posts

Authenticated, The service must be populated with posts

1 The user access to the main page

The posts from the database must be presented

The user enters a query in the search bar

The user press enter or click the search icon

The list of posts updated to the new search query with the most relevant ones

Table 52 Test Case – Read posts

64 Send messages to a random user UC_18 2/1/2023

Testing if a user can send messages to another random user

Authenticated, there are more than 2 users in the database

The user clicks on the “Kết nối” button in the chatbox

The textbox shows up Pass

2 The user enters the text “Abc”

The list of messages updates with the new message

“Abc” The connected user is notified with the new message

The user clicks on the connect icon button in the chatbox when already connected with a user

The other user connected Pass

Table 53 Test Case – Send messages to a random user

Send messages to a user in contacts UC_19 2/1/2023

Testing if a user can send messages to a user in contacts

Authenticated and a user in contacts

The user clicks on a user in the contacts

The textbox shows up in the chatbox

The textbox shows up Pass

Table 54 Test Case – Send messages to a user in contacts

Access to a channel to listen UC_28 2/1/2023

Testing if a user can play the music player Authenticated Thong

On the main page, click on the play button on the music player component

The metadata of the stream shows up on the music player component and the music plays

Table 55 Test Case – Access to a channel to listen

Project Retrospective

What worked well

- The coding time is reduced tremendously, hence, fewer common bugs in software

- Although the technology stack is still new to members, all group members still quickly grasp all the concepts to execute the project intuitively.

What did not work well

- There are still bugs in some higher and more advanced concepts in the application

- As a social network, there are not any features for users to check the profile of the user they connected with

- The user interface is not appealing to users

- The performance of the application is unacceptable

Conclusion

- The software is technically production-ready

- The system is flexible and can be used for different product categories.

- Front-end designs are divided into separate components, and back-end with Strapi provides low-constraint entities helping ease the development process and prototyping ideas

- As an administrator, the system has many manual tasks that could be automated.

- Uses of third-party services are at the free tier, so some functions are limited

- As a user, the performance of the system is overall slow

The plan for improvement of the software would focus on:

- Improve the performance of the application

- Implement features for users to freely create spaces with their ideas

 MySQL::MySQL documentation (n.d.) MySQL::Developer Zone Retrieved December 11, 2022, from https://dev.mysql.com/doc/

 Strapi developer docs (2022, November 17) Strapi Retrieved December 11,

2022, from https://docs.strapi.io/developer-docs/latest/getting- started/introduction.html

 Remix docs home (n.d.) Remix - Build Better Websites Retrieved December 11, 2022, from https://remix.run/docs/en/v1

 Reference documentation (2022, December 8) Docker Documentation

Retrieved December 11, 2022, from https://docs.docker.com/reference/

 O’Riordan, M., & Wiggers, S (2022, December 1) Using Serverless

WebSockets to enable real-time messaging InfoQ Retrieved December 11,

2022, from https://www.infoq.com/articles/serverless-websockets-realtime- messaging/

 Katz, N., Lazer, D., Arrow, H., & Contractor, N (2004) Network theory and small groups Small Group Research, 35(3), 307-

 Beklemysheva, A (2021, October 12) Social network application development: Types, challenges, technologies, costs SteelKiwi | Web and Mobile Software Development Company Retrieved February 3, 2023, from https://steelkiwi.com/blog/social-network-application-development- types-challenges-technologies-costs/

 Katz, N., Lazer, D., Arrow, H., & Contractor, N (2012) Is national culture still relevant? Interculture Journal: Online-Zeitschrift für interkulturelle Studien, 11 (2012) 19 https://nbn-resolving.org/urn:nbn:de:0168-ssoar-

 Matijević, S., Raguž, I V., & Filipovıć, D (n.d.) The role of national culture in contemporary business environment Hrčak portal hrvatskih znanstvenih i

71 stručnih časopisa - Hrčak Retrieved February 4, 2023, from https://hrcak.srce.hr/file/238200

 Nguyen, L D (2021) Quan điểm bảo tồn, phát huy âm nhạc truyền thống dân tộc sau đề cương văn hóa Việt Nam 1943 Retrieved February 4, 2023, from https://sti.vista.gov.vn/tw/Lists/TaiLieuKHCN/Attachments/319595/CVv 495S22021019.pdf

 Cát Khuê (2012, June 27) Văn hoa Hàn - 'quyền lực mềm' và mối lo TUOI TRE ONLINE Retrieved February 20, 2023, from https://tuoitre.vn/van-hoa- han -quyen-luc-mem-va-moi-lo-498926.htm

 Tổng Cục Du Lịch (2018, October 31) Độc đáo trang phục người Bố Y https://vietnamtourism.gov.vn/ Retrieved February 20, 2023, from https://vietnamtourism.gov.vn/post/27656

Tiêu đề	Creating a Social Network Web Application for Discovering Old Music and Entertainment
Tác giả	Nguyễn Long Vũ, Nguyễn Chí Thông, Bùi Quang Hồ Minh Vương
Người hướng dẫn	MSc. Mai Anh Thơ
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Capstone Project
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	85
Dung lượng	4,49 MB