Seeking

Adventure

PostgreSQL || Express || React || Node

Visit Seeking Adventure
GitHub

Seeking Adventure is a React App that helps the user find what could be their next adventure. The application seeks to accomplish this by guiding them through a set of questions that narrow down their possible options. First, the user selects the region, experience and weather they are most interested in. The application then uses these answers to provide a proposed city to explore.

Functionality

The following is a brief description of how the application works! Follow the steps below and find your next adventure.

Step #1

Select what region of the world you are most interested about.

Step #2

Select what type of experience you would like to have where you visit.

Step #3

Select a city from a set of options by reviewing their current weather.

Step #4

Review some of the different places that could visited in that selected city.

Further Steps

Once you have reviewed all this information, you have to make a decision. Do you choose to visit this city after knowing the weather and the places that you can explore or would you like to start from the begining?

Back to the top

ProjectStructure

The following is a brief explanation of the code that creates this app. The application is composed of a main component (App.js) that contains several methods that are then passed down to the rendering components. The database was created in PostgreSQL and connected to the front-end of the application. This database is used to provide the different options to the user.

Project Diagram

App.js

The App component contains all the functional aspects of this application. It is in this component where we will render all the different parts. In the App.js component, we create methods that helps us select the continents, experience and places from the database as well as create methods that extract information from the weather API. The render method is designed so components are only rendered when the previous step has been completed.

MapSelect.js

In the MapSelect.js component the user selects the region of the world where they would like to visit. They make their selection by choosing from a list of buttons that correspond to the different continents. When the user hovers over one of the options the SVG map’s region that matches the selection also changes color. The intention is for the user to know exactly where in the world that region is on. After the users make their region selection, the next component will render in the DOM.

Experience.js

Similar to the MapSelect.js component, in the Experience.js component the user selects what type of experience they would like to have in the region of the world they have previously selected. They can choose whether they would like to admire architecture, relax, have scenic views or explore historic spaces.

CitySelect.js

In the CitySelect.js component the previous selections are used to query the PostgreSQL database. The cities that match the selections are then shown in the DOM. The user is directed to see the current weather of each city by selecting it from a list. The Weather component, which pulls the weather information from the OpenWeatherMap API, is rendered within this component. After reviewing the current weather from each city, the user can select the city they are interested in.

Places.js

The Places.js component functions differently from the previous components. Instead of the user having to make a decision based on the different options that are being presented, the component just renders information. The city selection is used to query from the PostgreSQL database the description of the places that could be visited.

Database

This application has a back-end component that provides the information necessary to narrow down the user’s requests. We use this file to connect to our PostgreSQL database. The database contains columns that define the city names, the places where they can visit in those cities and the descriptions of those locations. As the user makes their decisions in the first few steps, the answers are used to query the database and provide the user with different options.