INSTA CLONE

A PROJECT REPORT

Submitted by
Shubham Dahiya (20BCS4937)
Dibyansu Sharma (20BCS3498)
Adarsh Pratap Singh (20BCS3350)
Abhishek Yadav (20BCS2998)
Ankan Das (20BCS5394)

in partial fulfillment for the award of the degree of

Bachelors of Engineering

IN

Computer Science

Chandigarh University

March, 2023

1
 BONAFIDE CERTIFICATE

Certified that this project report “INSTA CLONE” is the bonafide work of
“Shubham Dahiya, Dibyanshu Sharma, Adarsh Pratap Singh, Abhishek
Yadav and Ankan Das” who carried out the project work under my/our
supervision.

<<Signature of the HoD>> <<Signature of the Supervisor>>

SIGNATURE SIGNATURE

<<Name of the Head of the Department>> <<Name>>

SUPERVISOR

<<Academic Designation>>
HEAD OF THE DEPARTMENT

<<Department>>
<<Department>>

Submitted for the project viva-voce examination held on 13 March 2023

INTERNAL EXAMINER EXTERNAL EXAMINER

2
 TABLE OF CONTENTS

List of Figures ............................................................................................................................. 5

Abstract……………………………………………………………...………………………….8

Abbreviations ………………………………………….……………………………………….9

CHAPTER 1. INTRODUCTION ......................................................................... 8

1.1. Identification of Client/ Need/ Relevant Contemporary issue………………………….8

1.2. Identification of Problem ............................................................................................... 10

1.3. Identification of Tasks .................................................................................................... 11

1.4. Timeline ......................................................................................................................... 16

REFERENCES ....................................................................................................... 18

APPENDIX ............................................................................................................. 19

1. Plagiarism Report............................................................................................................... 19

3
 List of Figures

Figure 1.1 …………………………………………………………………. Plagiarism Report

4
 ABSTRACT
The social media MERN web app project aimed to develop a comprehensive
platform for users to connect and share content online. This report provides an
overview of the project's scope, goals, and development process. The project utilized
the MERN stack, consisting of MongoDB, Express, React, and Node.js technologies.

The project team consisted of six members with various roles, including project
manager, backend developer, frontend developer, database developer, quality
assurance engineer, and UI/UX designer. The project followed a development cycle
that included identifying requirements, building and testing the web app, and
finalizing the product.

Throughout the development process, the team conducted various testing stages to
ensure the functionality, security, and user experience of the web app. This report
details the specific tasks and responsibilities of each team member, along with the
timeline and milestones achieved.

The final product of the social media MERN web app project includes various
features such as user authentication, post and comment functionality, a responsive
user interface, and optimized database queries. The project outcome successfully
meets the project objectives and provides a reliable and user-friendly social media
platform.
Overall, this report demonstrates the importance of proper planning, communication,
and testing in the development of a web application. The MERN stack technology
proved to be efficient and effective for developing a complex web app with multiple
features. The project outcome reflects the team's efforts and dedication in delivering
a successful product.

5
 ABBREVIATIONS

Here are some possible abbreviations that can be used in the report of the social
media MERN web app project:

• MERN: MongoDB, Express, React, and Node.js

• PM: Project Manager

• BD: Backend Developer

• FD: Frontend Developer

• DD: Database Developer

• QA: Quality Assurance Engineer

• UI/UX: User Interface/User Experience

• MVP: Minimum Viable Product

• API: Application Programming Interface

• CRUD: Create, Read, Update, Delete

• JWT: JSON Web Token

• XSS: Cross-Site Scripting

• CSRF: Cross-Site Request Forgery

• DBMS: Database Management System

• UIK: User Interface Kit

• CI/CD: Continuous Integration/Continuous Deployment

• VCS: Version Control System

• IDE: Integrated Development Environment

6
 INTRODUCTION

1.1. Identification of Client /Need / Relevant Contemporary issue

Social media apps have become an integral part of our lives, allowing us to connect
with people, share our thoughts and ideas, and stay up to date with the latest news
and trends. However, as the use of social media has grown, so have the challenges
associated with it. In this article, we will discuss the problems that social media apps
should resolve and the areas where current existing platforms fall short.

Privacy and Security: One of the most significant challenges that social media apps
face is ensuring the privacy and security of their users. Social media platforms have
access to a vast amount of personal data, and there is always a risk of this data being
misused. Therefore, social media apps should have robust privacy policies and
security measures in place to protect users' data.

Cyberbullying: Cyberbullying is a serious problem on social media, and it can have a

significant impact on the mental health and well-being of the victim. Social media
apps should take steps to prevent cyberbullying, such as providing users with the
ability to report abusive behavior and implementing strict penalties for offenders.

Fake News and Misinformation: Social media platforms have been accused of
spreading fake news and misinformation, which can have serious consequences, such
as influencing elections and spreading false health information. Social media apps
should take steps to prevent the spread of fake news and misinformation, such as
fact-checking articles and providing users with accurate information from reputable
sources.
7
Addiction: Social media addiction is a growing problem, and it can have a significant
impact on mental health and productivity. Social media apps should take steps to
encourage users to limit their usage, such as implementing time limits and providing
tools to monitor usage.

Content Moderation: Social media platforms have faced criticism for their handling
of controversial content, such as hate speech and violent content. Social media apps
should have clear guidelines for content moderation and take swift action to remove
content that violates these guidelines.

Inclusivity: Social media platforms should be inclusive of all users, regardless of

their race, gender, or sexual orientation. Social media apps should take steps to
ensure that their platforms are welcoming and safe spaces for all users.

While existing social media platforms have made strides in addressing these
challenges, there are still areas where they fall short. For example, many social media
platforms have been slow to address the problem of fake news and misinformation.
Additionally, some social media platforms have faced criticism for their handling of
content moderation, particularly when it comes to hate speech.

To address these challenges, social media apps can take several steps. First, they
should prioritize user privacy and security by implementing robust security measures
and privacy policies. Second, social media apps should take steps to prevent
cyberbullying and promote inclusivity. Third, they should take a proactive approach
to preventing the spread of fake news and misinformation.

8
In conclusion, social media apps have become an integral part of our lives, and they
have the potential to bring people together and facilitate meaningful connections.
However, to fully realize this potential, social media apps must address the
challenges outlined above and provide a safe, welcoming, and inclusive environment
for all users.

1.2. Identification of Problem

Here are some of the core problems of existing social media web apps:

Privacy concerns: Social media web apps often collect and store large amounts of
user data, which can be misused or hacked, leading to privacy concerns. Users are
often unaware of how their data is being used or shared, which can lead to distrust
and decreased usage.

Filter bubbles and echo chambers: Social media web apps use algorithms to curate
content for users, which can create filter bubbles and echo chambers. This can limit
users' exposure to diverse opinions and information, leading to a polarized and
divisive online community.

Addiction and mental health: Social media web apps are designed to be engaging and
addictive, which can have negative effects on mental health, particularly for users
who spend excessive amounts of time on social media.

Inequality and bias: Social media web apps can perpetuate inequality and bias by
reinforcing existing power dynamics and excluding marginalized groups.

9
Addressing these core problems of social media web apps will require a multi-
pronged approach, including technology solutions, user education, and policy
changes. Developers of social media web apps can prioritize privacy and security,
create tools to combat cyberbullying and hate speech, promote diverse opinions and
information, and work towards creating a more equitable and inclusive online
community.

1.3. Identification of Tasks

Identifying, building, and testing a social media MERN web app involves several key
tasks that need to be completed. Here is an overview of the tasks involved in each
stage:

Identifying the Social Media MERN Web App:

1.) The first stage in developing a social media MERN web app is to identify the
scope and objectives of the project. This involves defining the features and
functionalities that the web app should have, as well as the user experience and
interface design. The following tasks are required to identify the social media MERN
web app:

a) Define the project scope: The scope of the project must be clearly defined,
including the features, functionalities, and user experience. The project scope can be
defined by brainstorming with the stakeholders, creating a mind map or a feature list.

b) Design the user interface: The user interface design must be created based on the
project scope. The wireframes, design elements, and color palette must be defined for
the web app.

10
c) Choose the MERN stack: The MERN stack, which includes MongoDB, Express,
React, and Node.js, must be chosen as the technology stack for the web app.

2.) Building the Social Media MERN Web App:

The second stage is building the social media MERN web app, which involves
developing the frontend and backend of the app, and integrating them to create a
functional web app. The following tasks are required to build the social media
MERN web app:

a) Set up the development environment: The development environment must be set

up with the necessary software and tools, including Node.js, MongoDB, and a code
editor.

b) Develop the backend with Node.js and Express: The backend of the web app must
be developed using Node.js and Express, including the APIs for user authentication,
posting, commenting, and sharing.

c) Set up the MongoDB database: The MongoDB database must be set up and
configured to store user information, posts, comments, and other data.

d) Develop the frontend with React: The frontend of the web app must be developed
using React, including the user interface and components for displaying posts,
comments, and other information.

e) Implement user authentication: User authentication must be implemented using a

library like Passport.js to allow users to log in, log out, and create accounts.

f) Implement post and comment functionality: The functionality for users to create
11
posts, comment on posts, and share posts with other users must be developed.

3.) Testing the Social Media MERN Web App:

The final stage is testing the social media MERN web app, which involves ensuring
that the app functions correctly and meets the project scope requirements. The
following tasks are required to test the social media MERN web app:

a) Test the backend: The backend must be tested thoroughly to ensure that it is
functioning correctly and meets the project scope requirements. This includes testing
the APIs for user authentication, posting, commenting, and sharing.

b) Test the frontend: The frontend must be tested thoroughly to ensure that it is
functioning correctly and meets the project scope requirements. This includes testing
the user interface, components, and functionality for displaying posts, comments, and
other information.

c) Test user authentication: User authentication must be tested thoroughly to ensure

that users can log in, log out, and create accounts without any issues.

d) Test post and comment functionality: The functionality for creating posts,
commenting on posts, and sharing posts with other users must be tested thoroughly to
ensure that it is functioning correctly and meets the project scope requirements.

e) Conduct user testing: The web app must be tested with a group of users to gather
feedback and identify any issues or bugs.

f) Deploy the web app: The web app must be deployed to a hosting platform like
Heroku or AWS and tested in the live environment.
12
In summary, identifying, building, and testing a social media web app using the
MERN stack involves a series of interdependent tasks that require a combination of
frontend and backend development skills, as well as knowledge of databases and user
authentication. Each task requires careful planning and attention to detail to ensure
that the final product meets user requirements and functionality expectations.

1.) Backend Developer (Dibyansu Sharma [20BCS3498], Adarsh Pratap Singh

[20BCS3350):
a. Set up development environment
b. Create backend with Node.js and Express
c. Implement user authentication
d. Implement post and comment functionality
e. Write unit tests
f. Conduct integration testing

2.) Frontend Developer (Shubham Dahiya [20BCS4937]):

a. Set up development environment
b. Develop frontend with React
c. Develop components for displaying posts, comments, and other information
d. Conduct unit testing
e. Conduct integration testing
f. Conduct system testing

3.) Database Administrator (Adarsh Pratap Singh [20BCS3350]):

a. Configure MongoDB database
b. Design database schema
c. Implement database queries

13
d. Optimize database performance
e. Write unit tests for database
f. Conduct integration testing for database

4.) UI/UX Designer (Abhishek Yadav [20BCS2998]):

a. Create wireframes and mockups
b. Design user interface and user experience
c. Conduct user research and usability testing
d. Develop style guide and design system
e. Work with frontend developer to ensure design implementation
f. Conduct user acceptance testing for design

5.) Quality Assurance Engineer (Ankan Das [20BCS5394], Abhishek Yadav

[20BCS2998]):
a. Write test cases
b. Conduct unit testing
c. Conduct integration testing
d. Conduct system testing
e. Conduct security testing
f. Write test reports and bug reports
These tasks are just a sample and may vary depending on the specific project
requirements and the skills and strengths of the team members. It's important for the
project manager to regularly communicate with the team members to ensure that they
are on track and that any issues or challenges are addressed in a timely manner. By
dividing tasks in this way, the team can work more efficiently and effectively
towards completing the project.

14
 1.4. Timeline

Week 1:
Backend Developer: Set up development environment and create backend with
Node.js and Express.
Frontend Developer: Set up development environment and develop frontend with
React.
Database Developer: Configure MongoDB database and design database schema.
UI/UX Designer: Create wireframes and mockups.

Week 2-3:
Backend Developer: Implement user authentication and post and comment
functionality.
Frontend Developer: Develop components for displaying posts, comments, and other
information.
Database Developer: Implement database queries and optimize database
performance.
UI/UX Designer: Design user interface and user experience.

Week 4-5:
Backend Developer: Write unit tests and conduct integration testing.
Frontend Developer: Conduct unit testing and integration testing.
Database Developer: Write unit tests and conduct integration testing for database.
UI/UX Designer: Conduct user research and usability testing.

Week 6-7:
Backend Developer: Conduct system testing and write test reports.
Frontend Developer: Conduct system testing and write test reports.
15
Database Developer: Conduct system testing and write test reports.
Quality Assurance Engineer: Write test cases and conduct unit testing.

Week 8-9:
Backend Developer: Conduct security testing and write test reports.
Frontend Developer: Conduct security testing and write test reports.
Database Developer: Conduct security testing and write test reports.
Quality Assurance Engineer: Conduct integration testing and write test reports.

Week 10-11:
Backend Developer: Fix any bugs or issues and finalize the backend.
Frontend Developer: Fix any bugs or issues and finalize the frontend.
Database Developer: Fix any bugs or issues and finalize the database.
UI/UX Designer: Finalize design system and ensure design implementation.

16
 REFERENCES

1. ASP.NET 4.0 in simple steps: Dreamtech press- Books & Education Solutions. Dreamtech
Press- Books & Education Solutions |. (2019, February 22). Retrieved March 17, 2023,
from http://www.dreamtechpress.com/product/asp-net-4-0-in-simple-steps/

2. Balagurusamy, E. Programming in C#. New Delhi: Tata McGraw-Hill, 2007

3. ASP.NET 4.0 in simple steps: Dreamtech press- Books & Education Solutions. Dreamtech
Press- Books & Education Solutions |. (2019, February 22). Retrieved March 17, 2023,
from http://www.dreamtechpress.com/product/asp-net-4-0-in-simple-steps/

4. https://en.wikipedia.org/wiki/ Facebook Wikipedia 10 August, 2013

5. http://stackoverflow.com/. Stackoverflow6.http://youtube.com/7.Mohan, Naina.

Trainer and Developer, DreamTech Labs

6. Abraham, Ajdin. React.js Essentials: A Fast-Paced Guide to Designing and Building

Scalable and Maintainable Web Apps with React.js. Packt Publishing, 2019.

7. Chen, Yan and Jinhong Xie. “Online Consumer Review: Word-of-Mouth as a New Element
of Marketing Communication Mix.” Management Science 54, no. 3 (2008): 477-491.

8. Zhang, Jie and Duncan J. Watts. “Social Influence in Networks of Strangers.” Proceedings
of the National Academy of Sciences of the United States of America 105, no. 41 (2008):
15716-15721.

17
 APPENDIX

1. Plagiarism Report

Figure 1.1

18