Twitter Prototype Github repo

Technologies used

Programming Languages: Javascript, HTML5

Web/Mobile Frameworks: React, Node.js, Redux, Passport, JWT, Bootstarp, Canvas.js

Databases: MySQL, MongoDB, Redis

Cloud Technologies: AWS EC2, AWS ECS, AWS ECR, Docker, Kafka

Testing: Mockito, Chai, JMeter

Architecture

Homescreen

It contains three React components - Sidebar, TweetList, and SearchBar created using Bootstrap. I used child to parent callback to toggle between various screens listed in the SideBar. For example, clicking on Bookmarks button calls sendData() which invokes the callback function to the parent to change the state of the parent to Bookmarks.

<button
    type="button"
    class="list-group-item list-group-item-action borderless"
    onClick={() => this.sendData("Bookmarks")}
>   
    <FontAwesomeIcon icon={faBookmark} />
        <span>Bookmarks</span>
 </button>
 
sendData = (screenName) => {
    this.props.parentCallback(screenName);
};

Analytics charts

I created data visualization charts using Canvas.js to show Top 10 tweets by views. I used Redux calls to get the data for the top 10 tweets and then passed it to the Chart child container as can be shown below.

render() {
    const options = {
        animationEnabled: true,
        theme: "light2",
        title: {
            text: "Top 10 tweets by views"
        },
        axisX: {
            title: "Tweets",
            reversed: true,
        },
        axisY: {
            title: "Number of views",
            labelFormatter: this.addSymbols,
            interval: 1
        },
        data: [{
            type: "bar",
            dataPoints: this.props.topTenTweetsByViews.dataPoints
        }]
    };

    return (
        <div>
            <CanvasJSChart options={options}/>
            <div className="container twitter-container">
                <div className="col-lg-7">
                    <ViewTweets dataFromParent={this.props.topTenTweetsByViews.tweets} isDisableButtons={true}/>
                </div>
            </div>
        </div>
    );
}

Search

I added the functionality of searching for my person or hashtag. The search was handled on the Node.js back end using Mongoose queries.