Story Book – A Social Media-based Web Application

Story Book – A Social Media-based Web Application

Jack Pritom Soren¹, MD Fayezur Rahman², Shohanur Rahman³

Dept. of CSE Bangladesh University of Business and Technology, Dhaka, Bangladesh^1,2,3.

DOI: https://doi.org/10.51584/IJRIAS.2023.81205

Received: 12 November 2023; Revised: 22 November 2023; Accepted: 27 November 2023; Published: 28 December 2023

ABSTRACT

In this article, the MERN (MongoDB, Express, React, and Node.js) stack is used to create and deploy a social networking platform. The project’s goal was to provide a feature rich platform with tools for users to share text and images, connect with others via friend requests, engage with postings through likes and comments, and flag offensive material. Additionally, the platform provides options for dark and light viewing modes. In addition to highlighting the important features and functionalities developed, the paper gives an overview of the project’s architecture and goes over user registration, profile setup, post authoring, friend request management, and post engagement. The specifics of the implementation, including the difficulties encountered and fixes used, are covered. The platform’s review reveals its effective operation, user involvement, and responsiveness. The study advances the subject of social media platforms by demonstrating how a MERN based solution may be implemented successfully. The results of this study act as a starting point for future developments in social media platform design.

Index Terms—MERN Stack, Story Book, Social media platforms, User engagement, User friendly interface.

INTRODUCTION

Social media platforms have revolutionized how individuals connect, communicate, and exchange information in the current digital era. [1] These platforms now play a crucial role in our daily lives by giving users a platform for interaction, self-expression, and exposure to a wide variety of content. With social media’s continued rise in popularity, there is a rising need for feature rich platforms that provide a smooth user experience and meet a variety of user needs. [9]

The MERN (MongoDB, Express, React, and Node.js) stack was used to create and implement a social media platform in this study. This project’s main goal is to meet the growing demand for a full social networking platform that enables users to share text and images, connect with others by sending friend invitations, engage with postings by like and commenting on them, and flag offensive information. By providing these features, the platform hopes to promote a lively and interesting online community.

The MERN stack was chosen for this project due to its dependability, scalability, and versatility. Express.js offered a strong framework for creating the online application, while MongoDB was used as the database to store user information, postings, and interactions. To build a dynamic and responsive user interface, React.js was used as the frontend library, and Node.js was used as the backend runtime environment to effectively manage server side operations.

The platform provides a customizable viewing mode that lets users vary between dark and light modes, adapting to personal tastes and improving readability, to improve user experience. Additionally, an admin panel was added to give administrators the opportunity to control user generated content and maintain a respectful and secure online community.

In-depth analysis of architectural layout, implementation specifics, and salient characteristics of the social media platform will be provided in this article. It will also go over the problems that arose during the development process and the solutions that were put in place to address them. The paper will also provide evaluation findings that demonstrate the platform’s functionality, user engagement, and responsiveness. We hope to further the development of social media platforms by disseminating the learnings from this project and to spur additional creativity in the design of inclusive and user centered online communities. The execution, evaluation, and future directions will all be covered in detail in the following sections of this article, which will provide readers a thorough grasp of the project’s scope and potential effects. [15]

LITERATURE REVIEW

The literature review section examines existing social media platforms to gain insights into their functionalities, methodologies, user interactions, strengths, and weaknesses. This review plays a critical role in informing the development of our own social media platform using the MERN stack.

For a number of reasons, it is crucial to review current systems. First of all, it enables us to comprehend the current social media platform ecosystem, trends, and user expectations that are constantly changing. [16] Exploring existing platforms allows us to find cutting edge elements, best practices, and lessons learned that we can then apply into our own platform. Second, studying how users engage with current platforms enables us to create a captivating and intuitive experience that appeals to our target market. [2] It gives us important information about how people interact with social media platforms, interact with one another, and engage with content. Additionally, by analyzing the advantages and disadvantages of other systems, we may spot future problems, correct them, and raise the general level of our platform’s quality.

The review of numerous well known social media platforms is covered in the sections that follow. Each platform’s features, operating principles, and user interactions are examined along with its strengths and weaknesses. With the help of this thorough study, we can use the knowledge we’ve learned from existing platforms to construct our own platform while solving any shortcomings they may have.

Facebook

Facebook is a well-known social networking site with a sizable user base and a wide range of services. Facebook enables users to establish profiles, interact with friends, and share a variety of information. It does this by utilizing a hybrid operating system that blends peer-to-peer networking with client server architecture. [10] The platform’s primary features include the ability to add friends, post text and multimedia content, engage through likes and comments, join groups and events, and use private chat. The News Feed algorithm allows users to curate content for themselves. [3] The advantages of Facebook include its sizable user base, flexible privacy settings, and extensive corporate advertising opportunities. The platform does, however, suffer issues with data security, privacy, and the dissemination of false information. Concerns about data misuse and privacy violations have surfaced, and automated content selection has been linked to filter bubbles and a lack of exposure to a variety of viewpoints. [14]

Twitter

Twitter is a well-known microblogging service that uses a client server setup. Tweets are quick messages that users can send to their followers. Real time updates, a character limit (originally 140 characters, later increased to 280 characters), and an algorithm that curates relevant content based on user preferences make up the basic aspects of Twitter. The platform functions as a real time information network, enabling the quick broadcast of breaking news, popular debates, and discussions. However, Twitter has issues including character limits that limit the complexity of debates as well as the possibility of false information and online harassment. [11]

Twitter excels at amplifying voices, fostering connections around the world, and serving as an open forum for public engagement. Users may stay up to date on breaking news and take part in public dialogue thanks to its real time nature. However, managing content control while upholding a healthy and inclusive workplace continues to be difficult. [4]

Instagram

Instagram is a popular social networking site for sharing photos and videos that is renowned for its emphasis on aesthetics. Users can record, modify, and share visual content with their followers using a client server architecture. Filters, editing tools, hashtags, and location tagging are some of Instagram’s important features that improve the visual experience and facilitate content discovery. Through likes, comments, and direct messages, the site encourages user engagement, fostering deep connections and exchanges. [12] Instagram still has issues with its effects on self-esteem, authenticity, and mental health, as well as with content control and the dissemination of toxic content.

Instagram has a large user base that includes both individuals and businesses. Its strengths lay in its emphasis on visual storytelling and creative expression. The platform’s interaction tools make it easier to create communities and user generated content. However, issues with content moderation and mental health need to be carefully taken into account.

Reddit

Reddit is a user generated social media site renowned for its many communities organized around specific topics. Users can create and participate in discussions on a variety of topics under distinct ”subreddits,” which operate on a client server architecture. A voting system that allows users to up vote or down vote posts and comments, threaded comment conversations, and moderator selection by the community are some of Reddit’s most notable features. [5]

Reddit’s vibrant and diverse communities, which promote interesting discussions and knowledge sharing, are one of its assets. By encouraging content quality and relevance, the platform’s voting system makes sure that the most noteworthy contributions are prominently presented. Reddit does, however, suffer difficulties with moderation and the potential for toxic behavior inside specific communities, such as the propagation of false information and occurrences of harassment and hate speech.

Tumblr

A multimedia microblogging site called Tumblr is well known for emphasizing creativity and self-expression. Users can build personalized blogs and share different types of material, such as text, photographs, videos, and audio, using the client server architecture of the platform. Users can share and circulate material using Tumblr’s reblogging feature, which promotes interaction and admiration for common interests. The platform’s tagging system and customization choices make it easier to find and explore content. Tumblr, however, presents difficulties with regard to content management and maintaining a secure environment.

The capacity to find original and diverse content is one of Tumblr’s strongest suit, along with its creative community. Through likes, comments, and reblogs users can communicate with one another and cultivate admiration for common interests. Tumblr is a platform used by writers, artists, photographers, and other creatives to share their work. But issues with content management and upholding a safe atmosphere continue.

 Pinterest ||Users can organize material using pins and boards on Pinterest, which acts as a platform for visual discovery and bookmarking. [6] Its strengths include a focus on curation of visual content, user involvement features, and a broad range of categories. For Pinterest to continue to grow, it is important to address issues with copyright and content management.

PROPOSED METHODOLOGY

The development of the social media platform followed a structured methodology encompassing several key steps, including requirements gathering, system design, implementation, and testing. This section outlines the proposed methodology that was adopted throughout the project.

Requirements Gathering

Comprehensive requirements gathering was part of the first phase, during which the social media platform’s functional and non-functional requirements were established. This method involved interviewing users, examining competing platforms, and taking into account user comments. To lay the groundwork for the succeeding development stages, the requirements were specified.

System Design

Transforming the acquired requirements into a thorough system design was the main goal of the system design phase. This required producing wireframes or mockups to depict the user experience as well as designing the database schema and platform architecture. To provide a reliable and effective system, scalability, security, and maximum performance were taken into account.

Used Model

The use of Agile development approaches with a focus on iterative and incremental development was used. This made it possible for the project to be flexible and adaptable throughout, ensuring that user and stakeholder feedback could be integrated at each iteration. In order to secure the effective development and delivery of the social media platform, the recommended methodology used a methodical approach from requirements collecting to testing. [17] Agile approaches and the use of the MERN stack provides a strong basis for effective development, adaptability, and a user centric approach.

Fig. 1. Figure of Agile Methodology.

This diagram (fig. 2) provides a concise visual representation of the basic operations of our social media platform. This picture improves comprehension of our approach by making the user data flow, interactions, and enhancing the understanding of our methodology clearer.

Fig. 2. Diagram of Story Book.

Implementation

Using the MERN (MongoDB, Express, React, Node.js) stack, the social media platform was really developed during the implementation stage. The front-end user interface and interactive elements were constructed using React.js in accordance with best practices and coding standards, while the server side functionality and APIs were created using Node.js and Express.js. The database used to store user information, posts, and interactions was MongoDB.

Testing

To assure the social media platform’s usability, dependability, and functioning, a thorough testing strategy was used. The system was validated against the specified requirements using user acceptance testing, integration testing of various modules, and unit testing of individual components. Through meticulous testing techniques, bugs and problems were found, addressed, and fixed. [18]

IMPLEMENTATION AND RESULT

This section gives a general summary of the Story Book project’s implementation details while highlighting its essential characteristics, development obstacles, and successes.

Implementation Details

The earlier described suggested methodology was followed in the implementation of this MERN project. React.js, a well-known JavaScript package, was used in the front-end development to produce a responsive and interactive user interface. Node.js and Express.js were used in the back-end development to manage server side functionality and API interactions. Data was kept in a NoSQL database called MongoDB.

To achieve code reuse and maintainability during the implementation phase, a modular and component based architecture was used. This promoted effective development and future scalability as new features could be introduced without difficulty. Practices for continuous integration and deployment were put in place, allowing for regular updates and a hassle free cycle for development and release. The project incorporated a number of third party tools and frameworks to improve the user experience.

Key Features and Functionality

Story Book provides a wide range of features to improve user interaction and seamless engagement. Story Book enables deep connections and content discovery through individualized profiles, text, and image sharing. Conversations and the voicing of viewpoints are made possible through interactive features like liking and commenting. Story Book offers a lively and exciting social networking experience with real time updates, simple navigation, and a beautiful design.”

1.Registration Page: New users can make accounts on Story Book’s registration page and sign up for the active com- munity. People may quickly sign up by entering credentials such their name, email, address, place of employment, and password thanks to a user friendly interface. Users are guided through the essential steps to begin using the site via the simple and clear registration process.

Fig. 3. Figure of Registration Page.

2. Login Page: The Story Book login page offers users a safe and convenient way to access their accounts. Users can share their stories with the Story Book community and connect with their friends through the login page. Story Book creates a trustworthy environment for easy access while guaranteeing the privacy and security of user accounts. After successfully registering in the Story Book, the user must log in by providing the necessary information.

Fig. 4. Figure of Login Page.

3. Writing Posts: Users can easily share their ideas, experiences, and creativity with the community via the posting feature in Story Users may simply compose and publish posts, whether they take the form of text, photographs, or a combination of both, thanks to a user friendly interface. This function encourages participation and user expression, resulting in a lively and varied collection of stories on the Story Book platform.

Fig. 5. Figure of writing a post.

4. Posts: Users can share content with their followers using the post feature. Text, images, videos, links, and other media are all possible for this Posts can be used to communicate information with followers such as news, updates, personal opinions, and other things. Any person the user follows will be able to see their posts. Other users can comment on, like, and share posts. Users can now converse with one another and the shared content thanks to this.

Fig. 6. Figure of a post.

5. React and Comment: The reacting and commenting functionality encourages user interaction and engagement. Users can express their support for other members of the community by responding to posts and leaving comments on them. This builds connection between them.

6. Friend list: With the help of the Story Book friend list feature, users may engage with one another and forge enduring relationships in the neighborhood. By simply adding friends, users can widen their networks and improve their ties.

Fig. 7. Figure of friend list

7. Profile Deletion: The Story Book profile deletion option gives users the power to delete their account and any associated data from the platform. Users may simply access their account settings and start the account deletion procedure thanks to a user friendly Users can manage their presence within the Story Book community and have complete control over their privacy thanks to this function.

Fig. 8. Figure of profile deletion.

8. Report Post: Users are given the ability to identify and report offensive or worrying content within the community using Story Book’s reporting Users can quickly report posts that are hurtful or that break community rules. By enabling users to actively participate in upholding a positive and courteous community inside Story Book, this feature encourages a secure and responsible environment.

Fig. 9. Figure of reporting a post.

9. Admin Dashboard: The admin dashboard offers administrators a central location to control and monitor platform operations. Administrators can keep an eye on user activity, examine reported content, and take required action like deleting postings or suspending users thanks to a complete set of tools and This function gives administrators the power to maintain the integrity and caliber of the Story Book community while ensuring a secure and welcoming environment.

Fig. 10. Figure of Admin Dashboard.

10. Resolve Issues: Administrators are given the tools they need to deal with reported content quickly and effectively thanks to this feature. Administrators have the ability to ex- amine reported postings, determine whether they are harmful to the community and against their community standards, and then take the necessary action, such as removing or flagging the reported Also, those users will be suspended until admin unvoke their suspension. With the help of this function, the Story Book community is kept safe and civil complaints about posts are promptly addressed.

Fig. 11. Figure of issues resolving page.

Result

                Outstanding results from the Story Book project’s completion have made it clear that it is a popular and thriving social media platform. A seamless and enjoyable user experience made possible by the user centric design and simple interface has resulted in an expanding and active user base. The website has developed into a thriving center for people to interact, connect, and share their tales. [7] The project’s success in developing genuine connections and building a welcoming online community is shown by the excellent user comments. The ”Story Book” platform’s user interactions and satisfaction levels during a six-week period are summarized in the bar chart (Fig. 11). It captures the ever-changing tide of user interaction, including reactions, post sharing, and issue reporting. Post activity peaks, especially in Week 2, indicate increased user content production and sharing.

Fig. 12. Chart of Posts, Reactions and Reports from week 1 to week 6.

As a result, variations in the number of reactions indicate how engaged and responsive the community is. The reports have been consistent, but at different frequency, which suggests that content moderation is still being watched over. While the existence of reported events indicates a community- driven dedication to upholding a safe and courteous online environment, the chart overall depicts a vibrant and responsive user community that actively participates in content creation and engagement.

CONCLUSION

The entire project’s goal is to use the MERN (MongoDB, Express, React, and Node.js) stack to create and deploy a full social networking platform. The platform offers a smooth user experience and caters to a variety of user requirements in order to fulfill the changing needs of users in the modern digital era. The development team has produced a platform with a number of important features by utilizing the MERN stack’s robust- ness, scalability, and versatility. Users can send and receive friend invites, send and receive text and image messages, like and comment on postings, and report problematic material. These features encourage the development of a lively and interesting online community where users can interact, express themselves, and engage with a variety of information.

Challenges were encountered and resolved during the development process to guarantee the platform’s functionality, dependability, and security. In-depth testing procedures were put in place to confirm the platform’s usability and functionality. The platform’s performance and user experience were improved significantly thanks to user input and incremental upgrades.

In addition to the technical components of platform development, the project emphasizes the value of user involvement, content control, and a secure online environment. The platform seeks to deliver a user centric and respectful online community by including features like adjustable viewing modes and an admin interface for content control. [13]

This research has provided insightful knowledge that has influenced the development of social media platforms and stimulated further innovation in the establishment of inclusive and user centered digital communities. [8]

Future Work

We anticipate that consumer tastes and technology will change over time, thus our platform will also change constantly. Enhancing user engagement with personalized content recommendations is one area of development that makes use of machine learning algorithms to comprehend user preferences. In an effort to improve user experiences, the incorporation of cutting-edge technology like virtual reality (VR) and augmented reality (AR) is also being considered. In order to combat growing cyber threats, we also anticipate recurrent improvements to the platform’s security measures. Future advancements will be guided by user feedback, which will continue to be crucial in ensuring that our platform remains at the forefront of innovation and customer pleasure. This adaptation pledge demonstrates our commitment to providing a state-of-the-art, user-focused social media experience.

REFERENCES

1. Lahey, (2016). Invisible actors: Web application programming inter- faces, television, and social media. Convergence, 22(4), 426–439.
2. Akrich M (1992) The description of technical In: Bijker W, Law J (eds) Shaping Technology/Building Society: Studies in Sociotechnical Change. Cambridge: MIT Press, pp. 205–224.
3. Aronson, , Wilson, T. D. and Akert, A. M. 2007. Social Psychology, 6th Ed., Upper Saddle River, NJ: Pearson Prentice Hall.
4. Kaplan, A. M. and Haenlein, M. 2010. Users of the world, unite! The challenges and opportunities of Social Business Horizons, 53(1): 59–68.
5. Curbera, F., Khalaf, R., Mukhi, N., Tai, S., Weerawarana, S.: The next step in web services. Commun. ACM 46(10), 29–34 (2003)
6. Kaplan, A.M., Haenlein, M.: Users of the world, unite! the challenges and opportunities of social media. Bus. Horiz. 53(1), 59–68 (2010)
7. Yin, J., Lampert, A., Cameron, M., Robinson, B., Power, R.: Using social media to enhance emergency situation awareness. IEEE Intell. 27(6), 52–59 (2012)
8. P. Burnap et al., “Tweeting the terror: Modelling the social media reaction to the woolwich terrorist attack,” Social Netw. Anal. Mining, vol. 4, no. 1, pp. 1–14, Dec. 2014.
9. L. Yan and A. J. Pedraza-Martinez, “Social media for disaster man- agement: Operational value of the social conversation,” Prod. Oper. Manage., vol. 28, no. 10, pp. 2514–2532, Oct. 2019.
10. A. Mukkamala and R. Beck, “The role of social media for collective behaviour development in response to natural disasters,” in Proc. 26th Eur. Conf. Inf. Syst. Beyond Digit. Facet. (ECIS), 2018, pp. 1–18.
11. M. Mart´ınez-Rojas, M. D. C. Pardo-Ferreira, and J. C. Rubio-Romero, “Twitter as a tool for the management and analysis of emergency situations: A systematic literature review,” Int. J. Inf. Manage., vol. 43, PP.196–208, Dec. 2018
12. J. Berger and K. L. Milkman, “What makes online content go viral?” J. Mark. Res., vol. 49, no. 2, pp. 192–205, 2012
13. C. W. Scherer and H. Cho, “A social network contagion theory of risk perception,” Risk Anal., vol. 23, no. 2, pp. 261–267, Apr. 2003.
14. N. Bhuvana and I. Arul Aram, “Facebook and Whatsapp as disaster management tools during the Chennai (India) floods of 2015,” Int. J. Disaster Risk Reduction, vol. 39, Oct. 2019, Art. no. 101135.
15. L. Bui, “Social media, rumors, and hurricane warning systems in Puerto Rico,” in Proc. 52nd Hawaii Int. Conf. Syst. Sci., 2019, pp. 2667–2676.
16. S. Yardi and D. Boyd, “Tweeting from the Town Square?: Measuring geographic local networks,” Methods, vol. 77, no. 3, pp. 194–201, 2010
17. Curbera, F., Khalaf, R., Mukhi, N., Tai, S., Weerawarana, S.: The next step in web services. Commun. ACM 46(10), 29–34 (2003)
18. Kaplan, A.M., Haenlein, M.: Users of the world, unite! the challenges and opportunities of social media. Bus. Horiz. 53(1), 59–68 (2010)