Twizzle

MAJOR PROJECT - I
Submitted in Partial Fulfillment of the Requirement for the Award of the
Degree of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE ENGINEERING

SUBMITTED TO

Rajiv Gandhi Proudyogiki Vishwavidyalaya, Bhopal (M.P.)

SUBMITTED BY
Anil Lodhi (0176CS201035)
Ayush Acharya (0176CS201053)
Divyansh Agrawal (0176CS201072)
Manas Singh Rajput (0176CS201104)

Lakshmi Narain College of Technology Excellence, Bhopal (M.P.), India

UNDER THE SUPERVISION OF

Dr. Saket Jain
Department of Computer Science & Engineering
Lakshmi Narain College of Technology Excellence, Bhopal (M.P.), India

Department of Computer Science & Engineering

Lakshmi Narain College of Technology Excellence, Bhopal (M.P.)
Session: Dec 2023

1
 (Approved by AICTE, New Delhi & Affiliated to RGPV, Bhopal)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CANDIDATE’S DECLARATION

We are Anil Lodhi, Ayush Acharya, Divyansh Agrawal and Manas Singh Rajput, student of Bachelor
of Technology, Computer Science & Engineering, Lakshmi Narain College of Technology Excellence,
Bhopal hereby declare that the work presented in the project entitled “Twizzle” is outcome of my own
bona-fide work, which is correct to the best of my knowledge and this work has been carried out taking care
of Engineering Ethics. The work presented does not infringe any previous work and has not been submitted to
any University for the award of any degree.

The project entitled “Twizzle” being submitted by “Anil Lodhi(0176CS201035),

Ayush Acharya(0176CS201053), Divyansh Agrawal (0176CS201072) and
Manas Singh Rajput (0176CS201104)” has been examined by us and is hereby approved for the
award of degree “Bachelor of Technology in Computer Science & Engineering”, for which it has
been submitted. It is understood that by this approval the undersigned do not necessarily endorse or approve
any statement made, opinion expressed or conclusion drawn therein, but approve the project only for the
purpose for which it has been submitted.

Anil Lodhi
-0176CS201035
Ayush Acharya
-0176CS201053
Divyansh Agrawal
-0176CS201072
Manas Singh Rajput
-0176CS201104

2
 (Approved by AICTE, New Delhi & Affiliated to RGPV, Bhopal)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CERTIFICATE
This is to certify that the project entitled “Twizzle” is the bona-fide work carried out independently by Anil
Lodhi, Ayush Acharya, Divyansh Agrawal and Manas Singh Rajput student of Bachelor of Technology,
Department of Computer Science & Engineering from Rajiv Gandhi Prodyogiki Vishwavidyalaya, Bhopal.
In the partial fulfillment of the requirement for the award of the degree of Bachelor of Technology, and this
project has not formed previously the basis for the award of any degree, diploma, associate ship, fellowship or
any other similar title according to our knowledge.

SUPERVISED BY: APPROVED BY:

Dr. Saket Jain Dr. Megha Kamble

Department of CSE (Head, Department of CSE)
LNCT, Bhopal LNCTE, Bhopal

FORWARDED BY:

Dr. Anil Kumar Saxena

Principal
LNCTE, Bhopal

3
 (Approved by AICTE, New Delhi & Affiliated to RGPV, Bhopal)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

ACKNOWLEDGEMENT

At the outset, I/ we would like to link to thank the Almighty who made all the things possible. Writing this
project report would not have been possible without the support of several people whom we need to
wholeheartedly thank. I express a deep sense of gratitude to my Supervisor “Dr. Saket Jain” Dept. of CSE for
the valuable and inspirational guidance from the initial to the final level that enabled me to develop and
understanding of this Project work.

I would like to give my sincere thanks to Prof.(Dr.) Megha Kamble, Head of Dept. of CSE for their
kind help, encouragement and co-operation throughout my Project period and I owe my special thanks to our
Principal Dr. Anil Kumar Saxena for their guidance and suggestions during the Project work.

Lastly, I want to thank my parents, friends and to all those people who had contributed to my project directly or
indirectly for their moral and psychological support

Anil Lodhi
0176CS201035
Ayush Acharya
0176CS201053
Divyansh Agrawal
0176CS201072
Manas Singh Rajput
0176CS201104

4
 CONTENTS

Title Page no.

Chapter 1 Introduction 6-7

1.1 Motivation 6

1.2 Scope 6

1.3 Objective 7
Chapter 2 Literature Survey 8-9

2.1 Literature Survey 8

Chapter 3 Problem Statement 10

3.1 Problem Statement 10

3.2 Solution 10

Chapter 4 Minimum Hardware and Software Requirements 11-20

4.1 Software Requirement 11

4.2 Hardware Requirement 18

Chapter 5 Methodology Used 21-22
5.1 Method 21
Chapter 6 Design Framework 23-27
6.1 ER Diagram 23
6.2 Data Flow Diagram 24
6.3 Use Case Diagram 26
Chapter 7 Implementation 28-41
7.1 Snapshot 28
7.2 Coding 36
Chapter 8 Testing 42-47
8.1 Testing 42
Chapter 9 Conclusion & Future Scope 48-49
9.1Conclusion & Future Scope 48

5
CHAPTER 1
Introduction

In a world that thrives on connection and concise communication, we present to you a unique
social experience – Twizzle, your go-to destination for sharing thoughts, updates, and
engaging in real-time conversations. In the spirit of brevity, we've distilled the essence of
social networking into seamless characters or less.

1.1 Motivation

Connect in Time: Say goodbye to delayed conversations. Twizzle enables you to

connect with friends, influencers, and like-minded individuals instantly. Experience the
excitement of a dynamic timeline that keeps you in the loop, 280 characters at a time.

Follow and Be Followed: Build your digital community by following those who inspire
you and be discovered by those who share your interests. Whether you're into breaking news,
pop culture, or niche hobbies, Twizzle ensures that your feed is as unique as you are.

1.2 Scope

User Authentication and Profiles:

• Implement a robust user authentication system to allow users to create accounts, log
in, and manage their profiles.
• Users should be able to customize their profiles, add profile pictures, and provide
additional information.

Timeline and Feed: Develop a timeline where users can see a chronological order of
posts from the accounts they follow. Include algorithms to curate feeds based on user
engagement and relevance.

Express Yourself: Unleash your creativity and wit through concise messages, images,
and GIFs. Twizzle embraces the power of brevity, encouraging you to express yourself with
clarity and impact. What's on your mind? Share it with the world, one post at a time.

Trending Conversations: Stay on top of the latest trends and join the hottest
conversations. Our trending topics feature ensures that you never miss out on what's capturing
the attention of the Twizzle community. Engage, react, and be part of the pulse of the digital
world.

6
1.3 Objective

Privacy First: Your privacy is our priority. Twizzle empowers you with robust privacy
settings, allowing you to control who sees your posts and who you connect with. Share
comfortably, knowing that your digital space is yours to curate.

Seamless Experience Across Devices: Whether you're on your desktop, tablet, or

smartphone, Twizzle offers a seamless experience. Stay connected wherever you go, and
never miss a moment in the ever-evolving landscape of social media.

Global Reach: Join a diverse community that spans the globe. Discover perspectives
from different cultures, engage with international trends, and connect with people who
broaden your horizons. Twizzle is your passport to a global conversation.

Join the Flock: Whether you're a seasoned social media user or just dipping your toes
into the world of microblogging, Twizzle welcomes you to join the flock. Connect, chirp, and
be part of the global conversation on the platform that celebrates brevity, creativity, and
connection.

Twizzle Moments: Capture and share your life's highlights with Twizzle Moments. From
spontaneous thoughts to unforgettable experiences, create collections of chirps that tell your
unique story.

7
CHAPTER 2
Literature Survey

2.1 Literature Survey

A literature survey for a Twizzle would involve exploring existing research, articles, and
resources related to social media platforms, microblogging, and the specific features and
functionalities found in Twizzle. Here are some key areas you might want to consider in your
literature review:

1. Microblogging and Social Media Platforms:

•Explore the history and evolution of microblogging.

•Understand the characteristics and features that define successful social media
platforms.
2. Twizzle Features and Functionality:
• Investigate the core features of Twizzle, such as posts, retweets, likes,
hashtags, and mentions.
• Examine the role of multimedia content (i
• mages, videos, etc.) in microblogging platforms.
• Explore how Twitter handles user authentication, security, and privacy.

3. User Engagement and Interactions:

• Study user engagement metrics and methods for enhancing user interaction.
• Analyze the impact of features like trending topics, notifications, and real-time
updates on user engagement.

4. Information Diffusion and Virality:

• Explore studies on information diffusion patterns in social media.
• Investigate factors contributing to the virality of content on platforms like
Twizzle.

5. Algorithmic Recommendations:
• Examine the use of algorithms for content recommendations and personalized
timelines.
• Consider the ethical implications and challenges associated with algorithmic
decision-making.

6. Community Dynamics and Online Behavior:

• Review research on the formation of online communities.

• Explore studies on user behavior, including the spread of misinformation and
the detection of fake accounts.

7. Mobile App Development and User Experience:

• Investigate literature on mobile app development for social media platforms.
• Explore studies on user experience design, interface design, and usability in
social media applications.

8. Security and Privacy in Social Media:

8
 • Examine research on security issues and privacy concerns in social media
platforms.
• Explore measures and techniques for ensuring the safety of user data.

9. Scalability and Infrastructure:

• Study literature on the technical architecture and scalability of microblogging
platforms.
• Explore how platforms handle a large user base, high traffic, and real-time data
processing.

10. Emerging Trends in Social Media:

• Identify recent trends and advancements in social media technology.
• Consider how emerging technologies like blockchain or augmented reality
might impact social media platforms.

By conducting a thorough literature survey in these areas, you can gain insights into the
existing knowledge base and best practices for developing a Twitter clone or any other social
media platform. This information can inform your design choices, feature selection, and
implementation strategies.

9
CHAPTER 3
Problem Statement

3.1 Problem Statement

Farmers in various secluded villages and towns suffer the following problems:-

• Logging out from the account

• Word limit in posts

• Interface Bugs

• Loading Issues

• Multimedia upload size limit

3.2 Solution

In support of digitalization, We made a web app in replacement of Twizzle to improve the

User’s Experience that is “Twizzle”

10
CHAPTER 4
Minimum Hardware and Software Requirements

4.1 Software Requirements

In this project we have use six technology as follow :-

• HTML
• CSS
• JAVA SCRIPT
• MongoDB
• Express
• React js
• Node js

❖ HTML:-

The Hyper Text Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. The first version of HTML was written by Tim
Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most
widely used version throughout the 2000's was HTML 4.01, which became an official standard
in December 1999. Another version, XHTML, was a rewrite of HTML as an XML language.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated
by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce
content into the page. Other tags such as <p> surround and provide information about
document text and may include other tags as sub-elements. Browsers do not display the HTML
tags but use them to interpret the content of the page.

❖ CSS:-

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of
a document written in a markup language such as HTML or XML (including XML dialects
such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript. CSS is designed to enable the separation of content and
presentation, including layout, colors, and fonts. This separation can improve
content accessibility; provide more flexibility and control in the specification of presentation
characteristics; enable multiple web pages to share formatting by specifying the relevant CSS
11
in a separate .css file, which reduces complexity and repetition in the structural content;
and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.

❖ JAVASCRIPT:-

Java Script , often abbreviated as JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98%
of websites use JavaScript on the client side for webpage behavior, often incorporating third-
party libraries. All major web browsers have a dedicated JavaScript engine to execute
the code on users' devices. JavaScript is a high-level, often just-in-time compiled language that
conforms to the ECMAScript standard.[10] It has dynamic typing, prototype-based object-
orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces (APIs) for
working with text, dates, regular expressions, standard data structures, and the Document
Object Model (DOM).The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or other runtime
system provides JavaScript APIs for I/O. Java Script engines were originally used only in web
browsers, but are now core components of some servers and a variety of applications. The most
popular runtime system for this usage is Node .js. Although Java and JavaScript are similar in
name, syntax, and respective standard libraries, the two languages are distinct and differ greatly
in design.

❖ MongoDB:-

MongoDB is a popular open-source NoSQL (non-relational) database management system

that provides a flexible and scalable approach to storing and managing data. It falls under the
category of document-oriented databases and is designed to handle large volumes of
unstructured or semi-structured data.

Key features of MongoDB include:

1. Document-Oriented:
• MongoDB stores data in flexible, JSON-like BSON (Binary JSON)
documents, allowing for a dynamic and schema-less data model. Documents in
MongoDB can have varying fields, which makes it well-suited for evolving
and changing data structures.

2. Scalability:
• MongoDB is designed to scale horizontally, allowing for the distribution of
data across multiple servers. This makes it suitable for handling large datasets
and high-traffic applications.

12
 3. High Performance:
• MongoDB uses a variety of techniques to ensure high performance, including
indexing, sharding, and in-memory storage. It is optimized for read and write
operations on large amounts of data.

4. Query Language:
• MongoDB supports a powerful and expressive query language, allowing for
complex queries, indexing, and aggregation. Queries can be performed on the
basis of document fields, and the database provides rich functionality for data
retrieval.

5. Replication:
• MongoDB supports replica sets, providing data redundancy and high
availability. In a replica set, multiple copies of data are maintained across
different servers, ensuring that if one server goes down, another can take over.

6. Flexibility:
• MongoDB's flexible schema allows for easy modification of data structures
without requiring a predefined schema. This flexibility is particularly
beneficial in scenarios where the data model is subject to change.

7. Open Source:
• MongoDB is distributed under the terms of the GNU Affero General Public
License and the Apache License. Its open-source nature has contributed to its
widespread adoption and community support.

8. Aggregation Framework:
• MongoDB provides a powerful aggregation framework that allows for the
processing of data within the database. This includes operations such as
filtering, grouping, sorting, and transforming data.

MongoDB is commonly used in a variety of applications, including content management

systems, real-time analytics, mobile applications, and other scenarios where flexible and
scalable data storage is essential. The MongoDB ecosystem also includes tools like
MongoDB Atlas for cloud-based database hosting and MongoDB Compass for a graphical
user interface to interact with the database.

❖ Express:-

13
Express, often referred to as Express.js, is a minimal and flexible web application framework
for Node.js. It provides a set of features and tools for building web and mobile applications
quickly and with less code. Express.js simplifies the process of designing and creating robust
web servers and APIs using JavaScript.

Key features of Express.js include:

1. Middleware:
• Express uses middleware functions to perform various tasks in the request-
response cycle. Middleware functions have access to the request object (req),
the response object (res), and the next function in the application’s request-
response cycle.

2. Routing:
• Express provides a simple and effective routing mechanism that allows
developers to define the routes and endpoints of their applications. This makes
it easy to handle different HTTP methods and request types.

3. HTTP Utility Methods:

• Express simplifies handling HTTP methods (GET, POST, PUT, DELETE, etc.)
through utility methods, making it easier to define the behavior of the application
based on the type of HTTP request.

4. Template Engines:
• While Express itself does not include a template engine, it is often used in
conjunction with popular template engines like EJS, Handlebars, or Pug
(formerly known as Jade) to render dynamic HTML content on the server.

5. Static File Serving:

• Express makes it simple to serve static files, such as HTML, CSS, and client-
side JavaScript, through built-in middleware like express.static.

6. Error Handling:
• Express provides a straightforward mechanism for handling errors in the
application, allowing developers to define error-handling middleware to catch
and process errors.

7. RESTful API Development:

14
 • Express is commonly used for building RESTful APIs. Its simplicity and
flexibility make it a popular choice for creating the backend of web and mobile
applications that communicate with clients through API endpoints.

8. Integration with Other Node.js Modules:

• Express can be easily integrated with other Node.js modules and packages. It is
often used in combination with databases like MongoDB, middleware like
Passport for authentication, and frontend libraries/frameworks like React or
Angular.

Here's a simple example of an Express.js server:

const express = require('express');

const app = express();

const port = 3000;

app.get('/', (req, res) => {

res.send('Hello, World!');

});

app.listen(port, () => {

console.log(`Server listening at http://localhost:${port}`);

});

This example creates a basic Express server that listens on port 3000 and responds with "Hello,
World!" when accessed at the root URL.

❖ React js:-

React.js, commonly known as React, is an open-source JavaScript library developed and

maintained by Facebook. React is primarily used for building user interfaces, particularly for
single-page applications where user interactions are dynamic and frequent. It allows developers
to create reusable UI components that update efficiently and seamlessly in response to changes
in data.

Key features and concepts of React include:

15
1. Component-Based Architecture:
• React follows a component-based architecture, where the user interface is
broken down into modular, reusable components. Each component can manage
its own state, making it easier to maintain and scale applications.

2. Virtual DOM (Document Object Model):

• React uses a virtual DOM to optimize the updating of the actual DOM. Instead
of updating the entire DOM tree when changes occur, React creates a virtual
representation of the DOM in memory and updates only the specific components
that have changed. This minimizes the impact on performance and improves the
efficiency of UI updates.

3. Declarative Syntax:
• React uses a declarative syntax, allowing developers to describe how the UI
should look based on the current state. This is in contrast to imperative
programming, where developers specify each step to achieve a particular result.

4. JSX (JavaScript XML):

• React uses JSX, a syntax extension that allows developers to write HTML-like
code within JavaScript. JSX makes it easier to define UI components and their
structure directly in the code.

5. Unidirectional Data Flow:

• React follows a unidirectional data flow, where data flows in a single direction—
from parent to child components. This helps maintain a clear and predictable
flow of data, making it easier to understand and debug code.

6. React Router:
• React Router is a library that enables navigation and routing in React
applications. It allows developers to create a seamless, single-page application
experience with client-side routing.

7. React Hooks:
• Introduced in React 16.8, hooks are functions that allow developers to use state
and lifecycle features in functional components, enabling the use of stateful
logic without the need for class components.

8. Reusability and Composition:

16
 • React promotes the concept of reusability through components, allowing
developers to build complex UIs by composing smaller, independent
components.

React is often used in conjunction with other tools and libraries, such as Redux for state
management, Axios for handling HTTP requests, and React Router for navigation. It has gained
widespread adoption in the web development community and is used by many companies to
build interactive and responsive user interfaces.

❖ Node js:-

Node.js is an open-source, cross-platform JavaScript runtime environment that allows

developers to execute server-side JavaScript code. It is built on the V8 JavaScript runtime
engine, which is the same engine that powers the Chrome web browser. Node.js enables the
execution of JavaScript code outside of a web browser, making it possible to develop server-
side applications using JavaScript.

Key features and characteristics of Node.js include:

1. Asynchronous and Event-Driven:

• Node.js is designed to be non-blocking and asynchronous. This means that it can
handle a large number of concurrent connections without the need for multi-
threading. Asynchronous I/O operations and an event-driven architecture
contribute to its efficiency.

2. Single-Threaded:
• Node.js operates on a single-threaded event loop, which handles multiple
concurrent connections without the need for creating new threads for each
connection. This approach is well-suited for applications with high levels of
concurrent I/O operations.

3. NPM (Node Package Manager):

• NPM is the default package manager for Node.js, providing a vast ecosystem of
open-source libraries and tools. Developers can easily install, manage, and share
packages, making it efficient to build and maintain Node.js applications.

4. Server-Side Development:
• Node.js is commonly used for building server-side applications, such as web
servers and APIs. It allows developers to use JavaScript for both client-side and
server-side development, promoting code reuse and consistency.

17
 5. JavaScript Everywhere:
• With Node.js, developers can use JavaScript for both frontend and backend
development. This full-stack JavaScript approach simplifies the development
process and encourages a unified language across different parts of an
application.

6. Cross-Platform:
• Node.js is designed to be cross-platform, meaning it can run on various
operating systems, including Windows, macOS, and Linux. This makes it a
flexible choice for developers working on different platforms.

7. Community and Ecosystem:

• Node.js has a large and active community that contributes to its growth and
development. The extensive ecosystem of modules and libraries available
through NPM covers a wide range of functionalities, making it easier for
developers to find and use existing solutions.

8. Real-Time Applications:
• Due to its event-driven and non-blocking nature, Node.js is well-suited for real-
time applications, such as chat applications, online gaming, and collaborative
tools, where low-latency and high-concurrency are essential.

Node.js is often used in combination with other technologies, such as Express.js for building
web applications and APIs, MongoDB for databases, and Socket.io for real-time
communication. It has become a popular choice for building scalable and high-performance
server-side applications in the modern web development landscape.

4.2 Hardware Requirements

Building a MERN (MongoDB, Express.js, React, Node.js) stack project requires a specific set
of hardware and software resources to ensure smooth development and deployment. The
MERN stack is widely used for developing web applications due to its flexibility and efficiency.
Below are the hardware requirements for developing a MERN stack project:

1. Processor (CPU):

A powerful multicore processor is essential for handling the compilation, bundling, and other
processing tasks involved in MERN stack development. A quad-core processor or higher is
recommended to ensure efficient multitasking and quick code execution.

18
2. Random Access Memory (RAM):

Adequate RAM is crucial for running multiple development tools, servers, and the browser
simultaneously. A minimum of 8GB of RAM is recommended, but 16GB or more will provide
better performance, especially when working on complex projects.

3. Storage (HDD/SSD):

Fast storage is essential for quick read and write operations during development. While a
traditional Hard Disk Drive (HDD) can suffice, using a Solid State Drive (SSD) significantly
improves overall system responsiveness and reduces project loading times.

4. Graphics Processing Unit (GPU):

For MERN stack development, a dedicated GPU is not a strict requirement unless the project
involves graphics-intensive tasks. However, having a decent GPU can enhance the overall
performance of the development environment and provide better support for modern web
technologies.

5. Network Connectivity:

A stable internet connection is crucial for accessing online resources, libraries, and
collaboration tools. MERN stack projects often involve dependencies that need to be
downloaded, so a reliable and high-speed internet connection is beneficial.

6. Operating System:

MERN stack development can be done on various operating systems, including Windows,
macOS, and Linux. Choose an operating system based on personal preference and compatibility
with the tools and libraries you plan to use. Linux, especially Ubuntu, is a popular choice for
MERN stack development due to its robust command-line interface and compatibility with
many development tools.

7. Development Environment:

Install a code editor or Integrated Development Environment (IDE) suitable for JavaScript
development. Popular choices include Visual Studio Code, Atom, or Sublime Text. These tools
provide features like syntax highlighting, autocompletion, and debugging support.

8. Virtualization Technology:
19
MERN stack development often involves the use of virtualization tools like Docker for
containerization. Ensure that your CPU and BIOS support hardware virtualization to facilitate
efficient containerization and deployment processes.

9. Browser:

A modern web browser is essential for testing and debugging web applications. Google
Chrome, Mozilla Firefox, or Microsoft Edge are commonly used browsers for MERN stack
development. Consider using browser developer tools for efficient debugging and performance
analysis.

10. Mobile Devices for Testing:

If your MERN stack project includes mobile responsiveness, having access to mobile devices
or using emulators/simulators for testing is important. This ensures that your web application
functions correctly on various screen sizes. In conclusion, the hardware requirements for
MERN stack development involve a well-equipped computer with a powerful processor,
sufficient RAM, fast storage, and a stable internet connection. Additionally, choosing the right
operating system, development environment, and considering virtualization technology can
contribute to a seamless development experience. Keep in mind that these are general
recommendations, and specific project requirements may vary.

20
CHAPTER 5

Methodology Used

5.1 Method

Developing Twizzle involves a series of steps and a well-defined methodology. Here's a

general outline of the methodology that can be used:

1. Define Requirements:
• Clearly outline the features and functionalities you want in your Twizzle .
Identify the core components, user interactions, and any unique features you
plan to include.

2. System Design:
• Create an architecture and system design for your application. Decide on the
technology stack, including programming languages, frameworks, and
databases. Consider scalability and performance requirements.

3. Database Design:
• Based on the defined requirements, create the database schema. Identify
entities, relationships, and attributes. Normalize the database for efficient data
storage and retrieval.

4. Frontend Development:
• Implement the user interface (UI) of your Twizzle . This involves designing
and developing the screens, navigation, and user interactions. Use HTML,
CSS, and JavaScript, and consider using frontend frameworks like React.

5. Backend Development:
• Develop the server-side logic and backend functionality. Implement user
authentication, tweet posting, following/follower functionality, and other core
features. Use a backend framework like Django, Flask, Ruby on Rails,
Express.js, or similar.

6. API Development:
• Create APIs (Application Programming Interfaces) to enable communication
between the frontend and backend. RESTful APIs are commonly used for web
applications. Ensure that your APIs are secure and well-documented.
21
7. Database Implementation:
• Implement the database based on the previously designed schema. Use a
relational database management system (RDBMS) like MySQL, PostgreSQL,
or SQLite. Set up database connections and ensure data integrity.

8. Integration of Third-Party Services:

• If applicable, integrate third-party services for features like authentication,
image hosting, or analytics. For example, you might use OAuth for
authentication or a cloud storage service for media uploads.

9. Testing:
• Conduct thorough testing of your application. Perform unit testing, integration
testing, and system testing to identify and fix bugs. Ensure that your
application works seamlessly across different devices and browsers.

10. Security Implementation:

• Implement security measures to protect user data. This includes secure
password hashing, data encryption, and protection against common web
vulnerabilities like Cross-Site Scripting (XSS) and Cross-Site Request Forgery
(CSRF).

11. Deployment:
• Deploy your Twizzle to a production environment. Choose a reliable hosting
service, set up a domain, and configure your server. Consider using platforms
like netlify, Heroku, or render.

12. Monitoring and Maintenance:

• Implement monitoring tools to keep track of application performance, server
health, and user activity. Regularly update and maintain your application to fix
bugs, add new features, and improve security.

13. Iterative Development:

• Based on user feedback and evolving requirements, continue to iterate on your
application. Implement updates, new features, and optimizations to enhance
the user experience.
• This methodology provides a structured approach to developing a Twizzle , but
the specific steps and technologies used can vary based on your preferences,
expertise, and the requirements of your project.
22
CHAPTER 6
Design Framework

6.1 ER Diagram
Creating a detailed Entity-Relationship (ER) diagram for Twizzle involves identifying the key
entities, their attributes, and the relationships between them. Below is a simplified ER
diagram for a Twizzle-like application:

1. Entities:

• User:
• Attributes: UserID (PK), Username, Email, Password, ProfilePicture,
Bio, JoinDate
• Post:
• Attributes: PostID (PK), UserID (FK), Content, Timestamp, Likes,
Reposts
• Follower:
• Attributes: FollowerID (PK), FollowerUserID (FK), FollowedUserID
(FK), FollowDate
• Like:
• Attributes: LikeID (PK), PostID (FK), UserID (FK), LikeDate
• RePost:
• Attributes: RepostID (PK), OriginalPostID (FK), UserID (FK),
RepostDate

2. Relationships:
• User - Post (One-to-Many):
• One user can have many posts; each post belongs to one user.
• User - Follower (Many-to-Many):
• Many users can follow many other users.
• Post - Hashtag (Many-to-Many):
• Many posts can be associated with many hashtags, and a hashtag can
be used in many posts.
• Post - Mention (Many-to-Many):
• Many posts can mention many users, and a user can be mentioned in
many posts.
• User - Like (Many-to-Many):
• Many users can like many posts, and a post can be liked by many users.
• User - Repost (Many-to-Many):
• Many users can repost many posts, and a post can be reposted by many
users.
• User - Notification (One-to-Many):
• One user can have many notifications; each notification belongs to one
user.

3. Cardinality and Participation Constraints:

23
 • Each entity has a primary key (PK) attribute.
• Foreign keys (FK) establish relationships between entities.
• Participation constraints can be added to specify whether an entity is optional
or mandatory in a relationship.

6.2 Use Case Diagram:-

Twizzle

Guest Logged In User

View Posts Create Post

Search User Like/ Unlike

View Profile Comment

View Feeds Update/ Delete Post

24
In this diagram:

• Actors:

• Guest: Someone who is not logged in.

• Logged-In User: A registered user who has logged into the Twizzle .

• Use Cases:

• View Post: Allows both guests and logged-in users to view posts posted by
other users.

• Create Post: Enables a logged-in user to create and share a post.

• Search Users: Permits users to search for other users.

• Like/ Unlike: Allows a user to like or unlike the post.

• View User Profile: Displays the profile of a user, showing their posts and
other information.

• Comment: Enables users to comment on the posts of the user.

• Feeds: Shows the feeds where new posts, new followers, likes, reposts, and
mentions appear.

• Update/ Delete Post: Allows a user to customize their profile by adding a

profile picture, bio, deleting a post, etc.

This use case diagram provides a high-level overview of the main functionalities and
interactions within the Twizzle system. Keep in mind that this is a simplified representation,
and you may want to add more details or refine the diagram based on specific features and
interactions you plan to implement in your application.

25
 6.3 Data Flow Diagram:-

Admin data flow diagram

CHECK USERNAME AND

LOGIN PASSWORD FROM DATABASE
DATABASE

TABLE
USERNAME
PASSWORD -ADMIN
PERMISSION FOR -UPLOAD
ADMIN PAGE

ADMIN PERMISSION

UPLOAD

UPLOAD
PROFILE

UPLOAD

VIDEO OR
IMAGE SAVE

26
 Registration for new user data flow diagram

STORE USER DETAIL IN

SIGN UP DATABASE
DATABASE
• NAME
TABLE
• USERNAME
• EMAIL ID
• PASSWORD - USERS
• PROFESSION - POSTS
NEW USER • ADDRESS

User data flow diagram

CHECK USERNAME
LOGIN AND PASSWORD
FROM DATABASE DATABASE
• USERNAME -USERNAME
• PASSWORD -PASSWORD
-POSTS
PERMISSION FOR -COMMENT
USER PAGE -IMAGE

USER
PERMISSION

USER
PROFILE

- IMAGE
- POSTS
-COMMENTS

27
CHAPTER 7
Implementation

7.1 Snapshot

Twizzle project is divided into various sections. These Sections are as follows:-

1. Home page
2. Register page
3. Login page
4. Forgot page
5. Profile page
6. Feeds page
7. Posts

Home page :-

Home page is the main or default page that a website displays when visitors access its
domain. It is often the first page users see and serves as the starting point for navigating the
rest of the site. The home page typically provides an overview of the website's content and
may include navigation menus, links to important sections, and introductory information.

In the home page we basically shown the user’s profile which is made after the user registers
on the Twizzle application.

Fig:-7.1-Description of home page

28
Signup Page :-

There is the signup page part which can be seen by the following figure we can know more
about Login part. It also has a feature for you if you forget the password of your login ID. Int
this page basically we provided the various details that are required by the user to be filled such
as:-

• Name
• Username
• Email
• Address
• Password
• Profession

Fig.:-7.2-Description of Sign up page

Login Page :-

There is the login page part which can be seen by the following figure we can know more about
Login part. It also has a feature for you if you forget the password of your login ID. The
credentials to be filled are:-

• Username
29
 • Password

Fig.:7.3-Description of login page

Forgot Page :-

This is the forgot page which can be seen by the following figure we can know more about what
all information are needed if we forget our login password and we have to reset the password.

The credentials required here are the email ID of the user so that the link is sent on his mail so
that he can reset the password and as there are chances of a fake reset request so by using google
authentication we can clearly send the secret key such that the mail has been sent from an actual
user can be identified by matching the secret key code.

30
 Fig.:7.4-Description of forgot page

Profile Page :-

Similar to the login/signup page there’s a profile page too from where user can access his ID
and can interact with the various features of Twizzle. This page needs a wide range of
description of the user because that will help other users more to get to know them. The various
information here are:-

• Personal Details
1. Name
2. Username
3. Posts
4. Followers
5. Follows
6. Explore
7. Notifications
8. Comments on posts
9. Logout

31
 Fig.:-7.5-Description of user profile page

Feeds Page :-

This is the feeds page here you can see all the posts that are done by your follows where you
can like them comment on them and can repost them on your page.

Fig.:7.6-Description of feeds page

32
Create Post :-

This is the method from which you can create your own post. A logged in user can create his
own post by adding images, gifs, videos to his post and with unlimited words in a post as
there is a limit of tweet words in twitter here it is not the case.

Fig.:7.7-Description of creating a post

Posts:-

The posts is the page which can be seen by the non-logged in users and here they can also get
a little experience of how the application is which also motivates them to download the
application and thus making the more wanna be than twitter.

33
 Fig.:7.8-Description of posts

Comments :-

These are basically the thoughts that the viewers or the users who ever is seeing the post can
comment. Comments are done by the users and you can also comment on your own post so
making it more suitable for you to reply to the users who are commenting on your posts.

34
Fig.:7.9-Description of comments

35
7.2 Coding

1. User Model :-

var userSchema = mongoose.Schema({

headname:String,
username: String,
email:String,
password:String,
Profession:String,
address:String,
image: {
type: String,
default: "def.png"
},

posts:[
{type: mongoose.Schema.Types.ObjectId, ref:"post"}
],
comment: [
{
userid: {
type:mongoose.Schema.Types.ObjectId,
ref:"user"
},
msg:String,
username:String,
image:String,

date:{
type: Date,
default: Date.now()
}
}
],
key:String,
expirykey:Date,
})

userSchema.plugin(passportLocalMongoose);
module.exports = mongoose.model('user', userSchema)

2. Post Model :-

36
const postSchema = mongoose.Schema({
userid: {
type: mongoose.Schema.Types.ObjectId,
ref:"user"
},
data:String,
likes: [
{ type:mongoose.Schema.Types.ObjectId, ref:"user"}
],
image: {
type:String,
userid: {
type:mongoose.Schema.Types.ObjectId,
ref:"user"
},
},

comment: [
{
userid: {
type:mongoose.Schema.Types.ObjectId,
ref:"user"
},
msg:String,
username:String,
headname:String,
image:String,

date:{
type: Date,
default: Date.now()
}
}
],

date:{
type: Date,
default: Date.now()
},

postimage:{
type:String
},

})

module.exports = mongoose.model("post", postSchema);

37
 3. forgot route :-

router.post('/forgot', async function (req, res, next) {

var user = await userModel.findOne({ email: req.body.email })
if (!user) {
res.send("we've sent a mail, if email exists");

}
else {
// user ke liye ek key banao
crypto.randomBytes(80, async function (err, buff) {
let key = buff.toString("hex");
mailer(req.body.email, user._id, key)
.then(async function () {
user.expirykey = Date.now() + 24 * 60 * 60 * 1000;
user.key = key;
await user.save();
res.send("mail sent")

})
})
}
})

router.get('/forgot/:userid/:key', async function (req, res, next) {

let user = await userModel.findOne({ _id: req.params.userid })
if (user.key === req.params.key && Date.now() < user.expirykey) {

// show a page to user which asks for new password

res.render("reset", { user })

}
else {
res.send("tez hmmmmmmmmmmmmmm")
}
});

4. profile route :-

router.get('/profile', isLoggedIn, function (req, res, next) {

userModel
.findOne({ username: req.session.passport.user })
.populate({
path: 'posts',
populate: {
38
 path: 'comment',
populate: {
path: 'userid'
}
}
})
.then(function (userdets) {
console.log(userdets);
res.render('profile', { userdets })
})
})

5. delete route :-

router.get('/deleteuser/:id', function (req, res, next) {

// console.log(req.params.id);
userModel.findOneAndDelete({ _id: req.params.id })
.then(function (deleted) {
postModel.findOneAndDelete({ userid: req.params.id })
.then(function () {
res.render("index");
})
})
})

6. like route :-

router.get('/like/:postid', isLoggedIn, function (req, res) {

userModel
.findOne({ username: req.session.passport.user })
.then(function (user) {
postModel
.findOne({ _id: req.params.postid })
.then(function (post) {
if (post.likes.indexOf(user._id) === -1) {
post.likes.push(user._id);
}
else {
post.likes.splice(post.likes.indexOf(user._id), 1);
}
post.save()
.then(function () {
res.redirect("back");
})
})
})
39
});

7. update route :-

router.post('/update', isLoggedIn, function (req, res, next) {

userModel
.findOneAndUpdate({ username: req.session.passport.user }, {
username: req.body.username,
Profession: req.body.Profession,
address: req.body.address
}, { new: true })
.then(function (updateduser) {
req.login(updateduser, function (err) { // this is documentation of login
if (err) { return next(err); }
return res.redirect('/profile');
});
})
});

8. edit route :-

router.get('/edit', isLoggedIn, function (req, res) {

userModel
.findOne({ username: req.session.passport.user })
.then(function (founduser) {
console.log(founduser)
res.render("edit", { founduser })
})
})

9. feeds route :-

router.get('/feed', isLoggedIn, function (req, res,) {

userModel.findOne({ username: req.session.passport.user })
.then(function (user) {
postModel.find()
.populate("userid comment.userid")
.then(function (allposts) {

res.render('feed', { allposts, user })

})
})

40
})

10. comment route :-

router.post('/comment/:postid', isLoggedIn, function (req, res) {

userModel.findOne({ username: req.session.passport.user })
.then(function (founduser) {
postModel.findOne({ _id: req.params.postid })
.then(function (post) {
post.comment.push({
username: founduser.username,
msg: req.body.comment,
image: req.body.image,
userid: founduser._id
})

post.save()
.then(function () {
res.redirect('back')
})
})
})
})

11. post route :-

router.post('/post', isLoggedIn, upload.single("postimage"), function (req, res) {

userModel.findOne({ username: req.session.passport.user })
.then(function (user) {
postModel.create({
postimage: req.file.filename,
data: req.body.post,
userid: user._id,

})
.then(function (post) {

user.posts.push(post._id)
user.save()
.then(function () {
res.redirect("back")
})
})

41
CHAPTER 8
Testing

8.1 Testing

Database Users data :-

This is the visual of the MongoDB database which testifies that the user is getting created and
his data is being saved in the database and thus, successful test case. Here you can see all the
information that are given by the user while registering and while he updates his profile.

Fig.:7.10-Description of user’s data in database

Database Posts data :-

This is the post model image which shows that the posts which are created are created by
which user and what are the various multi medias that are used in the posts making it easy for
the admin to control and maintain the users information.

42
 Fig.:7.11-Description of posts data in database

Beta Testing Plan for EV Charging Solution Application

Objective:
The purpose of the beta testing phase for the Twizzle Application is to gather real-world user
feedback, identify potential issues, and ensure the application's reliability and usability across
a diverse user base. This testing phase will involve external users who will actively engage with
the application in different scenarios and provide valuable insights for further improvements.
Beta Testing Scope:
The beta testing will focus on the following key areas:
1. User interface and navigation.
2. Accuracy and real-time updates of information.
3. Efficiency estimation.
4. Data storage and retrieval functionality.
5. Overall user experience and feedback.

Beta Testing Participants:

43
Recruit a diverse group of beta testers, including web developers owners, to ensure a
representative sample of the target user base. The testers should have varying levels of technical
expertise and use different devices and operating systems.
Testing Environment:
Beta testing will be conducted in a real-world environment, utilizing various devices, browsers,
and operating systems. Testers will be provided with access to the beta version of the
application with clear instructions on usage and feedback submission.
Beta Testing Phases:
1. Recruitment:
- Identify and recruit beta testers from the target audience.
- Provide testers with clear instructions on how to access the beta version and submit
feedback.
2. Kick-off Meeting:
- Conduct a virtual kick-off meeting to introduce the beta testing team to the
application.
- Provide an overview of the testing goals, key features to focus on, and the feedback
submission process.
3. Beta Testing Period:
- Distribute the beta version of the application to testers.
- Encourage testers to use the application in real-world scenarios, including creating
a user profile, adding multimedias such as profile picture, creating posts, adding
comments on posts, making updations of data.
- Prompt testers to provide feedback on any issues encountered, overall user
experience, and suggestions for improvement.
4. Feedback Collection:
- Establish a centralized system for collecting feedback, including bugs, usability
issues, and enhancement suggestions.
- Categorize and prioritize feedback based on severity and impact on the user
experience.
5. Iterative Testing:
- Release periodic updates to the beta version addressing reported issues and
incorporating user feedback.
- Notify testers of updates and encourage them to retest the application.
6. Closing Survey:
- Conduct a closing survey to gather final thoughts and impressions from beta testers.

44
 - Gather insights on whether identified issues have been resolved and if the user
experience has improved.
Documentation:
Document all feedback received during the beta testing phase, including bug reports,
enhancement suggestions, and general comments. Create a summary report highlighting the
key findings, the resolution status of reported issues, and recommendations for further
improvements.
Conclusion:
The beta testing phase will provide valuable insights into the real-world performance and user
experience of the Twizzle Application. The gathered feedback will inform the development
team about necessary adjustments and improvements before the official release, ensuring a
reliable and user-friendly application for the wider audience.

Alpha Testing Plan for EV Charging Solution Application

Objective:
The alpha testing phase for Twizzle Application aims to assess the application's functionality,
identify potential bugs, and ensure that it meets the specified requirements in a controlled
environment. This testing phase is conducted by an in-house testing team before the application
is released to external beta testers.

Alpha Testing Scope:

The alpha testing will cover the following key areas:
1. Core functionality of the application.
2. User interface and navigation.
3. Integration of real-time information.
4. Data storage and retrieval processes.
6. Security and data privacy measures.

Alpha Testing Team:

The alpha testing team will consist of internal testers, including developers, quality assurance
professionals, and project stakeholders. This team is familiar with the project requirements and
can effectively communicate with the development team for rapid issue resolution.
Testing Environment:

45
The alpha testing will be conducted in a controlled environment that replicates the intended
production environment. Testers will have access to various devices, browsers, and operating
systems to simulate real-world usage scenarios.
Alpha Testing Phases:
1. Planning:
- Define the scope and objectives of the alpha testing phase.
- Identify key test scenarios and use cases.
- Set up the testing environment with necessary tools and data.
2. Test Case Development:
- Develop comprehensive test cases covering the identified test scenarios.
- Include positive and negative test cases to thoroughly validate the application's
functionality.
3. Execution:
- Execute the prepared test cases on different devices and browsers.
- Evaluate the application's behavior under varying conditions, including different
network speeds and device capabilities.
- Monitor for any unexpected behaviors, errors, or crashes.
4. Bug Reporting:
- Document any issues or bugs encountered during testing.
- Provide detailed information about each identified issue, including steps to
reproduce, expected behavior, and observed behavior.
- Prioritize and categorize bugs based on severity.
5. Collaboration with Development Team:
- Communicate effectively with the development team to resolve identified issues
promptly.
- Conduct regular meetings to discuss the progress of testing and address any
questions or concerns.
6. Regression Testing:
- Perform regression testing after bug fixes or feature enhancements to ensure that
existing functionalities are not adversely affected.
Documentation:
Maintain detailed documentation of the alpha testing process, including test plans, test cases,
test results, and bug reports. Document any changes made to the application during the testing
phase and their impact on overall performance.
Conclusion:

46
The alpha testing phase provides an essential opportunity to identify and address issues within
the Twizzle Application before external beta testing. The feedback and insights gained during
alpha testing contribute to refining the application for optimal functionality, ensuring a
smoother experience for beta testers and, ultimately, end-users upon the application's official
release.

47
CHAPTER 9
Conclusion and Future Scope

9.1 Conclusion and Future Scope

The creation of a Twitter clone involves synthesizing knowledge from microblogging

platforms, social media dynamics, and user engagement strategies. As the platform takes
shape, several key takeaways emerge:

1. User-Centric Approach:
• A user-centric design, featuring essential microblogging elements, encourages
engagement and interaction within the platform.
• User feedback and iterative improvements are integral to refining the user
experience over time.

2. Algorithmic Intelligence:
• The implementation of algorithms for content recommendations and
personalized timelines adds depth to user interactions.
• Striking a balance between algorithmic efficiency and ethical considerations is
an ongoing commitment.

3. Community Building:
• The success of the platform depends on the formation and sustenance of
vibrant online communities.
• Efforts to moderate content, prevent misinformation, and encourage positive
interactions contribute to a healthy community environment.

4. Security and Privacy Focus:

• Continuous efforts to enhance security measures and protect user privacy
reinforce user trust.
• Regular audits and updates are necessary to stay ahead of evolving
cybersecurity threats.

Future Scope:
As the Twitter clone moves into the future, several areas deserve attention and exploration:

1. Innovative Features:
• Continuous innovation in features will keep the platform dynamic and
appealing.
• Exploring new ways to present content, foster discussions, and integrate
multimedia elements can set the platform apart.

2. Emerging Technologies:
• Keeping abreast of emerging technologies, such as AI, blockchain, and
augmented reality, can provide opportunities for enhancing user experiences
and platform functionalities.

3. Global Expansion:
• Consideration of global expansion to reach diverse user bases.
• Adaptations for different cultures and languages can broaden the platform's
appeal.
48
 4. Adaptability to Trends:
• Staying adaptable to evolving social media trends ensures the platform remains
relevant.
• Swift incorporation of new features or adjustments based on user behavior and
industry developments is key.

5. Collaboration and Integration:

• Exploring partnerships and integrations with other platforms or technologies
can open new avenues.
• Collaborating with third-party developers may contribute to the expansion of
the platform's ecosystem.

6. Sustainability and Scalability:

• Continuous efforts to ensure the platform's sustainability, scalability, and
resilience are vital.
• Scaling infrastructure and optimizing performance will be ongoing priorities to
handle increased user loads.

In summary, the future of the Twitter clone lies in its ability to evolve, adapt, and innovate
while maintaining a strong focus on user satisfaction, security, and community well-being.
Regular assessments, user feedback mechanisms, and a commitment to technological
advancements will contribute to a robust and enduring social media platform.

49
 References

Help from internet following websites links have been used in the
completion of this project “Twizzle”:-

• https://www.unsplash.com/

• https://www.remixicon.com/

• https://www.icons8.com/

• https://www.npmjs.com/

• https://www.github.com/

• https://www.nodejs.org/

• https://www.react.dev/

• https://www.cdnjs.com/

• https://www.jsDelivr.com/

50