Léo-Paul's Blog
⚙ React Twitter-clone

⚙ React Twitter-clone

Léo-Paul MARTIN's photo
Léo-Paul MARTIN
·

2 min read

React Twitter Clone

image.png

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

image.png

  • 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
ReactTwitter