Building Out the Initial Application UI

Introduction

After two sections that could probably put you to sleep, we are back to the fun part of the course. Let’s continue building out the UI for tweetfind.

In this section, we’re going to lay the foundation for the application UI. There isn’t any logic; only building out the user interface.

UI libraries

Since this is not a CSS course, I want to be effective by explaining what’s relevant. We’ll employ some libraries to make building the UI easy, so we can focus on the core logic of the application.

Chakra-UI has been my component library of choice for the past few months. It’s simple and modular. It’s perfect for our use case, and react-tweet-embed will save us the hassles of building a tweet component.

Here’s the high-level flow of the application:

• Receive search query from the input field.
• Fetch data from Twitter remote servers.
• Data received contains IDs. Pass the IDs on to react-tweet-embed to display the tweets.

Okay, let’s build tweetfind.

Once you have the libraries installed, let’s integrate them into the application.

Chakra requires a bit of setting up. For Chakra UI to work correctly, you need to set up the ChakraProvider at the root of your application.

In the root index.js file, import and render the ChakraProvider component as seen below:

// index.js
...
import { ChakraProvider } from "@chakra-ui/react";

const render = () => {
  const App = require("./App").default;

  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        {/* Look here 👇*/}
        <ChakraProvider>
          <App />
        </ChakraProvider>
      </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );
};
...

Now, let’s update Finder.js to spit out more than just the boring “Hi” text.

// features/finder/Finder.js

// before 
import React from "react";

export function Finder() {
  return <div>Hi</div>;
}


// now 
import { Flex, Input, IconButton } from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";

export function Finder() {
  return (
    <>
      <Flex alignItems="center">
        <Input
          placeholder="enter a theme or hashtag to search"
          size="lg"
          mr={3}
        />
        <IconButton
          colorScheme="blue"
          aria-label="Search Twitter"
          icon={<SearchIcon />}
        />
      </Flex>
    </>
  );
}

The chakra-ui components are so well named that you can read through the code block above and get a clear sense of how the UI is composed.

This gives us the search field and button, but it doesn’t look excellent yet: