Create Twitter like profile page template

How to create Twitter like profile page user interface in React js

Posted by Luke Beeno on December 14, 2022

Create Twitter like profile page template

How to create Twitter like profile page user interface in React js

Posted by Luke Beeno on December 14, 2022

In this lesson, we are going to look into how to create a twitter like user profile template. This is only a template, no data is coming from the database.

If you wish to follow along, you need to install bootstrap and fontawsome before you start. 

Here we go!

Step 1. Use boostrap row class to divide the pages

If you are looking at a user profile on twitter, the page is divided in 3 columns with the user profile interface allocated the biggest portion and positioned in the middle

The row class is used to divide the page. This lesson is only focused on the user profile, therefore will not go into details about the other parts.

Here is the code snippet below:

JSX

<div className="App">
  <div className="container">
    <div className="row">
      <div className="col-6 mx-auto">

      </div>
    </div>
  </div>
</div>

Step 2. Create cover photo

All that was done here is setting the image to background

See code snippets below:

JSX

<div className="App">
  <div className="container">
    <div className="row">
      <div className="col-6 mx-auto">
           <div className="profile-cover-wrap pointer" style={{ backgroundImage: `url(${coverPhoto})`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
              backgroundSize: 'cover'}}>

          </div>
      </div>
    </div>
  </div>
</div>

CSS

.profile-cover-wrap{
    width: 600px;
    height: 200px;
}

.back-arrow{
    min-width: 68px;
    min-height: 32px;
    align-items: flex-start;
    -webkit-box-pack: center;
    justify-content: center;
    align-self: center;
    padding: 0 16px 0 16px;
}

Step 3. Set nav arrow and user-name at top of cover photo

In this section there is an arrow symbol, user-name and amount of tweets, wrapped in a div "identifier-wrap pointer".

Within div "identifier-wrap pointer", the arrow is place inline, wrapped within a separate div "ba-inner" to the user-name and tweet amount.

The user-name and tweet amount are set in seperate div in the same wrapper div "identifier" and styled accordingly.

The arrow is further wrapped with its own individual div to be styled. 

JSX

<div className="App">
  <div className="container">
    <div className="row">
      <div className="col-6 mx-auto">
         <div className="identifier-wrap pointer">
            <div className="back-arrow">
                <div className="ba-inner pf-rd-shw clr-hv">
                    <FontAwesomeIcon icon={faArrowLeftLong} size={'1x'} />
                </div>
            </div>
            <div className="identifier">
                <div className="user-name">Joe Miller</div>
                <div className="tweet-sub cls-gp">10.8k Tweets</div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

CSS

.identifier-wrap{
    height: 53px;
    display: inline-flex;
}

Step 4. Set user-profile image

The user-profile image is placed in a wrapper div below the cover photo wrapper. 

Within that wrapper, another outer wrapper and inner wrapper is placed specific for the profile-image.

The outer wrapper is used to set width, height and radius around the image.

The inner wrapper set the position of the profile image, especially in relation to the cover photo.

Here is the code snippet below:

JSX

<div className="App">
  <div className="container">
    <div className="row">
      <div className="col-6 mx-auto">
        <div className="profile-details-wrap">
          <div className="profile-detail-line-1">
            <div className="profile-img-outer-wrap">
              <div className="profile-img-inner-wrap pointer">
                <img src={profileImg} className="rounded-circle profile-img" alt="profile photo" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.profile-img-outer-wrap {
    height: calc(100% - 12px);
    transform: translateY(-62px);
    width: 25%;
    min-width: 48px;
    margin-left: 4.4%;
    border-radius: 9999px;
    background-color: rgba(255,255,255,1.00);
}

.profile-img-inner-wrap{
    z-index: 0;
    position: absolute;
    margin:0;
    padding:0;
    overflow: hidden;
}

Step 5. Set icons and the follow button

The button and icons are placed in the same main wrapper as the user-profile image.

They are placed within a inner wrapper "connect-group" which is used to set them opposite to the profile photo.

Each of the icons are further wrapped within their individual wrapper to be styled.

Here is the code snippet below:

JSX

<div className="App">
  <div className="container">
    <div className="row">
      <div className="col-6 mx-auto">
        <div className="profile-details-wrap">
          <div className="profile-detail-line-1">
            <div className="connect-group">
               <div className="connect-icon pf-rd-shw pointer clr-hv"><FontAwesomeIcon icon={faEllipsisH} size={'1x'} /></div>
               <div className="connect-icon pf-rd-shw pointer clr-hv"><FontAwesomeIcon icon={faEnvelope} size={'1x'} /></div>
               <button className="btn btn-dark pointer">Follow</button>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.connect-group{
    -webkit-box-align: end;
    align-items: flex-end;
    float: right;
    padding-top: 10px;
    margin-right: 3%;
    display: inline-flex;
}

.connect-icon{
    margin-right: 15px;
    border: 1px solid #cdcdcd;
    padding: 5px 10px 5px 10px;
}

Step 6. Set user-name and handle

The user-name and Twitter handle are placed in a wrapper below the wrapper that contains the profile image and the icons.

The wrapper "profile-detail-line-2" sets the position of the user-name and Twitter handle below the user-profile image.

The user-name and Twitter handle are further wrapped in their own individual divs for styling.

JSX

<div className="profile-detail-line-2">
    <div className="user-name">Joe Miller</div>
    <div className="tweet-sub cls-gp">@JoeMiller</div>
</div>

CSS

.profile-detail-line-2{
    margin-top: 62px;
    position: absolute;
    margin-left: 1.6%;
}

.tweet-sub{
    color: rgb(83, 100, 113);
    font-size: 13px;
}

.user-name{
    font-size: 20px;
    font-weight: bold;
}

Download project here

Please execute npm install within project root, if you plan to download the project above.

Any question?
This field is required
Your question have been successfully submitted and will be reviewed before published
Please login to ask a question