Twitter Clone Part 1: Connecting Users to Stream Feeds and Creating a Tweet

• stream-js

  1 325 7.0 JavaScript

  JS / Browser Client - Build Activity Feeds & Streams with GetStream.io (by GetStream)

  

The next step is to connect the selected user from the start page to the Feeds App on your Stream dashboard. To connect a user to Stream, you first need to create an instance of your Stream app in your React application. To do this, you use the StreamClient constructor from the getstream library. After creating the instance, then you can connect the user to Stream. And with the StreamApp component from the React SDK, you can provide feed methods and data to other components.

• react-activity-feed

  3 135 1.3 TypeScript

  Stream React Activity Feed Components

  

react-activity-feed: built on the getstream library for providing React components to integrate activity feeds into your application.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• classnames

  94 17,349 8.3 JavaScript

  A simple javascript utility for conditionally joining classNames together

classnames: utility library for dynamically combining classes

• date-fns

  115 33,636 9.3 TypeScript

  ⏳ Modern JavaScript date utility library ⌛️

  

date-fns: for formatting dates in a readable manner

• nanoid

  83 23,140 8.3 JavaScript

  A tiny (124 bytes), secure, URL-friendly, unique string ID generator for JavaScript

nanoid: for generating unique IDs. You will use this to generate IDs for tweets

• react-twitter-clone

  2 23 0.0 JavaScript
  

A lot of icons are used throughout this project. I got the icons from remixicon and made them reusable React components. You can find all the icons in this archived file in the repo. Create a new folder src/components/Icons and save all the icons from the archive there.

• berry

  181 7,112 9.3 TypeScript

  📦🐈 Active development trunk for Yarn ⚒

  

To start building the clone, you need to install dependencies from the npm library. To install dependencies, you need to have Node installed on your system. Alternatively, you can use yarn, but I will be using npm in this article.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• RemixIcon

  14 6,255 7.4 Less

  Open source neutral style icon system

  

A lot of icons are used throughout this project. I got the icons from remixicon and made them reusable React components. You can find all the icons in this archived file in the repo. Create a new folder src/components/Icons and save all the icons from the archive there.

• react-router

  156 51,877 9.5 TypeScript

  Declarative routing for React

  

Next, you have to configure React Router to show the start page on the index path.

• Stream-Framework

  34 4,718 0.0 Python

  Stream Framework is a Python library, which allows you to build news feed, activity streams and notification systems using Cassandra and/or Redis. The authors of Stream-Framework also provide a cloud service for feed technology:

const users = [ { id: 'iamdillion', name: 'Dillion', image: 'https://dillionmegida.com/img/deee.jpg', bio: 'Just here, doing my thing. Developer advocate at @getstream_io', token: 'ENTER TOKEN FOR iamdillion', }, { id: 'getstream_io', name: 'Stream', image: 'https://avatars.githubusercontent.com/u/8597527?s=200&v=4', bio: 'Deploy activity feeds and chat at scale with Stream – an API driven platform powering over a billion end users. Get started at http://getstream.io.', token: 'ENTER TOKEN FOR getstream_io', }, { id: 'jake', name: 'Jake', image: 'https://picsum.photos/300/300', bio: 'Just Jake, nothing much', token: 'ENTER TOKEN FOR jake', }, { id: 'joe', name: 'Joe', image: 'https://picsum.photos/200/200', bio: 'How are you?', token: 'ENTER TOKEN FOR joe', }, { id: 'mike', name: 'Mike', image: 'https://picsum.photos/400/400', bio: 'I am mike here. I do things on #react and #javascript', token: 'ENTER TOKEN FOR mike', }, ] export default users

• create-react-app

  575 101,853 1.5 JavaScript

  Set up a modern web app by running one command.

  

We will use create-react-app (CRA) to create the React application. On your terminal, run:

Suggest a related project