TWITTER WEB CLONE

MINOR PROJECT PRESENTATION

PRESENTED BY:
AMIT PANT
180180102004
E.C.E. IV YEAR
Twitter-Clone
Home
Page
 AUTHENTICATION

1. On navigating with the signin button it authenticate with the user using
twitter authentication through which the user can login to the clone.
2. See Tweets from your timeline (including protected Tweets) as well as
your Lists and collections.
3. See your Twitter profile information and account settings.
4. See accounts you follow, mute, and block.
5. Follow and unfollow accounts for you.
6. Update your profile and account settings.
7. Post and delete Tweets for you, and engage with Tweets posted by
others (Like, un-Like, or reply to a Tweet, Retweet, etc.) for you.
8. Create, manage, and delete Lists and collections for you.
9. Mute, block, and report accounts for you.
 Logged-In Page

A. It is the base page on which the user interact with the various menus as

a) Home
b) Explore
c) Notifications
d) Message
e) Bookmarks
f) List
g) Profile
B. In it the user can upload various images or videos

C. Once's uploaded the user can surf through it.

 Image Upload

 On hovering over the  In the popups the user can  Until the user types
image icon on bottom-left select multiple images to something the “Tweet”
corner it turn blue and on tweet. Button remains disabled
clicking a popup appears. and as the user types the
“Tweet” button gets
enabled
Uploading and Rendering

 On clicking the “Tweet” button the percentage of image

uploading is shown and as the uploading completes.
 It automatically renders the images uploaded in the same quality
as uploaded.
 The various buttons at the bottom of enables the user to
comment on the image or reload the image if an error occurred
with tweet and liked button let the user know how many likes are
added.
 Firebase

 The project is been hosted on

Firebase and the database of the
users are stored as well.
 The various user that are logged in
this is also being stored in the
authentication section of the
firebase.
 The images uploaded by the user
are managed by the firebase storage
section.
 Hosting

 The project is hosted in the firebase hosting domains that provide the various domain URLs as shown above for
the clone.
 Git Analysis

 The project had been created with the combination of various language such as React-Js, CSS,HTML5.
 The project code is sequentially divided in various folder and files as shown below.
 Project-Code

import { Avatar, Button } from '@material-ui/core';

import React, { useState } from 'react'; return (
<div className="selftweet">
import './Tweetinput.css'; <div className="selftweet__body">
import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary'; <Avatar className="selftweet__body__avatar" src={props.user.photoURL} alt="avatar"
>{props.user.displayName[0]}</Avatar>
import firebase from 'firebase';
import db,{storage} from '../../Firebase/Firebase';
<textarea value={tweetContent}
import { connect } from 'react-redux'; onChange={(e)=>{if(tweetContent.length<300 || e.target.value.length<300){settweetContent(e.target.value)}}}
placeholder="What's Happening......?"/>
const Tweetinput = (props) => { </div>
const [tweetContent,settweetContent] = useState(""); <div className="selftweet__tweet">
const [uploadImages,setuploadImages] = useState(null); <div className="selftweet__tweet__details">
const [tweeting,setTweeting] = useState(false);
const [uploadedAmount,setuploadedAmount] = useState(0);
<label className="image__uploader"><PhotoLibraryIcon id="image__uploader__label"/> <input type="file"
const [uploadedNumber,setuploadedNumber] = useState(0); multiple max={2} onChange={(e)=>{imageSourceChangeHandler(e)}} /></label>
<p style={{color: uploadImages?uploadImages.length===2?"red":"grey":"grey"}}>{uploadImages?
const tweetTWEET = (e) =>{ uploadImages.length:0}/2 Images</p>
e.preventDefault(); <p style={{color: tweetContent.length>250?"red":"grey"}}>{tweetContent.length}/300 Words</p>
setTweeting(true); <p style={{display: tweeting?"initial":"none",color: "green",fontWeight: 900}}>Uploading Image: {uploadedAmount}
const data = {
displayName: props.user.displayName,
% {uploadedNumber}/{uploadImages?uploadImages.length:0}</p>
userName: props.user.userName, </div>
profileUrl: props.user.photoURL, <Button disabled={tweeting || tweetContent.trim()==="" } onClick={(e)=>{tweetTWEET(e);}}
verified: props.user.verified, className="selftweet__button">Tweet</Button>
timeStamp: firebase.firestore.FieldValue.serverTimestamp(), </div>
tweetText: tweetContent, </div>
images: []
}
)
const uploadedImages = []; };
}
const imageSourceChangeHandler = (e)=>{
e.preventDefault(); const mapStateToProps = (state) =>{
if(e.target.files[0]){ return{
setuploadImages([e.target.files[0],e.target.files[1]]);
user: state.auth.user
}else{
setuploadImages(null) }
} }
}
export default connect(mapStateToProps)(Tweetinput);
THANK-YOU