Part 1: What are we building and learning about in season 2?
Tags: elasticsearch, kibana, node, react
Published: 2022-09-07 15:14:10

[Table of Content](https://dev.to/lisahjung/beginners-guide-to-building-a-full-stack-app-nodejs-react-with-elasticsearch-5347) | [Read Next: Part 2 - Build a server using Node.js with Express](https://dev.to/lisahjung/part-2-build-a-server-using-nodejs-with-express-52a0)

### Resources
*Would you rather watch a video to learn this content? Click on the link below!*
- [Episode 1: What's in store for season 2?](https://www.youtube.com/watch?v=tViR2tehjaA)

*Do you want access to the GitHub repo that contains the code covered in this series?*
- [GitHub repo for season 2](https://github.com/LisaHJung/beginners-guide-to-creating-a-full-stack-Javascript-app-with-Elasticsearch/tree/main)

### What are we building? 
We will be building an Earthquake Watch app that enables the users to search for earthquakes.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfpftbl06tb8aohbfdm2.png)
    
By specifying the quake type, magnitude, location, and date range, the user can retrieve earthquakes that match the user input. The search results could be also sorted by ascending or descending order of magnitude. 

![ezgif com-gif-maker (5)](https://user-images.githubusercontent.com/60980933/169545964-9c84ea5f-94f7-47cb-9ba8-64b5973a0b6a.gif)

Upon sending the request, the results are displayed in the form of cards containing detailed information about each earthquake. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/518nqvd380gv6fzk0uhx.png)
 
### App Architecture
The following diagram illustrates our app architecture: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dscw3y5uz8ab8kdcwmk0.png)
 
We will build a full stack web app using Node.js with Express(server) and React(client). Next, we will connect Elastic Cloud to the server. 

#### Data Ingestion
Elastic Cloud hosts Elastic products including Elasticsearch and Kibana.

Once the server is connected to Elastic Cloud, we will  ingest data into Elasticsearch hosted on Elastic Cloud.  

We will be ingesting global earthquake data from the USGS API.

The server will be in charge of fetching the data from the USGS API. Upon fetching the data, the server will send the data to Elasticsearch. Elasticsearch in turn will transform the data and ingest the data into an index. 

![ezgif com-gif-maker (9)](https://user-images.githubusercontent.com/60980933/184019969-c048b95f-1362-4367-9af8-40cfe65f5746.gif)

#### Set up the app for search
After data is ingested into Elasticsearch, we will set up our app for search!

The client will display a set of criteria a user can select to search for earthquakes.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cexfnjegq3al9qsz1pl7.png)

Once the user selects the criteria and clicks on the search button, the client will send the user input to the server. The server in turn will pass the user input into a Elasticsearch request and send the request to Elasticsearch. 

![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/60980933/161301742-6b2ca0a1-2c5b-43b6-b8bd-cdf16605f80f.gif)

Upon receiving the request, Elasticsearch will retrieve relevant results and send the results to the server. The server will send the results to the client which will display the results for the user. 

![ezgif com-gif-maker](https://user-images.githubusercontent.com/60980933/161300981-5ec91b21-2a79-48f4-aff5-0a0b362ad5d0.gif)

#### Data Visualization
Learning how to connect Elasticsearch to our app and searching for information is a great way to explore our data. 

In this series, we are going to explore our data even further by using Kibana to visualize earthquake data in Elasticsearch!  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqud4t1vf8kcjfl9y7y5.png)

We will learn how to create these visualizations using Kibana Lens!

Move on to [Part 2](https://dev.to/lisahjung/part-2-build-a-server-using-nodejs-with-express-52a0) to build a server using Node.js with Express!