Survey Website using ReactJS

Travel Blog Website using React

Last Updated : 24 Jul, 2024

Creating a Travel Blog Website using React JS is a better way to learn how to manage state, passing props and render data dynamically. In this article, we are going to learn how to create a Travel Blog Website using React JS. This website will have a list of places with images and description. The data is passed through the application with the help of JSON file. When you click on the location, it will redirect you to the google maps to see the complete description of that place.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites

Knowledge of React
HTML and CSS
Node and NPM/Yarn installed.

Approach

First we will create a data.js file which will store all the data of the travel places like location, images, description etc.
After that we will create header and footer for the website.
Now we will create the cards section which will display the travel places.
We will pass the data stored in the data.js file as props.
Now we will integrate all the components in the App.js file.
To style the app we will add the required style in the App.css file.

Steps to create React Application And Installing Module:

Step 1: Setting up the React Project

npx create-react-app travelblog

Step 2: After creating your project folder, move to it using the following command.

cd travelblog

Step 3: Create an image folder and store your custom images in the public folder.

Project Structure:

travelbloggfg

The updated dependencies in package.json file will look like

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "mdbreact": "^5.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Create and add the codes in the respective files.

CSS

/* App.css*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  
}

a {
  color: #d74180;
  font-size: 16px;
}

a:hover{
  color: #808080;
}

section {
  padding: 20px;
}

p {
  font-size: 16px;
}

h4, p {
  padding-bottom:5px;
  margin: 0;
}

.title {
  font-weight: 600;
}

.journal-header {
  background-color: #d74180;
  height: 130px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 20px 36px;
  color: white;
  margin-left: 40px;
  margin-right: 40px;
}

/* .material-symbols-outlined {
  font-variation-settings:
    'wght' 200,
    'GRAD' 20,
    'opsz' 24,
} */

.card-img {

  min-width: 300px;
  border-radius: 9px;
  margin-bottom: 15px;
  position: relative;
  padding-left: 10px;
  display: block;
}

.card-country {
  font-size: 18px;
  padding-right: 10px;
}

.card-country-title {
  font-size: 40px;
}

.card-date {
  font-size: 18px;
}

.card {
  /* align-items: center; */
  /* width: 175px; */
  display: flex;
  flex-direction: row;
  font-size: 12px;
  flex: 0 0 auto;
  position: relative;
  margin-top: 80px;
  margin-right: 15px;
  margin-left: 15px;
  
  
}

.column-left {
  flex: 40%;
  padding-right: 30px;
}

.column-right {
  flex: 40%;
}

.journal-footer {
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #5a595a;
  height: 130px;

  display: flex;
  color: white;
  clear: both;
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer-caption {
  padding-left: 5px;
}

/* For mobile phones: */
[class*=&quot;card-&quot;] {
  width: 100%;
  flex-direction: column;

}

/* media queries */
@media (max-width: 400px) {
  .card {
    background-color: #de3163;
  }
}

JavaScript

//App.js

import Header from './components/Header.js'
import Cards from './components/Cards.js'
import { data } from './data.js'
import Footer from './components/Footer.js'
import './App.css'

function App() {
	const mappedData = data.map((item) => {
		return (
			<Cards key={item.id} item={item} />
		)
	})
	return (
		<div className="App">
			<Header />
			{mappedData}
			<Footer />
		</div>
	);
}

export default App;

JavaScript

//Cards.js

import React from 'react';


export default function Cards(props) {
	return (
		<div className='card'>
			<section className='column-left'>
				<img className="card-img" src="./images/coverImg" alt="images" />
			</section>
			<section className='column-right'>
				<span className='material-symbols-outlined'>location_on</span>
				<span className="card-country">{props.item.country} </span>
				<a href={props.item.googleMapLink}>View on Google Maps</a>
				<h3 className="card-country-title">{props.item.title}</h3>
				<h4 className="card-date">{props.item.date}</h4>
				<p>{props.item.description}</p>
				<span>Read more..</span>
			</section>

		</div>
	)
}

JavaScript

//Header.js

import React from "react";

export default function Header() {
	return (
		<div>
			<header className="journal-header">
				<h1 className="title">my travel journal</h1>
			</header>
		</div>
	)
}

JavaScript

//Footer.js

import React from 'react';

export default function Footer() {
	return (
		<div className='journal-footer'>
			<caption>Ingrid G. 2023 |</caption>
			<caption className='footer-caption'> Favicon by: </caption>
		</div>
	)
};

JavaScript

//data.js

export const data = [
	{
		id: 1,
		date: "May 2018",
		title: "Panajachel, Lake Atitlán",
		description: 
"The busiest and most built-up lakeside town, Panajachel ('Pana') is the gateway to Lago de Atitlán for most travelers.",
		coverImg: "atitlan.jpeg",
		country: "GUATEMALA",
		googleMapLink: 
"https://www.google.com/maps/place/Lake+Atitl%C3%A1n/@14.6788007,-91.2837663,12z/data=!3m1!4b1!4m6!3m5!1s0x85894ac7c083b493:0xa6e33f7d6b54910!8m2!3d14.6906713!4d-91.2025207!16zL20vMDN3NXpy?entry=ttu",
	},
	{
		id: 2,
		date: "December 2019",
		title: "Secret Beach",
		description: 
"Experience the beautiful landscape and meet new friends all while enjoying pristine warm waves of the Atlantic.",
		coverImg: "belize.jpeg",
		country: "BELIZE",
		googleMapLink: 
"https://www.google.com/maps/search/belize+secret+beach/@18.0171292,-87.9672513,13z/data=!3m1!4b1?entry=ttu",
	}
]

To run the app run the following command in the terminal

npm start

Output:

Survey Website using ReactJS

milindgupta578

News

Improve

Article Tags :

Similar Reads

Travel Blog Website using React

Creating a Travel Blog Website using React JS is a better way to learn how to manage state, passing props and render data dynamically. In this article, we are going to learn how to create a Travel Blog Website using React JS. This website will have a list of places with images and description. The d

Survey Website using ReactJS

In this article, we will create a survey website template using ReactJS. This project basically creates a single page website which will take input from user in multiple states and stores it to be displayed later. The user has to enter basic details like name, email-Id and contact number. After fill

Portfolio Website using React

Portfolio Website using React is an online representation of the talent and skills one possesses, along with details of past work and contact information. it is very important for any professional. Table of Content Preview of Portfolio Website using ReactApproach to Create Portfolio Website using Re

Photography Website using React

In this project, we're going to design an impressive photography website using React. The website will include a beautiful navbar, an introductory section with both an image and text, a photo gallery with a dynamic grid layout, and a modal to showcase selected photos in detail. Additionally, we'll i

India Tourism Webite using React

This article guides you through building an engaging Indian tourism app using React, featuring destination exploration, travel experiences, and a visually appealing image carousel. Users can interact with the app and contact through a form, highlighting the beauty of India. Preview of final output:

Create Web Browser using React-Native

In this article, we will build the Web Browser using the React Native language. In this application, there will be as search bar with the button. The uer can enter the search text or the URL and click on the button, the browser will take to the desired result. Also there are morre naivtional buttons

Create an Agency Website using React and Tailwind

An agency website using React and Tailwind consists of basic components such as a home page, services, contact us, features, etc. It also has a contact form that will enable the user to contact if any issue arises on the website or the benefits to be availed by the user through the website. Preview

How To Create A Multi-Page Website Using ReactJS?

Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router. In this

Create Tour and Travels website template using React-Native

The tour and travel app template with React Native offers a user-friendly interface with various options required in any travel app. In this article, we will create a basic Tour and Travels website template using React Native. Preview of final output: Let us have a look at how the final output will

Create a Restaurant Website Template using React-Native

The restaurant template app helps customers to explore, choose, and order their preferred dishes from restaurants. In this article, we will create a Tour and Travels website template using React Native. Preview of final output: Let us have a look at how the final output will look like. Prerequisite: