Search⌘ K
AI Features
Home
Courses
Intermediate Redux with Redux Toolkit

Building Out the Initial Application UI

Explore how to build the initial user interface of the TweetFind Twitter search app. Learn to integrate Chakra UI components, set up the search input and button, add a header, and implement number of results options, laying the groundwork for further Redux Toolkit development.

We'll cover the following...

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 ...