hmjatt / Travel-Journal-ReactJS

Creating a Travel Journal using ReactJS

Travel-Journal-ReactJS 🗾

Creating a Travel Journal using ReactJS

Live Preview

---

About ℹ️

A Travel Journal, created to practice ReactJS. It includes descriptions of places that I have visited along with some future adventures. Journal Entries contain Title, Location, Google Maps Link, Start Date, End Date, Description and Image.Journal Entries are created dynamically using the .map() method and props on the data.js file, which is an array of objects. While creating this project I learned about React Props, Creating Components from an Array, using Mapping Components, etc. After creating the project, it was deployed to github-pages 🐦 Feel free to reach me at Twitter 🌉

---

Technologies Used 💻

         

---

Includes the following features/components ⚙️

- NPM
- ReactJS
- Custom Components
- create-react-app
- Figma
- React Props
- Creating Components from an Array
- Mapping Components
- github-pages

---

Usage 🤓

cd travel-journal

npm install

npm start

---

Steps I followed to complete this project 🪜

1. Initialize Project 🎍

• Initailize the project using npx create-react-app travel-journal which will create a complete React App pre-configured and pre-installed with all the dependencies.
• Import Inter font from google fonts and apply it to App component.

2. Organize components 🗄️

• Create a components folder inside src directory.
• Create future custom components inside components folder.
• Create an images folder inside src directory and add images/logos inside it.

3. Clean directory🧹

• Delete unnecessary files and code from directory.

4. Navbar Component 🧩

• Create Navbar component and basic JSX elements for it.
• Add appropriate classNames to elements in Navbar component.
• Add globe.png image to Navbar component.
• Import Navbar component inside App component.
• Style Navbar and App component .

5. Card Component 🧩

• Create Card component and basic JSX elements for it.
• Add appropriate classNames to elements in Card component.
• Add photos to Card component.
• Import Card component inside App component.
• Add basic style to Card component.

6. Footer Component 🧩

• Create Footer component and basic JSX elements for it.
• Import Footer component inside App component.
• Style Footer component.

7. Map Experiences Data Into Components 🗺️

• Create a file called data.js, which contains an array of objects. It represents the data that will be used inside Card component.
• Import images for Card component.
• Use .map to iterate over array of objects inside data.js to create Card components.
• When we .map over array of objects in App component, Add key prop 🗝️ (key={item.id}) when passing props to Card components. This will get rid of this warning :

⚠️ react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
at Card (http://localhost:3000/main.5c1f9e47e1f13a06e783.hot-update.js:27:18)
at App

8. Make App Responsive 🎨

• Add flexbox style to .cards-list div and other necessary styles.
• Add a media query for max-width: 600px.
• App is responsive upto this point. 😃

9. Pass object as props(Option #1) 📟

• Pass entire object when we .map over array of objects in App component using item as key and array of objects as its value.
• Access the object that is passed as prop in Card component, where item is key and array of objects are its values.

10. Spread object as props(Option #2) 📼

• We can make use of {...item} Spread in Object Literals, which takes properties of our object and create a separate prop for each key in object. Value of props can be accessed using props.key syntax, where key is an actual key in data.js. This is an alternate to instead of creating our own prop called item to which we pass our entire object.Spread object as props(Option #2) 📼 is used in this project.

11. Prepare for Deployment 🪢

• Create total of 7 unique Card components(journal entries) inside .cards-list by updating data.js.
• Delete unnecessary files from directory and format code with Prettier.
• Test for Responsiveness and make changes if need be ✅.
• Add links to Live Preview and screenshots ✅.

12. Deploy 📤

• Use Official Documentation(link) to push project to GitHub Pages 🎆🎆🎆

---

Links to content that helped me with this project 🔗

1. The Odin Project

   • React Introduction
   • React State & Props

2. Figma Design

   • Travel Journal

3. Scrimba

   • Learn React

4. React Official Documentation

   • React Hello World Example
   • Introduction To JSX
   • Rendering Elements In React
   • Components and Props
   • Deployment to gh-pages

5. YouTube

   • ReactJS Basics Video Series From Academind
   • ReactJS Tutorial Video Series From Codevolution
   • React & Webpack 4 From Scratch - No CLI from Traversy Media
   • The introduction to React you've been missing - Kent C. Dodds(explains how React works under the hood)

6. FreeCodeCamp

   • React Props Cheatsheet(Article by Reed Barger)

7. MDN

   • Spread in Object Literals

8. Images

   • Jellyfish
   • Vermillion Lakes Viewpoint, Banff, Canada
   • Capilano Suspension Bridge, West Vancouver, Canada
   • Mount Fuji
   • Major's Hill Park, Ottawa, Ontario
   • Jasper
   • Sydney Opera House

---

Quote ✒️

“The science of operations, as derived from mathematics more especially, is a science of itself, and has its own abstract truth and value.”
— Ada Lovelace

🏯 🗻 🍁