Twitter clone using appbaseio/reactivesearch components.

Blog.md

Twitterreact app is a twitter clone where users can add tweet and follow other user.

About App

At first the global tweets is displayed on login page. The user can logged in with his username and move on to the dashboard. On dashboard, the user can toggle between Global Feed and Personal Feed. The user can add new tweet from here. He can also go to the profile page of other users that being displayed on the dashboard. The profile page displays the list of following/followers of the user. Their is an option to Follow user. Alongwith the above features the user can also tweets or users via the search bar given in the navigation bar.

Using ReactiveSearch

This app is made using ReactiveSearch component of appbase.io like

• ReactiveBase
• DataController
• ReactiveList
• ToggleButton

importing the components as:

import {
	ReactiveBase,
	ReactiveList,
	DataController
} from "@appbaseio/reactivesearch";

ReactiveBase

ReactiveBase component is used to connect the UI view with the data. The data source is an appbase.io app.

<ReactiveBase
	app={config.credential_users.app}
	credentials={`${config.credential_tweets.username}:${config.credential_tweets.password}`}
	type={config.credential_users.type}
>
...
</ReactiveBase>
					

• app: appname that is connected with UI view.(here Twitter)
• credentials:app credentials to read/write. format “username:password”
• type: defines which types should the queries run on.

DataController

DataController is UI optional filter. Here, it is used to filter results using query which is not controlled by any viewing component.

<DataController
	componentId="GlobalTweet"
	customQuery={props.CustomQueryT}
	showUI={false}
/>

• customquery: to update DB query

ToggleButton

ToggleButton sensor component creates a toggle button UI widget. It is used for filtering results based on a fixed set of toggleable options like here for example toggling between Global Feed and Personal Feed.

<ToggleButton
	componentId="UserTweet"
	appbaseField="by"
	multiSelect={false}
	data={[defines which types should the queries run on.
	{
		label: "Global",
		value: ""
	},
	{
		label: "Personal",
		value: props.user
	}
	]}
	customQuery={props.CustomQueryT}
	defaultSelected={["Global"]}
	/>

• customquery: to update DB query
• appbaseField: DB data field ( here by) is mapped with the component's UI view.
• data: an object array of kv pairs. label is displayed in the UI and value is the corresponding actual field value in the database.

ReactiveList

A ReactiveList is an actuator component that creates a result list UI widget where results from all the applied filters(like DataController and ToggleButton here) are shown. Here, ReactiveList is used to show result list of tweets and user list.

<ReactiveList
	title="Tweets"
	componentId="TweetsActuator"
	appbaseField="msg"
	from={config.ReactiveList.from}
	size={config.ReactiveList.size}
	stream={true}
	requestOnScroll={true}
	onData={onDataTweets}
	sortOptions={config.tweetsSortOptions}
	react={{
		and: props.reactOn
	}}
	showResultStats={false}
/>

• customquery: to update DB query
• appbaseField: DB data field ( here by) is mapped with the component's UI view.
• sortOptions: creates a sorting view in the ReactiveList component’s UI. Each array element is an object that takes three keys: label, appbaseField, sortBy

Screenshots of UI with components of appbase used as: Login Page

Dashboard Page

Profile Page

Code snippet of using this components:

You could see the app here at -> https://appbaseio-apps.github.io/twitterreact/