React 1 hw/week2/ aminata #51
Conversation
kiko-bkr
left a comment
kiko-bkr
left a comment
There was a problem hiding this comment.
Good start Aminata! There are some minor bugs that prevent your page from running properly (e.g. broken imports) but apart from that the code you wrote works well! You sitll need to update the image handling, and implement one extra functionality, but apart from that it looks good!
| const teamMembers = [ | ||
| { name: "captain Sarah Vegara", role: "A former NASA astronaut with over 15 years of experience, Captain Vega leads our missions with unparalleled expertise and a passion for space exploration.", image: "/crew/alice.jpg" }, | ||
| { name: "Dr Leo Redding ", role: "Our chief astrophysicist, Dr. Redding, is a renowned scientist who has contributed to major space discoveries. He ensures that every journey is as educational as it is exhilarating.", image: "/crew/bob.jpg" }, | ||
| { name: "Chief Engineer Harah Lee ", role: "With her extensive background in aerospace engineering, Hana Lee is responsible for the state-of-the-art technology that powers our spacecraft. Her innovation ensures that our travelers are always in safe hands.", image: "/crew/charlie.jpg" }, | ||
| { name: "Mission specialist Alex Santos ", role: "We collaborate with some of the most respected names in the space and technology industries to make every journey extraordinary. Our partners bring expertise, innovation, and cutting-edge advancements that enhance our space travel experiences.", image: "/crew/diana.jpg" }, | ||
| { name: "Pr Aminata Ba", role: "Aminata brings a unique blend of technical skills and customer service experience to the team. She’s always ready to assist with any needs and to make sure every traveler has an unforgettable experience.", image: "/crew/aminata.jpg" }, | ||
| ]; |
There was a problem hiding this comment.
Here the image properties should be set to the actual pictures that were in the public/crew directory in the original template. It is confusing that the names do not match, but you should still use those pictures.
In order to display a picture in NextJS, you need to add them in the public folder, and then use the path from that folder. Here is a guide.
| <div className="carousel-container"> | ||
| <p>🌌 WE ARE GALACTICA:</p> | ||
| <p>Our crew is the heart and soul of Galactica. We are a diverse team of seasoned space explorers, engineers, and visionaries who are united by a common goal: to make space travel accessible and exciting for all.</p> | ||
| <div className="carousel"> |
There was a problem hiding this comment.
Interesting choice with the carousel here! 👍
There was a problem hiding this comment.
The images for the partner companies are in the public/business_partners folder of the template. No need to add new ones.
| <p> OUR PARTNERS </p> | ||
| <p>We collaborate with some of the most respected names in the space and technology industries to make every journey extraordinary. Our partners bring expertise, innovation, and cutting-edge advancements that enhance our space travel experiences.</p> | ||
| <div className="partners"> | ||
| <img src="/.partner1.svg.avif" alt="Partner 1" /> |
There was a problem hiding this comment.
You meant to write ./ here. Regardless, in NextJs the images should not be next to the files that use them, instead they should be in the public directory.
| import OurPartners from './OurPartners'; | ||
| import footer from './ui/footer.js'; |
There was a problem hiding this comment.
| import OurPartners from './OurPartners'; | |
| import footer from './ui/footer.js'; | |
| import OurPartners from './partners.js'; |
Broken imports.
| import { useState } from "react"; | ||
| import styles from "@/components/destination/destination.module.css"; | ||
| import { AddWishlistItem } from "@/components/destination/AddWishlistItem"; | ||
| import PlanetWishlistItem from "@/components/destination/PlanetWishlistItem"; |
There was a problem hiding this comment.
| import PlanetWishlistItem from "@/components/destination/PlanetWishlistItem"; | |
| import PlanetWishlistItem from "./planetsWish.js"; |
Broken import.
| {/* TASK - React 1 week 3 */} | ||
| {/* Import the AddWishlistItem react component */} | ||
| {/* <AddWishlistItem /> */} |
| // Read "/app/nasa_collaboration/README.md" for more info about the API_KEY | ||
| // You need a proper API_KEY for the requests to work | ||
| const API_KEY = 'API_KEY'; | ||
| const API_KEY = "API_KEY"; |
There was a problem hiding this comment.
Good job on not including your own API key! 😉 You should never do that.
| <RoverPhoto | ||
| key={photo.id} | ||
| src={photo.img_src} | ||
| date={photo.earth_date} | ||
| roverName={photo.rover.name} | ||
| /> |
There was a problem hiding this comment.
You should set the size of these pictures.
2 participants
A little late sorry. Week 2 and 3
thanks in advance !