Insta-clone

CHAPTER 1
1 INTRODUCTION

1.1 BACKGROUND AND PROJECT SUMMERY

Background
In the age of social media, platforms like Instagram have revolutionized the way we connect, share, and
interact with visual content. Instagram's immense popularity, innovative features, and user-friendly design
have made it a benchmark for social media success. The "Insta Clone" project emerges from the desire to
understand, replicate, and customize the Instagram experience.
Motivation
 Instagram's impact on social media culture.
 The educational value of recreating a popular platform.
 Opportunities for customization and innovation in social media.

Project Summary
"Insta Clone: Recreating Instagram"
Project Objective:
The "Insta Clone" project aims to replicate the core features of Instagram, including user registration, media
upload, content feed, likes, comments, direct messaging, and user profiles.
Key Features:
 User Registration and Authentication
 Media Upload
 Content Feed
 Likes and Comments
 Direct Messaging
 User Profiles
1.2 PROBLEM STATEMENT
In today's digital landscape, social media platforms like Instagram have become ubiquitous, offering
powerful tools for content sharing and social interaction. However, there is a growing need for a
customizable and accessible alternative. The "Insta Clone" project addresses this demand by setting out to
replicate the core features of Instagram.

Page |
Insta-clone
The problem at the heart of this project is the absence of an easily adaptable solution for individuals and
organizations looking to craft their unique social media experiences. Whether it's driven by privacy
concerns, educational purposes, or the desire for innovative features, there's a clear need for a platform that
allows users to tailor the Instagram experience to their specific objectives.

The "Insta Clone" project is an ambitious response to this problem. By providing a framework for recreating
Instagram's essential features, it offers users the power to customize, innovate, and understand the
technology behind social media applications. This project aims to empower developers, entrepreneurs, and
researchers by opening the door to endless possibilities in the world of social media innovation and
personalization.

1.3 KEY OBJECTIVE

 To Replicate Instagram's Core Features: The primary objective is to faithfully replicate the essential
features of Instagram, including user registration, media upload, content feed, likes, comments, direct
messaging, and user profiles.
 To Enable Customization and Innovation: To provide a platform that allows users to customize and
extend the clone with unique features, such as AI-driven recommendations, augmented reality filters,
or advanced analytics, fostering innovation in social media applications.
 To Facilitate Educational Opportunities: To offer an educational resource for developers,
entrepreneurs, and researchers to understand the underlying technology, design principles, and
security considerations of modern social media platforms through hands-on experience.
 To Enhance Privacy and Security: Implement robust security measures to protect user data and
privacy within the "Insta Clone" platform, ensuring a safe environment for users to interact.
 To Promote Collaboration and Learning: Create a community around the project where developers
can collaborate, learn from each other, and collectively explore new possibilities in social media
application development.

1.4 SCOPE

What the Project Can Do:

Replicate Instagram Features: The project can closely replicate Instagram's core features, such as user
registration, content feed, likes, comments, direct messaging, and user profiles, providing users with an
authentic Instagram-like experience.

Page |
Insta-clone
Customization: Users can customize and extend the "Insta Clone" with additional features, fostering
innovation and enabling experimentation with unique functionalities.

Page |
Insta-clone

What the Project Cannot Do:

Access Instagram Data: The project cannot access or retrieve data from the official Instagram platform. It is
designed to operate independently from Instagram.
Official Instagram Integration: The project does not have the capability to integrate with official Instagram
APIs or services, as it aims to be a separate and standalone platform.

1.5. TECHNOLOGY AND LITERATURE REVIEW

 Social Media Platforms: Review of popular social media platforms, including Instagram, and their
core features. This section will provide an understanding of the features that the "Insta Clone" project
aims to replicate.
 Frontend Technologies: Overview of frontend technologies, such as HTML, CSS, JavaScript, and
React.js, commonly used in building user interfaces for social media applications.
 Backend Technologies: Exploration of backend technologies like Node.js, Express.js, and databases
like MongoDB, which are essential for creating the server-side logic and data storage.
 Authentication Methods: Examination of authentication methods, particularly the use of JSON Web
Tokens (JWT) for secure user registration and login processes.
 Cloud Hosting: Discussion of cloud hosting platforms, such as AWS and Heroku, that can be used to
deploy the application for public access.
 Customization and Innovation in Social Media: A literature review on how other social media
platforms have customized and introduced innovative features to improve user engagement and
satisfaction.
 Security in Social Media Applications: Exploration of best practices and security considerations in
social media application development, including user data protection and privacy.
 Educational Resources: Identification of educational resources, tutorials, and documentation relevant
to the technologies and practices involved in building social media applications.
 Challenges and Ethical Considerations: Discussion of potential challenges in replicating social media
platforms and ethical considerations related to data privacy, copyright, and intellectual property
rights.
 Community and Collaboration: Literature on the importance of building a community around the
project for collaborative development, knowledge sharing, and support.

Page |
Insta-clone

CHAPTER 2
2. SYSTEM REQUIREMENTS STUDY

2.1 STUDY OF CURRENT SYSTEM

 Introduction to Social Media Platforms: Provide an overview of the current landscape of social media
platforms, emphasizing their popularity and significance in modern communication.
 Instagram as a Benchmark: Describe Instagram as a leading example in the social media domain,
highlighting its user base, key features, and cultural impact.
 Core Features of Instagram: Detail the core features of Instagram, including user registration and
authentication, content feed, likes, comments, direct messaging, and user profiles.
 User Engagement: Discuss how Instagram successfully engages users through visual content sharing,
social interactions, and content discovery.
 Privacy and Security: Address the importance of privacy and security considerations in social media
platforms, such as user data protection and content security.
 User Experience: Analyse the user experience on Instagram, focusing on design, usability, and the
factors that contribute to its success.
 Monetization Strategies: Briefly touch upon how platforms like Instagram employ monetization
strategies, if relevant, to sustain their operations.
 Evolving Trends: Highlight any recent trends and innovations in social media that are relevant to the
"Insta Clone" project, such as the rise of short-form video content or the integration of augmented
reality features.
2.2 PROBLEMS AND WEAKNESS OF CURRENT SYSTEM

 Data Privacy Concerns: Social media platforms often face criticism regarding data privacy and the
handling of user information. Users may be concerned about how their data is collected, stored, and
shared.
 Algorithmic Content Selection: Algorithms used by platforms like Instagram to curate users' content
feeds can sometimes lead to issues like filter bubbles and echo chambers, limiting diverse content
exposure.
 Cyberbullying and Online Harassment: Social media platforms frequently deal with issues of
cyberbullying and online harassment, which can negatively impact user experiences and mental
health.
Page |
Insta-clone
 Content Moderation Challenges: The scale of user-generated content on platforms like Instagram can
pose challenges in terms of content moderation, making it difficult to prevent inappropriate or
harmful content from reaching users.
 Misinformation and Fake News: The spread of misinformation and fake news is a significant issue on
social media platforms, potentially leading to public harm and confusion.
 Addictive Design Patterns: Social media platforms often use addictive design elements to keep users
engaged, which can lead to concerns about excessive screen time and its impact on well-being.
 Copyright and Intellectual Property Issues: Users sometimes face copyright and intellectual property
issues, particularly when sharing content that doesn't belong to them.
 Complex User Interfaces: While platforms like Instagram are known for their user-friendly
interfaces, complex features or design elements can sometimes confuse or overwhelm users.
 Limited Customization: Users may find themselves limited in terms of personalization and
customization options on existing platforms, leading to a desire for more flexible and tailored
experiences.
 Lack of Open Source Alternatives: Many popular social media platforms are closed-source, limiting
the ability for users and developers to modify and adapt the platform to their specific needs.

2.3 REQUIREMENTS OF NEW SYSTEM

 User Registration and Authentication: Users must be able to register for accounts, including email
verification and password recovery features, using Node.js and secure authentication methods.
 Media Upload: Users should be able to upload photos and videos from their devices and store them
using a database, such as MongoDB.
 Content Feed: A dynamic content feed displaying posts from users followed by the current user,
implemented using React.js for the frontend.
 Likes and Comments: Enable users to like and comment on posts, fostering user engagement with
real- time updates, powered by Node.js and React.js.
 Direct Messaging: Users should be able to have private conversations and exchange messages using
Node.js for the backend and React.js for the frontend.
 User Profiles: Detailed user profiles with posts, followers, and following lists, stored in MongoDB.
 Customization: Users can customize profiles, including profile pictures and bios, with the help of
React.js components.

Page |
Insta-clone
 Non-Functional Requirements:
 Performance: The system should offer fast response times for actions like loading feeds, uploading
media, and sending messages, with optimization of Node.js server performance.
 Security: Implement secure user data storage and authentication using Node.js, and ensure secure
media storage through Cloudinary's services.
 Scalability: Ensure that the system can handle an increasing number of users and posts by optimizing
code and database design.
 Usability: Provide an intuitive user interface using React.js, responsive design for various devices,
and accessible features.
 Data Privacy: Respect user data privacy, including data retention policies and user data control
options, in compliance with GDPR and data protection laws.

2.4 FEASIBILITY STUDY

a. Technical Feasibility: The project is technically feasible using Node.js, React.js, MongoDB, and
Cloudinary, which are accessible and compatible technologies for the project's implementation.
b. Cost Feasibility: The project's cost feasibility is determined based on the available budget and cost
estimates for development, hosting, and maintenance, considering the cost of Cloudinary services.
c. Schedule Feasibility: A detailed project timeline has been established, including milestones and deadlines,
to ensure that the project can be completed within the specified time frame.
d. Integration with Existing Systems: The "Insta Clone" can be integrated with various services, including
Cloudinary for media storage and hosting platforms for deployment, ensuring compatibility.

2.5 USER CHARACTERISTIC

 End-Users: These are the primary users of the platform who create accounts, share content, and
engage with others.
 Administrators: Administrators oversee the platform, monitor content, and manage user accounts.
 Moderators: Moderators assist in content moderation, ensuring that community guidelines are
followed and reporting inappropriate content.
Understanding these user characteristics helps tailor the user experience and functionality of the system to
meet the diverse needs of these groups.

Page |
Insta-clone

2.6 HARDWARE REQUIREMENTS

For Development:
 Personal computers or workstations with:
 Multi-core processor
 8 GB or more RAM
 Sufficient storage space
 Standard graphics card
 Development tools including IDE (e.g., VS Code), Git, and project management software.
For Deployment:
 Server infrastructure with:
 Multi-core processor (2.5 GHz or higher)
 16 GB or more RAM
 SSD storage
 High-speed internet connectivity
 Optional load balancer for traffic distribution.
 Backup and redundancy solutions.
 Security hardware (firewall).
 Content Delivery Network (CDN) for media delivery.
 Scalability planning for future growth.
2.7 SOFTWARE REQUIREMENTS
a. For Development:
 Integrated Development Environment (IDE): Such as Visual Studio Code (VS Code) or a preferred
code editor.
 Version Control System: Git for code versioning and collaboration.
 Project Management Tools: Collaboration and project management software for team coordination.
b. For Deployment:
 Web Server Software: (e.g., Nginx, Apache) for serving web content and handling user requests.
 Database Management System: (e.g., MongoDB) for storing user data, posts, and system information.
 Node.js and Express.js: Required for running the server-side logic and API handling.
 Cloudinary: To manage and serve media content efficiently.
 Security and Encryption Tools: Implement security measures to protect user data and enhance system
security.

Page |
Insta-clone
 Optional Content Delivery Network (CDN): Enhances media content delivery performance,
especially for a large volume of media files.
 These software components are essential for developing, deploying, and running the "Insta Clone"
social media platform, ensuring efficient operation and data management.

Page |
Insta-clone

CHAPTER 3
3. SYSTEM DESIGN

3.1 FUNCTIONS OF THE SYSTEM

 User Registration and Authentication: Allow users to create accounts securely, including email
verification and password recovery mechanisms.
 Media Upload: Enable users to upload photos and videos from their devices to share with others.
 Content Feed: Display a dynamic content feed, showcasing posts from users followed by the current
user, facilitating content discovery.
 Likes and Comments: Allow users to engage with posts by liking and commenting, fostering social
interactions.
 Direct Messaging: Provide a private messaging feature for users to have one-on-one conversations
with others.
 User Profiles: Create detailed user profiles, displaying user-generated content, followers, and
following lists.
 Customization: Allow users to personalize their profiles, including profile pictures, bios, and other
settings.
 Security: Implement data security measures to protect user information and ensure secure data storage.
 Performance: Ensure fast response times for actions like loading feeds, posting content, and sending
messages.
 Scalability: Design the system to handle an increasing number of users and posts as the user base
grows.
 Data Privacy: Respect user data privacy, adhering to data protection laws and offering users control
over their data.
 Content Moderation: Implement content moderation features to ensure that community guidelines are
followed and to prevent inappropriate content.
 Usability: Provide an intuitive and user-friendly interface, responsive design for various devices, and
accessible features.
 Custom Feature Development: Allow for the development of additional features, fostering innovation
and customization by users and developers.

Page |
Insta-clone

3.1.1 Use Case Diagram

4.1.1Use Case Diagram

3.2 DATA MODELLING

User Entity: Represents user-related data.

 Attributes: User ID, username, email, password (hashed and salted), registration date, profile picture,
user bio.
 Relationships: Users can have followers and follow other users. This many-to-many relationship is
represented in a separate table.
 User-Follower Relationship: A many-to-many relationship table that tracks user following/follower
relationships.
 Attributes: Relationship ID, User ID (follower), User ID (followed), timestamp.

Page |
Insta-clone
 Post Entity: Represents individual posts shared by users.
 Attributes: Post ID, User ID (the creator of the post), post content, media file (image or video),
timestamp.
 Relationships: Each post is associated with a user.
 Like Entity: Tracks likes given to posts by users.
 Attributes: Like ID, User ID (the one who liked), Post ID (the liked post), timestamp.
 Comment Entity: Represents comments on posts.
 Attributes: Comment ID, User ID (the commenter), Post ID (the post being commented on),
comment text, timestamp.
 Message Entity: Represents direct messages between users.
 Attributes: Message ID, Sender User ID, Receiver User ID, message content, timestamp.
 Content Moderation Entity: Stores data related to content moderation actions taken by administrators
and moderators.
 Attributes: Action ID, User ID (admin or moderator), Post ID (if relevant), description, action
timestamp.
 System Settings Entity: Contains system-wide settings and configurations.

 Attributes: Setting ID, setting name, setting value.

3.1.2Data Modelling

Page |
Insta-clone

3.2.1 CLASS / ER DIAGRAMS

3.2.1 ER-

Diagram Entity-Relationship Diagram for "Insta Clone"

User

 Attributes: User_ID (Primary Key), Username, Email, Password, Registration_Date,

Profile_Picture, Bio.

Page |
Insta-clone
 Relationships:
 Follows (Many-to-Many with User): Represents users following other users.
 Likes (One-to-Many with Like): Indicates posts liked by the user.
 Comments (One-to-Many with Comment): Represents comments made by the user.
 Posts (One-to-Many with Post): Represents posts created by the user.
 Sent_Messages (One-to-Many with Message): Represents messages sent by the user.
 Received_Messages (One-to-Many with Message): Represents messages received by the user.
Post
 Attributes: Post_ID (Primary Key), User_ID (Foreign Key), Content, Media_File, Timestamp.
 Relationships:
 LikedBy (One-to-Many with Like): Indicates users who liked the post.
 CommentedOn (One-to-Many with Comment): Represents comments on the post.
Like
 Attributes: Like_ID (Primary Key), User_ID (Foreign Key), Post_ID (Foreign Key),
Timestamp. Comment
 Attributes: Comment_ID (Primary Key), User_ID (Foreign Key), Post_ID (Foreign
Key), Comment_Text, Timestamp.
Message
 Attributes: Message_ID (Primary Key), Sender_User_ID (Foreign Key), Receiver_User_ID
(Foreign Key), Message_Content, Timestamp.
 Content Moderation Action
 Attributes: Action_ID (Primary Key), User_ID (Foreign Key), Post_ID (Foreign Key),
Description, Action_Timestamp.
 System Settings
 Attributes: Setting_ID (Primary Key), Setting_Name, Setting_Value.

Page |
Insta-clone

3.3 FUNCTIONAL AND BEHAVIOUR MODELLING

3.3.1 Flowcharts/ Activity / Object Interaction Diagrams

3.3.1
Flowchart
Page |
Insta-clone

3.3.2 DFD

3.3.2.1 DFD level 1

Page |
Insta-clone

3.3.2.2 DFD Level 2

3.4 DATABASE DESIGN

 The database design for the "Insta Clone" project plays a crucial role in storing and managing user
data, posts, likes, comments, messages, and system settings. Below, I'll outline the key aspects of the
database design:
 Database Management System (DBMS): The choice of the DBMS depends on project requirements.
For instance, you can use MongoDB, a NoSQL database, to store user data, posts, and comments,
while using a relational database like MySQL or PostgreSQL to manage system settings and content
moderation actions.

Page |
Insta-clone
 Database Schema: Organize the database into separate collections or tables to represent different
entities. For example, you might have tables for Users, Posts, Likes, Comments, Messages, Content
Moderation Actions, and System Settings.
 Normalization: Ensure data integrity and minimize redundancy by applying normalization techniques
to your relational tables. For instance, user-related information, such as usernames and email
addresses, should be stored in a separate Users table to avoid duplication.
 Indices: Implement appropriate indices to enhance query performance, especially for frequently
accessed data, such as user profiles and posts.

 Data Security: Implement user data security measures, including encryption of sensitive information
like passwords, proper authentication and authorization mechanisms, and database-level security
settings.
 Scalability: Design the database schema and indexes to handle a growing user base and increasing
data volume efficiently.
 Backup and Recovery: Set up regular database backups to prevent data loss and establish recovery
procedures in case of unexpected incidents.

3.5 Interface Design

 The interface design of the "Insta Clone" platform focuses on providing an engaging, user-friendly,
and responsive experience for users. Here are key aspects of the interface design:
 User Interface (UI): Create an intuitive and visually appealing user interface using React.js for the
frontend. Design a responsive layout that adapts to various screen sizes and devices.
 Navigation: Implement a straightforward navigation system, including menus, buttons, and icons, to
help users easily access different parts of the platform, such as the feed, user profiles, and messaging.
 User Profiles: Design user profiles that display user information, posts, and follower/following lists
in an organized and visually appealing manner.
 Content Feed: Develop a dynamic content feed that presents posts in a visually engaging format, with
features like infinite scrolling for a seamless user experience.
 Interactive Features: Ensure that interactive elements, such as like and comment buttons, are easily
accessible and responsive to user actions.
 Messaging Interface: Design a user-friendly messaging interface for private conversations, allowing
users to send and receive messages efficiently.

Page |
Insta-clone
 Customization Options: Provide tools for users to personalize their profiles, including adding profile
pictures and bios.
 Security and Privacy Settings: Include features for users to manage their privacy settings, such as
who can see their posts and how their data is shared.
 Feedback and Notifications: Implement a notification system to alert users about likes, comments,
and messages, and provide feedback on actions like successful post uploads.
 Accessibility: Ensure the platform is accessible to users with disabilities by following accessibility
best practices, such as providing alt text for images and proper semantic HTML markup.
 Testing and User Feedback: Conduct usability testing and gather user feedback to continuously
improve the interface based on user preferences and needs.
 The combination of a well-designed database structure and an intuitive user interface is essential for
creating a successful social media platform like the "Insta Clone." This ensures efficient data
management and a positive user experience.

Page |
Insta-clone

CHAPTER 4
4. IMPLEMENTATION

4.1 Implementation Environment

The implementation environment for the "Insta Clone" project involves a combination of software,
hardware, and other resources necessary to develop and deploy the platform. Here's an overview of the
implementation environment:
Development Environment:
 Operating System: Developers can work on various operating systems such as Windows, macOS, or
Linux, depending on their preferences.
 Integrated Development Environment (IDE): Developers use code editors like Visual Studio Code
(VS Code) for writing, testing, and debugging code. IDEs offer features that streamline development
tasks.
 Version Control System (VCS): Git is used for version control to manage source code changes,
collaborate with team members, and track project history.
 Programming Languages: The primary programming languages include JavaScript for both frontend
and backend development, with React.js for the frontend and Node.js for the backend.
 Web Server: Developers may set up a local web server during development for testing and debugging
purposes.

Database Environment:
 Database Management System (DBMS): Depending on the data storage needs, multiple database
systems may be employed. MongoDB, a NoSQL database, can be used for user data, posts, likes, and
comments. For system settings and content moderation actions, a relational database like MySQL or
PostgreSQL can be utilized.
 Database Connectivity: APIs and libraries are used to connect the application to the chosen DBMS.
Mongoose can be used for MongoDB, while libraries like Sequelize are suitable for connecting to
relational databases.

Page |
Insta-clone

Server Environment:
 Web Server: For deployment, a web server such as Nginx or Apache can be configured to serve the
application to users.
 Server Hosting: The application can be hosted on cloud platforms like AWS, Google Cloud, or
Azure, or on dedicated servers, depending on the project's scalability and budget requirements.
 Load Balancer (Optional): In case of increased traffic, a load balancer can distribute incoming
requests evenly across multiple server instances to ensure high availability and scalability.
 Backup and Recovery: Implement regular backup and recovery procedures to safeguard data and
ensure system reliability.

External Services:
 Content Delivery Network (CDN): Consider using a CDN service like Cloudinary to enhance media
content delivery performance, especially for a large volume of media files.
Security Measures:
 Data Encryption: Implement data encryption to secure user information, especially passwords and
sensitive data.
 Authentication and Authorization: Ensure proper authentication and authorization mechanisms to
control user access to various parts of the application.
 Security Protocols: Follow security best practices to protect against common web application
vulnerabilities such as cross-site scripting (XSS) and SQL injection.

Testing Environment:
 Testing Frameworks: Utilize testing frameworks like Jest and Enzyme for frontend testing and tools
like Mocha and Chai for backend testing.
 Browser Testing: Perform cross-browser testing to ensure compatibility with major web browsers,
including Chrome, Firefox, Safari, and Edge.
 Mobile Device Testing: Test the application on various mobile devices and screen sizes to ensure
responsiveness.

Collaboration and Project Management:

 Collaboration Tools: Use collaboration tools like Slack, Microsoft Teams, or similar platforms for
communication among team members.

Page |
Insta-clone
 Project Management: Employ project management software such as Trello, Asana, or Jira for task
tracking and project coordination.

The implementation environment for the "Insta Clone" project includes a range of software and hardware
components, cloud services, and security measures to ensure successful development and deployment of the
social media platform. This environment provides the tools and infrastructure necessary for building and
maintaining the application.

4.2 Sample code / Pseudo code

const express =
require('express'); const app =
express()
const port = 5000;
const mongoose = require("mongoose");
const { mongoURL } =
require("./keys"); const cors =
require("cors");
const path = require("path")

app.use(cors())
require('./models/model')
require('./models/post')
app.use(express.json())
app.use(require("./routes/auth"))
app.use(require("./routes/createPost"
)) app.use(require("./routes/user"))
mongoose.connect(mongoURL);

mongoose.connection.on("connected",()=>{
console.log("successfully connected to mongo")
})
Page |
Insta-clone

console.log("not connected to mongodb")

})

// serving the frontend

app.use(express.static(path.join( dirname,"./frontend/build")))

app.get("*",
(req,res)=>{ res.s
endFile(
path.join( dirname,"./frontend/build/index.html"),
function(err){
res.status(500).send(err)
}
)
})

app.listen(port, () => {
console.log("server is running on port" +" "+ port)

import React from 'react';

import { RiCloseLine} from
"react-icons/ri"; import
"../css/Modal.css";
import { useNavigate } from 'react-router-dom';

export default function Modal({setModalOpen})

{ const navigate = useNavigate()
return (
<div className="darkBg" onClick={()=>setModalOpen(false)}>
<div className="centered">
<div className="modal">
{/*modal header*/}
Page |
Insta-clone
<h5 className='heading'>Confirm</h5>
</div>
<button className='closeBtn' onClick={()=>setModalOpen(false)}>
<RiCloseLine></RiCloseLine>
</button>
{/*modal content*/}
<div className="modalContent">
Do you really want to log Out ?
</div>
<div className="modalActions">
<div className="actionsContainer">
<button className='logOutBtn' onClick={()=>{
setModalOpen(false);
localStorage.clear()
navigate("./signin")
}}>Log Out</button>
<button
className='cancelBtn' onClick={()=>setModalOpen(false)}>cancel</button>
</div>
</div>
</div>
</div>
</div>
);
}

import React, {useContext} from

'react'; import logo from
"../img/logo.jpeg" import
"../css/Navbar.css";
import { Link } from 'react-router-dom';

Page |
Insta-clone
import { useNavigate } from 'react-router-dom';

export default function Navbar({login}) {

const navigate = useNavigate()
const {setModalOpen} = useContext(LoginContext)
const loginStatus = ()=>{
const token = localStorage.getItem("jwt");
if(login || token){
return [
<>
<Link to="/profile">
<li>Profile</li>
</Link>
<Link to="/createPost"> Create Post</Link>
<Link style={{marginLeft:"20px"}} to="followingpost">My
Following</Link>
<Link to={""}>
<button className="primaryBtn" onClick={()=> setModalOpen(true)}>
Log Out</button>
</Link>
</>
]
}else{
return [
<>
<Link to="/signup">
<li>SignUp</li>
</Link>
<Link to="/signin">
<li>SignIn</li>
</Link>
</>
]

Page |
Insta-clone

}
};

return (
<div className="navbar">
<img src={logo} alt="" onClick={()=>{navigate("/")}} />
<ul className="nav-menu">{loginStatus()}</ul>

</div>
)
}

import React from 'react';

import
"../css/PostDetail.css";
import { useNavigate } from 'react-router-
dom'; import { toast } from 'react-toastify';

export default function PostDetail({item,toggleDetails})

{ const navigate = useNavigate();

// Toast function
const notifyA = (msg)=> toast.error(msg)
const notifyB = (msg)=>
toast.success(msg)

const removePost = (postId)=>{

if(window.confirm("Do you really want to delete this
post ?")){ fetch(`http://localhost:5000/deletePost/$
{postId}`,{
Page |
Insta-clone
},
})
.then((res)=>res.json())
.then((result)=>{ console.lo
g(result);
toggleDetails();
navigate("/");
notifyB(result.message);
});
}

return (
<div className="showComment">
<div className="container">
<div className="postPic">
<img src={item.photo}
alt="" />
</div>
<div className="details">

{/* card header */}

<div
className="card-header"
style={{borderBottom:"1px solid #00000029"}}
>
<div className="card-pic">
<img src="https://images.unsplash.com/photo-1599566150163-
29194dcaad36?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=fo
rmat&fit=crop&w=1000&q=60" alt="" />
</div>

Page |
Insta-clone
<h5>{item.postedBy.name}</h5>
<div className="deletePost" onClick={()=>{removePost(item._id)}} >
<span className="material-symbols-outlined">
delete
</span>
</div>
</div>

{/*comment section*/}
<div className="comment-section" style={{borderBottom:"1px solid
#00000029"}}>
{
item.comments.map((comment)=>{
return (<p className="comment-section">
<span className="commenter"
style={{fontWeight:"bolder"}}>{comment.postedBy.name}{" "}</span>
<span className="commentText"> {comment.comment}</span>
</p>)
})}
</div>

{/* card content */}

<div className="card-content">
<p>{item.likes.length}Likes</p>
<p>{item.body}</p>
</div>

{/* add comment */}

<div className="add-comment">
<span className="material-symbols-outlined">mood</span>
<input type="text" placeholder="Add a comment"
//value={comment} onChange={(e)=>{setComment(e.target.value);
// }}
/>

Page |
Insta-clone
<button
className="comment"
// onClick={()=>{makeComment(comment,item._id);
// toggleComment();
// }}
>
Post
</button>
</div>

</div>
</div>
<div className="close-comment"
onClick={()=>{
toggleDetails();
}}
>

<span className="material-symbols-outlined material-symbols-outlined-

comment"
>
close
</span></div>
</div>
)
}

import React,{useState, useEffect,useRef} from 'react'

export default function ProfilePic({changeprofile})

{ const hiddenFileInput = useRef(null);
const [image, setImage] = useState("");

Page |
Insta-clone
const [url, setUrl] = useState("");

// posting image to cloudinary

const postDetails =()=>{
const data = new FormData()
data.append("file",image)
data.append("upload_preset","ig-clone")
data.append("cloud_name","cantacloudss")
fetch("https://api.cloudinary.com/v1_1/cantacloudss/image/upload",
{
method:"post",
body:data
})
.then(res=> res.json())
.then(data => setUrl(data.url))
.catch(err => console.log(err));
console.log(url);

const postPic =()=>{

// saving post to mongodb
fetch("http://localhost:5000/uploadProfilePic",{
method:"put",
headers:{
"Content-Type":"application/json",
"Authorization": "Bearer "+ localStorage.getItem("jwt")

},
body:JSON.stringify({
pic:url

Page |
Insta-clone
})
}).then(res=>res.json())
.then(data => {
console.log(data);
changeprofile();
window.location.reload();
})
.catch(err => console.log(err));

}
const handleClick = ()=>{
hiddenFileInput.current.click();
};

useEffect(() => {
if(image){
postDetails();
}

}, [image]);
useEffect(()=>{
if(url){
postPic();
}
},[url])
return (
<div className='profilePic darkBg' >
<div className="changePic centered">
<div>
<h2>Change Profile pic</h2>
</div>
<div style={{borderTop:"1px solid #00000030"}}>
<button className='upload-btn' style={{color:"#1EA1F7"}}
onClick={handleClick} >

Page |
Insta-clone
Upload photo</button>
<input
type="file"
ref={hiddenFileInput}
accept='image/*'
style={{display:"none"}}
onChange={(e)=>{setImage(e.target.files[0]);
}}
/>
</div>
<div style={{borderTop:"1px solid #00000030"}}>
<button className='upload-btn' onClick={()=>{
setUrl(null)
postPic()
}} style={{color:"#ED4956"}}>Remove current photo</button>
</div>
<div style={{borderTop:"1px solid #00000030"}}>
<button style={{background:"none",
border:"none",cursor:"pointer",fontSize:"15px",}}
onClick={changeprofile}
>
cancel</button>
</div>
</div>
</div>
)
}

import Reac,{useState,useContext} from

'react'; import "../css/SignIn.css";
import logo from"../img/logo.jpeg";

Page |
Insta-clone
import {Link,useNavigate} from "react-router-dom";
import { toast } from 'react-toastify';
import { LoginContext } from '../context/LoginContext';

export default function SignIn() {

const {setUserLogin}=useContext(LoginContext)
const navigate =useNavigate()
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")

// Toast function
const notifyA = (msg)=> toast.error(msg)
const notifyB = (msg)=> toast.success(msg)

const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

const postData=()=>{
//checking email
if (!emailRegex.test(email)) {
notifyA("Invalid email")
return
}
//sendind data to server
fetch("http://localhost:5000/signin",{
method:"post",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
email:email,
password:password
})
}).then(res=>res.json())
.then(data => {

Page |
Insta-clone
if(data.error){
notifyA(data.error)
}else{
notifyB("Signed in Successfully")
console.log(data)
localStorage.setItem("jwt",data.token)
localStorage.setItem("user",JSON.stringify(data.user) )

setUserLogin(true)
navigate("/")
}

console.log(data)
})
}
return (
<div className="signIn">
<div>
<div className="loginForm">
<img className="signUpLogo" src={logo} alt="" />
<div>
<input type="email" name="email" id="email" value={email}
placeholder="Email" onChange={(e)=>{setEmail(e.target.value)}} />
</div>
<div>
<input type="password" name="password" id="password"
placeholder="Password" value={password}
onChange={(e)=>{setPassword(e.target.value)}} />
</div>
<input type="submit" id ="login-btn" onClick={()=>{postData()}}
value="Sign In" />
</div>
<div className="loginForm2">
Don't have an account ?

Page |
Insta-clone

<Link to="/signup">
<span style={{color:"blue" ,
cursor:"pointer"}}>Sign Up</span>
</Link>

</div>
</div>
</div>
);
}

import React,{useEffect,useState } from

'react' import logo from "../img/logo.jpeg"
import "../css/SignUp.css";
import { Link, useNavigate } from 'react-router-

dom'; import { toast } from 'react-toastify';

export default function SignUp()

{ const navigate =
useNavigate()
const [name, setName] =
useState(""); const [email,
setEmail] = useState("")
const [userName, setUserName] =
useState("") const [password, setPassword]
= useState("")

// Toast function
const notifyA = (msg)=> toast.error(msg)
const notifyB = (msg)=> Page |
Insta-clone
const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-
9])(?=.*[!@#\$%\^&\*])(?=.{8,})/
const postData=()=>{
//checking email
if (!emailRegex.test(email)) {
notifyA("Invalid email")
return
}else if (!passRegex.test(password)){
notifyA("Password must contain at least 8 characters with at least 1
number and include both upper and lowercase and a special character like #,& ")
return
}
//sendind data to server
fetch("http://localhost:5000/signup",{
method:"post",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
name:name,
userName:userName,
email:email,
password:password
})
}).then(res=>res.json())
.then(data => {
if(data.error){
notifyA(data.error)
}else{
notifyB(data.message)
navigate("/signin")
}

console.log(data)

Page |
Insta-clone
})
}

return (
<div className="signup">
<div className="form-container">
<div className="form">
<img className="signUpLogo" src={logo} alt="" />
<p className="loginPara">
Sign up to see photos and videos<br /> from your friends
</p>
<div>
<input type="email" name="email" id="email" value={email}
placeholder="Email" onChange={(e)=>{setEmail(e.target.value)}} />
</div>
<div>
<input type="text" name="name" id="name"
placeholder="Full Name" value={name}
onChange={((e)=>{setName(e.target.value)})} />
</div>
<div>
<input type="text" name="username" id="username"
placeholder="Username" value={userName}
onChange={(e)=>{setUserName(e.target.value)}}/>
</div>
<div>
<input type="password" name="password" id="password"
placeholder="Password" value={password}
onChange={(e)=>{setPassword(e.target.value)}} />
</div>
<p className="loginPara" style={{fontSize:"12px",
margin:"3px 0px"}}>
By signin up, you agree to our terms, <br /> privacy
policy and

Page |
Insta-clone

cookies policy.
</p>
<input type="submit" id="submit-btn" value="Sign
Up" onClick={()=>{postData()}}/>
</div>
<div className="form2">
Already have an account
?
<Link to="/signin">
<span
style={{color:"blue
",
cursor:"pointer"}}>Sign In</span>
</Link>

</div>

</div>
</div>
)

import React,{useEffect,useState} from

"react"; import PostDetail from
"./PostDetail";
import "../css/Profile.css";
import { useParams } from "react-router-dom";

export default function UserProfile() {

var picLink =
"https://cdn-icons-png.flaticon.com/128/3177/3177440.png" const
{userid}= useParams();
Page |
Insta-clone
const [posts, setPosts] = useState([]);

// to follow user
const followUser = (userId)=>{
fetch("http://localhost:5000/follow", {
method:"put",
headers:{
"Content-Type":"application/json",
Authorization:"Bearer "+localStorage.getItem("jwt")
},
body:JSON.stringify({
followId:userId
})
})
.then((res)=>res.json())
.then((data)=>{ consol
e.log(data);
setIsFollow(true)
})
}

// to unfollow user
const unfollowUser = (userId)=>{
fetch("http://localhost:5000/unfollow", {
method:"put",
headers:{
"Content-Type":"application/json",
Authorization:"Bearer "+localStorage.getItem("jwt")
},
body:JSON.stringify({
followId:userId
})
})
.then((res)=>{res.json()})

Page |
Insta-clone
.then((data)=>{ console
.log(data)
setIsFollow(false);
})
}

useEffect(() => {

fetch(`http://localhost:5000/user/${userid}`,{
headers:{
Authorization:"Bearer "+localStorage.getItem("jwt")
}
})
.then(res=>res.json())
.then((result)=>{ conso
le.log(result)
setUser(result.user)
setPosts(result.post);
if(result.user.followers.includes(JSON.parse(localStorage.getItem("user")
)._id)){
setIsFollow(true)
}
});
}, [isFollow])

return ( <div className="profile">

{/* Profile frame */}
<div className="profile-frame">
{/* Profile pic */}
<div className="profile-pic">
<img src={user.Photo ? user.Photo : picLink} alt="" />
</div>
{/* Profile data */}
<div className="profile-data">

Page |
Insta-clone
<div style={{display:"flex",alignItems:"center",justifyContent:"space-
between"}}>
<h1>{user.name}</h1>
<button className="followBtn"
onClick={()=>{
if(isFollow){
unfollowUser(user._id)
}else{
followUser(user._id)
}}
}

>
{isFollow ? "Unfollow" :"Follow"}
</button>
</div>

<div className="profile-info" style={{ display:"flex" }}>

<p>{posts.length} posts</p>
<p>{user.followers? user.followers.length:"0"} followers</p>
<p>{user.following? user.following.length:"0"} following</p>
</div>
</div>
</div>
<hr style={{
width:"90%",
margin:"auto",
opacity:"0.8",
margin:"25px auto",
}}/>
{/* Gallery */}
<div className="gallery">
{posts.map((pics)=>{
return <img key={pics._id} src={pics.photo}

Page |
Insta-clone

// onClick={()=>{
// toggleDetails(pics)
// }}
className=""item></im
g>
})}
</div>
{/* {show &&
<PostDetail item={posts} toggleDetails={toggleDetails} />
} */}

</div>
);
}

.createPost{
max-width:
500px; margin:
10px auto;
border: 1px solid rgb(173,
173,173); border-radius: 5px;

.main-div{
border-top: 1px solid rgb(173, 173,173);
}
.post-header{
display: flex;
}

#post-btn{
border: none;
color: #339ce3;
Page |
Insta-clone
font-weight: bolder;
cursor: pointer;
}

.details{
border: 1px solid rgb(173, 173,173);
}

textarea{
width:90%;
border: none;
outline: none;

#output{
width: 300px;
border: none;
outline: none;
margin-top: 5px;
}
.card{
max-width: 500px;
height: max-content;
margin: 25px auto;
border: 1px solid rgb(173, 173,173);
border-radius: 5px;
}

.card-header{
display: flex;
}

.card-header > h5{

Page |
Insta-clone
margin: 0;
padding: 11px;
}

.card-pic img{
width: 30px;
border-radius: 30px;
height: auto;
object-fit: contain;
padding: 5px;

.card-image img{
width: 100%;
}

.card-content{
text-align: left;
line-height: 4px;
padding: 3px 10px;
border-bottom: 1px solid rgb(173, 173,173);
}

.add-comment{
display: flex;
align-items: center;
}

.add-comment input{
margin: 0;
outline: none;
border: none;
padding: 10px;

Page |
Insta-clone
}

.comment{
border: none;
background-color: none;
font-weight: bolder;
cursor: pointer;
color: #238dd4;
}

.material-symbols-outlined-red {
color: red;
font-variation-settings:
'FILL' 1,
'wght' 600,
'GRAD' 0,
'opsz' 24
}

.material-symbols-outlined{
cursor: pointer;
}

.showComment{
width: 100vw;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(16, 13, 13, 0.4);

Page |
Insta-clone
.container{
display: flex;
width: 80%;
background-color: white;
position: absolute;
top: 10%;
left: 10%;
height: 500px;

.postPic{
background-color: black;
display: flex;
align-items: center;
}

.postPic img{
object-fit: contain;
width: 100%;
}

.details{
width: 100%;
height: inherit;
display: flex;
flex-direction: column;
}

.comment-section{
flex-grow: 4;
text-align: left;
margin-left: 10px;
}

Page |
Insta-clone

.close-comment{
position: fixed;
top: 1%;
right: 5%;
color: white;
border: none;
cursor: pointer;

.material-symbols-outlined-comment {
font-size: 50px;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}

.darkBg{
background-color: rgba(0, 0, 0, 0.2);
width: 100vw;
height: 100vh;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.centered{
position: fixed;
top: 50%;

Page |
Insta-clone
left: 50%;
transform: translate(-50%,-50%);
}

.modal {
width: 250px;
height: 170px;
background: white;
color: white;
z-index: 10;
border-radius: 16px;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}

.modalHeader {
height: 50px;
background: white;
overflow: hidden;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

.heading {
margin: 0;
padding: 10px;
color: #2c3e50;
font-weight: 500;
font-size: 18px;
text-align: center;
}

.modalContent {
padding: 10px;
font-size: 14px;

Page |
Insta-clone
color: #2c3e50;
text-align: center;
}

.modalActions {
position: absolute;
bottom: 2px;
margin-bottom: 10px;
width: 100%;
}

.actionsContainer {
display: flex;
justify-content: space-around;
align-items: center;
}

.closeBtn {
cursor: pointer;
font-weight: 500;
padding: 4px 8px;
border-radius: 8px;
border: none;
font-size: 18px;
color: white;
background: rgb(10, 60, 223);
transition: all 0.25s ease;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
position: absolute;
right: 0;
top: 0;
align-self: flex-end;
margin-top: -7px;
margin-right: -7px;

Page |
Insta-clone
}

.closeBtn:hover {
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
transform: translate(-4px, 4px);
}

.logOutBtn {
margin-top: 10px;
cursor: pointer;
font-weight: 500;
padding: 11px 28px;
border-radius: 12px;
font-size: 0.8rem;
border: none;
color: #fff;
background: #ff3e4e;
transition: all 0.25s ease;
}

.logOutBtn:hover {
box-shadow: 0 10px 20px -10px rgba(255, 62, 78, 0.6);
transform: translateY(-5px);
background: #ff3e4e;
}

.cancelBtn {
margin-top: 10px;
cursor: pointer;
font-weight: 500;
padding: 11px 28px;
border-radius: 12px;
font-size: 0.8rem;
border: none;

Page |
Insta-clone

color: #fcfcfc;
background:
#2c3e50;
transition: all 0.25s ease;
}

.cancelBtn:hover
{ box-shadow:
none;
transform: translateY(-5px);

.showComment{
width: 100vw;
min-height:
100vh; position:
fixed; top: 0;
left: 0;
background-color: rgba(16, 13, 13, 0.4);

.container{
display:
flex; width:
80%;
background-color:
white; position:
absolute;
top: 10%;
left: 10%;
height:
500px;

}
Page |
Insta-clone
display: flex;
align-items: center;
}

.postPic img{
object-fit: contain;
width: 100%;
}

.details{
width: 100%;
height: inherit;
display: flex;
flex-direction: column;
}

.comment-section{
flex-grow: 4;
text-align: left;
margin-left: 10px;
}

.close-comment{
position: fixed;
top: 1%;
right: 5%;
color: white;
border: none;
cursor: pointer;

.material-symbols-outlined-comment {

Page |
Insta-clone

font-size: 50px;
font-variation-
settings: 'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}

.deletePost{
position:
absolute; top:
10px;
right: 10px;

Page |
Insta-clone

CHAPTER 5
5. TESTING

5.1 Testing Plan

5.1.1 Unit Testing

■ Each module is considered independently.
■ It focuses on each unit of software as implemented in the source code.

5.1.2 Integration Testing

■ Integration testing aims at constructing the program structure while at the same constructing the modules.
Modules are integrated by using the top-down approach.

■ For unit testing, the modules are tested for the correctness of logic applied and should detect errors in
coding. Valid and Invalid data should be created and programs should be made to process this data to catch
errors.

■ In the registration module, while entering the data for the user, one should only go for a password that
should only contain numbers, so one should ensure that it should result in an error message.

■ All dates that are entered should be validated. No program should be accepted For system testing when
unit tests are satisfactorily concluded, the system as a complete entity must be tested

5.2 Testing Methods

Handling values in Primary Key fields.
● Handling empty records.
● Max length allowed in controls should match the database structure.
● Handling special characters like ‘, #, %, $, {,}, [,], etc.
● Handling of errors in modules as specified in the project specifications.
● Use global error handling functions if there are any in the project.
● Termination of activities while error should be monitored accordingly.
● Keeping control of the application to self while unexpected errors.

Page |
Insta-clone
● Raise errors and handle them as and when necessary.

Page |
Insta-clone
● Showing meaningful error messages as and when required.
● Updating error log file with specific information on errors.
● Use proper captions for error message dialog boxes.
● The format of data should be as specified in the project specifications.
● Showing default values in all subforms as and when required.
● Query handling within the form.
● Enabling and disabling of controls as and when required.
● Showing complete data as and when required

Page |
Insta-clone

CHAPTER 6
6. SCREENSHOTS

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

Page |
Insta-clone

CHAPTER 7
7. LIMITATIONS AND FUTURE ENHANCEMENTS

Limitations:

 Scalability Challenges: As the user base grows, the "Insta Clone" may face scalability challenges,
especially in handling a large volume of media content. The architecture and infrastructure should be
continually optimized to address these challenges.

 Data Privacy Concerns: The platform must adhere to stringent data privacy regulations, which
may require continuous updates and compliance checks to protect user data adequately.

 Content Moderation: While automated content moderation tools can be employed, there may still be
instances where inappropriate content gets through. Human moderation may be needed to
supplement automated systems.

 Development and Maintenance Costs: Building and maintaining a complex social media platform
involves costs related to hosting, storage, and infrastructure. Balancing costs while delivering a high-
quality service is a challenge.

Future Enhancements:

 Advanced Search and Discovery: Implement an advanced search feature to allow users to
find content and users more effectively, and enhance the discoverability of posts.

 Geolocation Services: Integrate geolocation services to allow users to tag their posts with locations
and enable location-based search and filtering.

 User Recommendations: Develop recommendation algorithms to suggest users to follow and

content to engage with, based on user behavior and preferences.

 Video Sharing: Extend the platform to support video sharing, enabling users to upload, view,
and share videos alongside photos.

Page |
Insta-clone

 Real-Time Messaging: Improve the messaging system by implementing real-time features like typing
indicators and message delivery receipts.

 Monetization Options: Explore monetization strategies, such as sponsored posts, advertisements, and
premium subscription models for additional revenue.

 Enhanced Content Editing: Offer more sophisticated content editing options, filters, and effects
to enhance the quality and creativity of user posts.

 Analytics and Insights: Provide users and content creators with detailed analytics and insights into
their posts' performance, including views, likes, and user engagement data.

 Accessibility Improvements: Continue to improve accessibility for users with disabilities

by following accessibility guidelines and conducting user testing.

 Integration with Third-Party Services: Explore integrations with other platforms and services, such
as linking with popular social media accounts or integrating with e-commerce solutions.

 Virtual Reality (VR) and Augmented Reality (AR): Consider incorporating VR and AR features
to provide immersive user experiences, especially for content creators.

 Multilingual Support: Expand language support to cater to a global audience, enabling users
to interact in their preferred languages.

 Enhanced User Reporting: Implement an improved reporting system for users to flag
inappropriate content and behavior, streamlining content moderation.

 Machine Learning and AI: Leverage machine learning and AI for more accurate
content recommendations, sentiment analysis, and automated content moderation.

 Enhanced Data Security: Continuously upgrade data security measures to protect user data
and privacy in the face of evolving cybersecurity threats.

Page |
Insta-clone

CHAPTER 8
8. CONCLUSION & DISCUSSION

Conclusion:
The "Insta Clone" project represents a significant endeavor to recreate the Instagram experience,
providing users with a social media platform that emphasizes photo and video sharing, social
engagement, and user interactions. The project's primary objectives include user registration, media
upload, content feed creation, likes and comments, direct messaging, user profiles, and
customization. These objectives aim to replicate core Instagram features while offering a platform for
creativity and social interaction.

The system's data model, interface design, and implementation environment have been carefully
considered to create a robust, user-friendly, and scalable platform. The use of technologies like
React.js, Node.js, MongoDB, and Cloudinary, combined with best practices in database design and
interface usability, positions the "Insta Clone" for success.

Discussion:

During the development of the "Insta Clone" project, several critical aspects were addressed,
including database design, user interface, and security. The project's flexibility in using different
database systems and server environments ensures adaptability to changing needs and scalability
demands.

Moreover, the platform's interface design focuses on providing a seamless and engaging user
experience, emphasizing responsiveness and accessibility. Collaboration tools and project
management software support effective team communication and coordination.

However, the project also faces limitations, such as scalability challenges and data privacy concerns.
The platform must continually optimize its architecture and adhere to evolving data privacy
regulations to ensure user data protection.

Page |
Insta-clone
Looking ahead, the "Insta Clone" project envisions future enhancements that range from advanced
search and discovery features to integrating AR and VR experiences. Monetization options and
enhanced content editing will be explored to support revenue generation.

In conclusion, the "Insta Clone" project reflects the team's commitment to developing a compelling
social media platform. By addressing limitations, continually improving security, and embracing
future enhancements, the "Insta Clone" aspires to become a vibrant and innovative platform for users
to share their creativity and connect with others in the digital realm.

Page |
Insta-clone

CHAPTER 9
9. REFERENCES

 W3Schools. (n.d.). JavaScript Tutorial. https://www.w3schools.com/js/

 Node.js. (n.d.). Node.js Documentation. https://nodejs.org/en/docs/
 React. (n.d.). React - A JavaScript library for building user interfaces. https://reactjs.org/docs/getting-
started.html
 MongoDB. (n.d.). MongoDB Documentation. https://docs.mongodb.com/
 Cloudinary. (n.d.). Cloudinary Documentation. https://cloudinary.com/documentation
 Cantacoder Youtube Channel

Page |