Chapter 20. Project: Implementing autocomplete with Jest, Express, and MongoDB


This chapter covers

  • Project structure and Webpack configuration
  • Implementing the web server
  • Adding the browser script
  • Creating the server template
  • Implementing the autocomplete component

The goal of this project is first of all to combine many of the techniques you’ve learned throughout this book, such as component composition, states, form elements, and testing, as well as how to fetch data from an API server and store and how to implement a simple Express server and Universal React rendering. You’ve already done most of these things in the book, but repetition is the mother of learning—especially intermittent repetition!

In this chapter, you’ll build a well-rounded component and supply it with a back end. This little project is close to the sort of real-life projects you’ll most likely perform on the job.

In a nutshell, this project will guide you through building an autocomplete component that’s visually and functionally similar to the one in Slack (a popular messaging app) and Google (a popular search engine), as shown in figure 20.1. For simplicity’s sake, the widget will work with the names of rooms in a chat application.

Figure 20.1. In Slack, when you start typing, the widget offers matches.

The autocomplete widget, shown in figure 20.2, has the following:

20.1. Project structure and Webpack configuration

20.2. Implementing the web server

20.3. Adding the browser script

20.4. Creating the server template

20.5. Implementing the Autocomplete component

20.6. Putting it all together

20.7. Homework

20.8. Summary