Travel Journal (React Solo Project Solution)

This is my solution to the React Travel Journal Solo Project on Scrimba. The solo projects are part of the Scrimba Platform's Courses.

The challenge

• Data array in a seperate .js file
  • Title
  • Location
  • Google Maps
  • Start Date
  • End Date
  • Description
  • Image URL
• Create a card component for each card
• Pass props to each component
• Style and polish the app as in the Figma design

Screenshot

Links

• Live Solution 2021
• Live Solution 2022
• Source Code

My Process

Built with

• HTML
• CSS
• JavaScript
• React18
• Vite

What I learned

I learned and practiced the following concepts:

• React Props
• Conditional Rendering
• Rendering a collection of elements with Array.map() method

A snippet of the code I used

import Card from "./Card";
import journalData from "../journalData";

function Cards() {
	return (
		<main className="container">
			{journalData.map((dataEntry) => {
				return <Card key={dataEntry.id} {...dataEntry} />;
			})}
		</main>
	);
}

export default Cards;

Author

• Github - @ZaidMarrie
• Twitter - @LeKoels27

Contributing

Pull requests are very welcome and you may freely fork this repository.

Supporting Scrimba

Since 2017, scrimba has created over 20 free courses and continue's launching free courses. If you perhaps are interested in learning or maybe just would like to up your skills try out their courses at scrimba.com.

• Become a professional React developer
• The Responsive Web Design Bootcamp
• The Ultimate JavaScript Bootcamp

Happy Coding!

License

MIT