Hello CVR : A Mern Stack Social Media Hub for

College Memories
A Project Report
submitted in the partial fulfillment of the
requirements for the award of the degree of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING

By

K.Kaushik 20B81A0516
V.Srikar Reddy 20B81A0548
G.Divyamani 20B81A0511

Under the guidance of

Dr.Raghava M
Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CVR COLLEGE OF ENGINEERING

(An Autonomous institution, NBA, NAAC Accredited
and Affiliated to JNTUH , Hyderabad)

Vastunagar, Mangalpalli (V), Ibrahimpatnam (M),

Rangareddy (D), Telangana- 501 510

March 2024

1
 DECLARATION

I certify that
a. The work contained in this report is original and has been done by me under the
guidance of my supervisor(s).
b. The work has not been submitted to any other Institute for any degree or diploma.
c. I have followed the guidelines provided by the Institute in preparing the report.
d. I have conformed to the norms and guidelines given in the Ethical Code of Conduct of
the Institute.
e. Whenever I have used materials (data, theoretical analysis, figures, and text) from
other sources, I have given due credit to them by citing them in the text of the report
and giving their details in the references. Further, I have taken permission from the
copyright owners of the sources, whenever necessary.

Place: Hyderabad Signature of the Student

Date: 21-3-2024 Roll No.

2
 CERTIFICATE

This is to certify that the Project Report entitled “Hello CVR : A Mern Stack Social Media
Hub for College Memories” that is being submitted by K.Kaushik (20B81A0516), V.Srikar
Reddy(20B81A0548), G.Divyamani(20B81A0511) to the CVR College of Engineering in
partial fulfilment of requirement for the award of degree of Bachelor of Technology in
Computer Science and Engineering, is a bonafide record work carried out by them under my
guidance and supervision during the Academic Year 2023-2024.
The results embodied in this project work has not been submitted to any other University or
Institution for the award of any degree or diploma.

Supervisor Head of the Department

Raghava M Dr. A.Vani Vathsala
Professor

3
 ACKNOWLEDGEMENT

The satisfaction of that accompanies the successful completion of any task would be
incomplete without the mention of the people who made it possible and whose
encouragement and guidance has been a source of inspiration throughout the course of the
project.

It is a great pleasure to convey out profound sense of gratitude to our principle Dr.
K.Ramamohan Reddy, Vice-Principle Prof. L. Siva Reddy, Dr. A. Vani Vathsala, Head
of CSE Department, CVR College of Engineering, for having been kind enough to arrange
necessary facilities for executing the project in the college.

We deem it a pleasure to acknowledge our sense of gratitude to our project guide Dr

Raghava M under whom we have carried out the project work. Her incisive and objective
guidance and timely advice encouraged us with constant flow of energy to continue the
work.

We wish a deep sense of gratitude and heartful thanks to management for providing
excellent lab facilities and tools. Finally, we thank all those guidance helpful us in this
regard.

K.Kaushik (20B81A0516)
V.Srikar Reddy(20B81A0548)
G.Divyamani(20B81A0511)

4
 ABSTRACT
Hello CVR stands as a beacon of connectivity within college communities, offering a
comprehensive MERN stack solution designed to immortalize and share the cherished
memories of student life. With its intuitive interface and robust feature set, Hello CVR
empowers users to seamlessly create, edit, and delete posts, capturing the essence of their
college experiences with ease. Harnessing the power of Google OAuth for secure
authentication, the platform ensures a safe and trusted environment for users. One
distinguishing feature of Hello CVR is its inclusivity, extending beyond current students to
alumni, who can also interact, make posts, and contribute to the platform, fostering a sense of
continuity and community across generations. Hello CVR prioritizes user experience with
built-in pagination, facilitating effortless navigation through an ever-growing repository of
memories. Through a suite of CRUD operations, users maintain complete control over their
digital narratives, shaping their online presence authentically. Encouraging community
engagement, Hello CVR enables users to express appreciation through likes and comments,
fostering a sense of camaraderie among peers and alumni alike. Leveraging advanced
algorithms, the platform provides personalized recommendations for related posts, enriching
the exploration of shared experiences. Additionally, Hello CVR simplifies content discovery
with tag and title-based search functionality, ensuring efficient retrieval of specific memories.
With Hello CVR, college memories are not just preserved—they are celebrated, shared, and
cherished for generations to come, fostering a continuum of connection and nostalgia that
spans beyond graduation. Welcome to Hello CVR—a digital hub where the past, present, and
future of college life intertwine in a tapestry of memories and shared experiences.

5
 CONTENTS

Table of Contents Page No.

1 Introduction

1.1 Motivation 1

1.2 Problem statement 1

1.3 Project Objectives 2

2 Literature Survey

2.1 Existing work 3

2.2 Limitations of Existing work 4

3 Software & Hardware specifications

3.1 Software requirements 5

3.2 Hardware requirements 5

4 Proposed System Design

4.1 Proposed methods 6

4.2 Class Diagram 7

4.3 Use case Diagram 8

4.4 Activity Diagram 8

4.5 Sequence Diagram 9

4.6 System Architecture 9

4.7 Technology Description 10

5 Implementation & Testing

5.1 Front page Screenshots 12

5.2 Backend Code 16

5.3 Frontend Code 22

6 Conclusion & Future scope 35

References 36

6
 INTRODUCTION
1.1 MOTIVATION

Hello CVR is driven by a dual motivation: the preservation of cherished college memories
and the cultivation of a strong sense of community among students and alumni. Recognizing
the fleeting nature of these experiences, Hello CVR serves as a digital repository where users
can capture and celebrate the moments that define their collegiate journey.

Moreover, Hello CVR aims to foster connection and nostalgia among alumni by providing a
platform for them to stay connected, share stories, and relive memorable moments from their
time at university. This sense of belonging transcends graduation, creating a vibrant
community that spans generations.

Additionally, Hello CVR seeks to facilitate networking opportunities for both current
students and alumni, recognizing the importance of professional connections and mentorship
in career development. By leveraging shared college experiences, Hello CVR empowers
individuals to forge meaningful connections and access valuable support for personal and
professional growth.

1.2 PROBLEM STATEMENT

In the digital age, where college experiences serve as a tapestry of memories, interactions,
and personal growth, there remains a significant gap: the absence of a unified and secure
platform that seamlessly consolidates, preserves, and celebrates these diverse memories while
fostering continuous engagement among current students, alumni, and faculty within a
privacy-centric environment. The challenge lies in creating a digital ecosystem that
transcends the limitations of existing social media platforms, offering a dedicated space
where users can authentically capture and share their college journey while fostering
meaningful connections across generations. This entails addressing the need for a platform
that prioritizes user privacy and security, facilitates seamless interaction and storytelling, and
cultivates a sense of community and belonging among all stakeholders within the college
ecosystem.

1
1.3 PROBLEM OBJECTIVE
Develop a unified platform: Create a digital platform that serves as a centralized hub for
consolidating and preserving college memories, interactions, and experiences in a cohesive
manner.

Ensure privacy and security: Implement robust privacy and security measures to safeguard
user data and ensure a safe environment for users to share their memories and engage with
the community.

Facilitate seamless interaction: Design intuitive features and functionalities that enable
users to seamlessly interact with the platform, including posting, commenting, liking, and
exploring content.

Foster continuous engagement: Cultivate an environment that encourages continuous

engagement among current students, alumni, and faculty by providing opportunities for
meaningful interactions, discussions, and collaborations.

Promote community building: Foster a sense of belonging and community by facilitating

connections and interactions among users, thereby enhancing the overall college experience
and alumni engagement.

Enhance user experience: Prioritize user experience by optimizing platform usability,

incorporating user feedback, and implementing features that enhance content discovery,
navigation, and customization.

Encourage storytelling and reflection: Provide tools and resources that empower users to
authentically capture, curate, and share their college journey, fostering self-reflection and
personal growth.

Support networking and mentorship: Create opportunities for networking and mentorship
among users, enabling them to connect with peers, alumni, and faculty for professional
development and support.

2
Promote inclusivity and diversity: Ensure that the platform is inclusive and accessible to
users from diverse backgrounds, cultures, and experiences, fostering a sense of diversity and
inclusivity within the college community.

2. LITERATURE SURVEY

2.1 EXISTING WORK

Social Media Platforms: Review existing social media platforms such as Facebook,
Instagram, and Twitter to understand their features, user engagement mechanisms, and
privacy policies. Analyze how these platforms facilitate the sharing and preservation of
personal memories and interactions.

Digital Storytelling Tools: Investigate digital storytelling tools such as Adobe Spark, Canva,
and Storybird to understand how they enable users to create and share multimedia narratives.
Assess their usability and potential for enhancing the storytelling aspect of the platform.

Community Building Platforms: Study community-building platforms like Reddit, Discord,

and Slack to analyze their mechanisms for fostering interaction, collaboration, and sense of
belonging among members. Identify strategies for nurturing a vibrant community within the
college memories platform.

Alumni Engagement Platforms: Research platforms designed specifically for alumni

engagement, such as Graduway, Almabase, and EverTrue. Examine how these platforms
facilitate networking, mentorship, and fundraising activities among alumni and consider
incorporating similar functionalities into the college memories platform.

Memory Preservation Research: Explore research in psychology and memory studies to

gain insights into the significance of preserving personal memories and the impact of
reminiscence on well-being. Consider how the platform can leverage these findings to
encourage users to reflect on and share their college memories.

Social Network Analysis: Study social network analysis techniques to analyze patterns of
interaction and community structure within the platform. Explore how network analysis can
be used to identify influential users, detect community dynamics, and enhance community
engagement strategies.

3
2.2 LIMITATIONS OF EXISTING WORK

The limitations of the existing work include:

Privacy Concerns: Many existing social media platforms have faced criticism regarding
privacy practices, including data breaches and unauthorized access to user information. This
raises concerns about the security and confidentiality of personal memories shared on these
platforms.

Fragmented Experience: Users may find it challenging to consolidate their college

memories across multiple platforms, such as Facebook, Instagram, and Twitter. This
fragmentation can result in a disjointed experience and difficulty in accessing and revisiting
memories.

Lack of Focus on Education: General-purpose social media platforms may not prioritize
features specifically tailored to the needs of educational communities, such as alumni
engagement, mentorship opportunities, and academic collaboration.

Alumni Disconnection: Alumni engagement may be challenging to sustain on traditional

social media platforms, as alumni may feel disconnected from the broader user base
dominated by current students and unrelated content.

Limited Storytelling Features: Existing platforms may lack robust storytelling features,
such as multimedia integration, narrative templates, and collaborative storytelling tools,
limiting users' ability to creatively express and share their memories.

Engagement Fatigue: Users may experience engagement fatigue on existing platforms due
to the constant stream of content and notifications, leading to decreased interest in preserving
and revisiting college memories over time.

Inadequate Community Moderation: The lack of effective community moderation tools on

existing platforms may result in negative interactions, spam, and inappropriate content,
detracting from the overall user experience and discouraging engagement.

4
Limited Alumni Networking: Alumni networking features on existing platforms may be
limited in functionality and effectiveness, hindering alumni from connecting with peers,
accessing career opportunities, and staying engaged with their alma mater.

CHAPTER 3

3.1 SOFTWARE REQUIREMENTS

1. Node.js and npm: Node.js provides the server-side runtime environment and npm (Node
Package Manager) is be used to manage dependencies.

2. MongoDB: MongoDB database for storing job postings, user information, and other
necessary data. MongoDB Atlas is used for cloud-based service.

3. Express.js: Express.js is used as the backend framework for handling HTTP requests,
routing and middleware for the application.

4. React: It is a JavaScript Library used for building interactive and reusable UI components.

5. RESTful API: Implemented a RESTful API using Express.js to handle communication

between the frontend and the backend.

6. Frontend Libraries: Axios for making HTTP requests.

3.2 HARDWARE REQUIREMENTS

The hardware specifications will vary based on factors like the expected user traffic,
application complexity, and budget. For a basic development setup, you can consider the
following:

1. Processor: Multi-core processor (e.g., Intel Core i5 or higher) for better performance
during development.

2. RAM: At least 4GB of RAM, although more RAM will help in running multiple
development tools simultaneously.

5
3. Storage: Sufficient free disk space for your codebase, database, and other development
tools.

4. Internet Connection: A stable and reliable internet connection for development and
testing.

4. PROPOSED SYSTEM DESIGNS

4.1 PROPOSED METHOD

The proposed method for developing the Hello CVR application is structured around a
comprehensive series of steps, beginning with a meticulous requirement analysis. This
involves carefully dissecting the abstract and motivation to identify the core functionalities
required, such as user authentication, post management, and community interaction features.
By aligning these requirements with the overarching goal of preserving college memories and
fostering a sense of community, a clear roadmap is established for the subsequent stages of
development.

Following requirement analysis, the system design phase focuses on architecting a robust and
scalable system architecture. Class diagrams serve as the blueprint for identifying the main
components of the system, such as the client, server, and database. Sequence diagrams
provide insight into the sequence of interactions between these components during various
user actions, ensuring smooth communication and data flow. With a solid foundation in
place, attention shifts to database design, where the schema is meticulously crafted to
represent entities like users, posts, and comments, ensuring data integrity and optimal query
performance.

With the groundwork laid out, the development process commences with backend and
frontend implementation. Node.js and Express.js are utilized to build the backend logic,
offering a flexible and efficient platform for handling user authentication, post management,
and other core functionalities. Concurrently, React.js is employed for frontend development,
enabling the creation of intuitive user interfaces that seamlessly integrate with the backend.
Throughout development, rigorous testing is conducted to verify functionality, performance,

6
and security, ensuring a robust and reliable application. Finally, deployment to a scalable
hosting environment and ongoing maintenance ensure the Hello CVR application remains
responsive to user needs and continues to fulfill its mission of preserving cherished college
memories.

4.2 CLASS DIAGRAM

7
4.3 USE CASE DIAGRAM

4.4 ACTIVITY DIAGRAM

8
4.5 SEQUENCE DIAGRAM

9
4.6 SYSTEM ARCHITECTURE

4.7 TECHNOLOGY DESCRIPTION

10
HTML: HTML (Hypertext Markup Language) is standard markup language used to
create web pages. It defines the structure and content of a web page using a variety of tags
and attributes.HTML documents consist of nested elements, with each element having a
start tag, content, and an end tag.HTML is a foundational technology for the web, and it
provides the basic building blocks for the structure and presentation of web pages.

CSS: CSS (Cascading Style sheets) is a language used to style and layout web pages. It
provides a way to separate content from presentation, allowing developers to create
consistent and visually appealing designs. It can be used in combination with HTML and
JavaScript to create interactive and dynamic user interfaces. CSS is constantly evolving
with new features and capabilities being added regularly.

JS: JavaScript is a high-level interpreted programming language used for developing web
applications and dynamic user interfaces. It is often used in conjunction with HTML and
CSS to create interactive and responsive web pages. JavaScript is a versatile language that
supports object-oriented, functional, and imperative programming paradigms.

React JS Framework: React (also known as React.js or ReactJS) ReactJS is a simple,

feature rich, componentbased JavaScript UI library. React community compliments React
library by providing large set of ready-made components to develop web application in a
record time. React community also provides advanced concept like state management,
routing, etc., on top of the React library.

Express: Express.js is a small framework that works on top of Node.js web server
functionality to simplify its APIs and add helpful new features. It makes it easier to
organize your application’s functionality with middleware and routing. It adds helpful
utilities to Node.js HTTP objects and facilitates the rendering of dynamic HTTP objects.

Node.js: Node.js is an open-source and cross-platform JavaScript runtime environment. It

is a popular tool for almost any kind of project. A Node.js app runs in a single process,
without creating a new thread for every request. Node.js provides a set of asynchronous
I/O primitives in its standard library that prevent JavaScript code from blocking and
generally, libraries in Node.js are written using non-blocking paradigms, making blocking
behaviour the exception rather than the norm.

11
MongoDB: MongoDB is a popular open-source NoSQL document-oriented database that
allows for the storage and retrieval of unstructured data. It provides a flexible data model,
automatic high availability. MongoDB also features dynamic schema support, allowing
for easy modifications to data models during development

12
 5. IMPLEMENTATION & TESTING
5.1 Front Page Screenshots

Signup Page

Sign in Page

13
 Posts Displayed

Form for Creating a Memory

14
Description for every post and Comments for every Post

Search Posts using tags and filters

15
Posts are Recommended for the user

16
5.2 Backend Code

Index.js

Routes/posts.js

17
Routes/users.js

Models/PostMessage.js

18
Models/user.js

Middleware

19
controllers/posts.js

20
21
22
controllers/user.js

23
5.3 Frontend Code

Index.js

App.js

24
src/api/index.js

src/constants/actionTypes.js

25
src/actions/auth.js

src/actions/posts.js

26
27
src/reducers/auth.js

src/reducers/index.js

src/reducers/posts.js

28
src/components/Home/Home.js

29
src/componenets/pagination.jsx

30
src/components/Navbar/navbar.js

31
src/components/Form/Form.js

32
src/components/Auth/Auth.js

33
34
src/components/posts/Posts.js

src/components/posts/post/post.js

35
36
 6. CONCLUSION AND FUTURE SCOPE

In conclusion, the development of the Hello CVR application represents a significant

endeavor aimed at preserving cherished college memories and fostering a sense of
community among users. Through meticulous requirement analysis, systematic system
design, and iterative development processes, the application has been crafted to deliver
intuitive user experiences and robust functionality. By aligning with the project's motivations
and leveraging feedback loops to incorporate user input, the Hello CVR application stands as
a testament to the dedication of the development team in creating a platform that resonates
with users and fulfills its purpose.

Looking ahead, the future scope for the Hello CVR application is promising. With ongoing
advancements in technology and evolving user expectations, there are numerous
opportunities to enhance and expand the application further. Potential future developments
may include the integration of advanced recommendation algorithms to personalize content
recommendations, the implementation of augmented reality features to enrich the storytelling
experience, and the incorporation of social networking functionalities to facilitate deeper
connections among users. Additionally, efforts to optimize performance, enhance security,
and expand platform accessibility will be essential to ensuring the continued success and
longevity of the Hello CVR application in preserving college memories and fostering
community engagement. As the digital landscape continues to evolve, the Hello CVR
application is poised to remain a valued companion for users in their journey of reminiscing
and connecting with their college experiences.

37
 REFERENCES

[1] Twenty-Five Years of Social Media: A Review of Social Media Applications and
Definitions from 1994 to 2019 https://www.liebertpub.com/doi/full/10.1089/cyber.2020.0134

[2] Advances in Social Media Research: Past, Present and Future

https://link.springer.com/article/10.1007/s10796-017-9810-y

[3] https://legacy.reactjs.org/docs/getting-started.html

[4] https://nodejs.org/docs/latest/api/

[5] https://www.mongodb.com/docs/

[6] https://mui.com/material-ui/

[7] https://getbootstrap.com/

[8] https://www.konstantinfo.com/blog/create-social-media-app/

38