Share this
Twitter Shield
← Back to blog

Tooling of future - Web, Android and iOS fake twitter feed frontend in 130 lines of code

March 12, 2019

Frontend tools have evolved recently. We started from React,Angular,Vue,Webpack and now we have tool for almost everything. Today I want to show you how to create fake twitter feed using those tools:

Although preparing tools is always an issue I won’t write here full how-to. I will show you the way to fastest prototyping possible nowadays. The ideay is simple we have a feed of messages and as a front-end developer given graphql schema you need to create a frontend for the feed.

GraphQL

We start with the GraphQL as a Source of Truth. I am a huge fan of GraphQL and graphsourcing. However most of GraphQL frameworks are resolver first, I think it is a huge mistake, which makes usage of GraphQL redundant.

Go to the GraphQL Editor and try to click out or write the schema presented here.

graph

The graphql code of the following graph looks like this:

graphqlSchema

777- Remember this number please.

This is our Source of truth. As you can see here from this graph even not a developer person can understand whats going on. We have Twits Query where all the twits are returned and we can query ourself - not much, but enough.

Mock backend

Now we need to create mock backend. Just Click GraphiQL Faker in the top left corner of graphql editor. It should move you to the page using GraphiQL to test your queries filled with mock data. If you can’t find the button, here you are: https://faker.graphqleditor.com/showcase/fake-twitter/graphql

Get Author of Each tweet, content, and people retweeting it.

faker

Autocomplete TypeScript Library

Go to https://nightly.graphqleditor.com/showcase/fake-twitter and click Autocomplete .ts library to download generated autocompletions for graphql endpoint.

autocomplete

ReactXP

Now as we have our mock backend up and running. We should create some frontend. I promised it should work on Web iOS and android, so:

Install ReactXP with create-rx-app

npm install create-rx-app -g
create-rx-app FakeTwitter

Change the App.tsx code to this

type AppState = {
  twitts: State<Twit>[];
};

const Retweet = () => (
  <RX.Image
    style={_styles.icon}
    source={"https://img.icons8.com/ios/50/000000/retweet-filled.png"}
  />
);

const Love = () => (
  <RX.Image
    style={_styles.icon}
    source={"https://img.icons8.com/ios/50/000000/hearts.png"}
  />
);
export class App extends RX.Component<{}, AppState> {
  state: AppState = {
    twitts: []
  };
  componentDidMount() {
    Api("https://faker.graphqleditor.com/showcase/fake-twitter/graphql")
      .Query.Twits()({
        Author: {
          avatar: true,
          username: true
        },
        likes: {
          avatar: true,
          username: true
        },
        retweets: {
          avatar: true,
          username: true
        },
        sentence: true
      })
      .then(response =>
        this.setState({
          twitts: response
        })
      );
  }
  public render() {
    return (
      <RX.View style={_styles.twitts}>
        {this.state.twitts.map(t => (
          <RX.View style={_styles.twitt} key={t.sentence}>
            <RX.View>
              <RX.Image style={_styles.avatar} source={t.Author.avatar} />
            </RX.View>
            <RX.View style={_styles.text}>
              <RX.View style={_styles.topline}>
                <RX.Text style={_styles.username}>{t.Author.username}</RX.Text>
                <RX.Text style={_styles.acc}>{`@${t.Author.username}`}</RX.Text>
              </RX.View>
              <RX.Text style={_styles.sentence}>{t.sentence}</RX.Text>
              <RX.View style={_styles.actions}>
                <RX.Text>{t.retweets.length}</RX.Text>
                <Retweet />
                <RX.Text>{t.likes.length}</RX.Text>
                <Love />
              </RX.View>
            </RX.View>
          </RX.View>
        ))}
      </RX.View>
    );
  }
}

Whole project is available here:

Amazing

Remember the 777 number? Now go back to that point. This is what we want to achieve by the end of this year - generate fully working application with backend using schema only. We will introduce another set of graphsourcing tools soon which will allow to build cloud functionalities.

Thank you for your reading.

Hey, have a minute?

Do you want to try our mock backend from GraphQL app. It is in beta phase and 100% free.

Try visual editor app

Artur Czemiel
Written by Artur Czemiel GraphQL passionate. Code generation guru. Short code lover. Father. CTO. CEO. email me:[email protected]Twitter Shield
← Back to blog