List of countries built with ReactJS

• The code in this program describes how to fetch data with Axios, map the data and filter out the relevant data needed.
  • The home page displays the map of the world countries.

---

About the list of the country

• User can read more about each country
  • The about page displays the information of what users can see when they click on the countries button.

---

List of countries

• Each card displays each country's name, capital, population, currencies, region, and country borders.

---

There are two search options to fetch any desired country

• First by type the name of country and
• Second by selection option.

---

Result

• After the selection option, the selected country is displayed with detailed information as a card.
  • • When the user clicks on getting weather, it navigates to a page where the user can few the present weather condition of that country.

---

Single country details

• When the user clicks on each country card, it displays the weather condition of the capital.
  • Here users can see the current weather, humidity, and cloudy condition of the selected country. By clicking on the back to countries list link, it navigates to the list of countries.

---

Form application built with ReactJS program to post information to database

Form Application format

• Users can send a message through the contact form to get more information if needed.

---

Cloud Firestore database before post information

---

Filled form before send to database

• Filled information will go directly to the database when the user clicks on submit button.

---

Result from React program into database

---