DEV Community 👩‍💻👨‍💻

Lisa Jung
Lisa Jung

Posted on

Part 1: What are we building and learning about in season 2?

Table of Content | Read Next: Part 2 - Build a server using Node.js with Express

Resources

Would you rather watch a video to learn this content? Click on the link below!

Do you want access to the GitHub repo that contains the code covered in this series?

What are we building?

We will be building an Earthquake Watch app that enables the users to search for earthquakes.
Image description

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)

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

Image description

App Architecture

The following diagram illustrates our app architecture:

Image description

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)

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

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)

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

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

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

Move on to Part 2 to build a server using Node.js with Express!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈