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.
The autocomplete widget, shown in figure 20.2, has the following: