https://github.com/contawo/travel-journal
This is a travel journal application for storing all the places that you have visited. I was learning by doing react when creating this project. I learnt a lot with it and upgraded my reactjs skills.
https://github.com/contawo/travel-journal
data learning-by-doing props reactjs
Last synced: about 2 months ago
JSON representation
This is a travel journal application for storing all the places that you have visited. I was learning by doing react when creating this project. I learnt a lot with it and upgraded my reactjs skills.
- Host: GitHub
- URL: https://github.com/contawo/travel-journal
- Owner: contawo
- Created: 2022-05-30T00:45:59.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-30T16:41:57.000Z (about 4 years ago)
- Last Synced: 2025-03-02T03:28:41.752Z (over 1 year ago)
- Topics: data, learning-by-doing, props, reactjs
- Language: JavaScript
- Homepage: https://contawo-travel-journal.vercel.app/
- Size: 9.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Travel Journal
- Created this site for storing all the experiences on has from exploring the world
- Used React JS props to display the data
- Created my own data on a JS file, that contains all the content displayed in the site
### Here is how the data looks like:
```javascript
const data = [
{
title: "Mount Fuji",
location: "Japan",
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
startDate: "12 Jan, 2021",
endDate: "24 Jan, 2021",
description: "Mount Fuji is the tallest mountain in Japan, standing at 3,776 meters (12,380 feet). Mount Fuji is the single most popular tourist site in Japan, for both Japanese and foreign tourists.",
imageUrl: "./images/mount-fuji.jpg"
}]
```
## Feature
- A quote generator made possble with the Fetch API
- Another alternative is using the Axios API to fetch the data
- I understand the fetch API better
## Lessons learnt
- Sending requests to API
- Converting the response to JSON file and accessing it to your site
- Using React hooks like:
```javascript
const [hook, setHook] = React.useState; // use to change states
useEffect(() => { // Runs first before everything
// Some code
}, [])
```