React Twitter Clone

Follow along with the youtube tutorial 🔴 Build a TWITTER Clone with REACT JS for Beginners and set up the firebase app.

The clone is limited to the simple messaging app.

What I have learned?

• Getting started with ReactJs
• Component oriented conception
• Twitter API integration React-twitter-embed to include tweet feed
• React modules
• CSS BEM convention (check http://getbem.com/naming/)
• Integration of Firebase for database and hosting (firestore=realtime Firestore database to store comments)
• Integration of Material ui (https://material-ui.com/)

Steps

Create react app sample and start the app

npx create-react-app twitter-clone
cd twitter-clone
npm start

Components

• App
• • Sidebar
• • • SidebarOption
• • Feed
• • • TweetBox
• • • Post
• • Widgets

React modules

• Install twitter features such as TwitterTimelineEmbed, TwitterShareButton, TwitterTweetEmbed with npm i react-twitter-embed

• install flip-move for a smooth animation when tweet with npm i react-flip-move

Deployment

• Install Firebase for backend with npm i firebase

• Log in the app with firebase firebase login

• Deploy firebase with following command in console

firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? Use an existing project
? twitter-clone-4fb96 (twitter-clone)
? What do you want to use as your public directory? build
? Configure as a single-page app ? Yes

• Clean and create the version to deploy with npm run build
• After any update, run the command again and deploy with firebase deploy

Link

• Live
• GitHub