A multi-page space tourism website — discover destinations, meet the crew, and delve into technology. 🚀🌌
Users should be able to:
- View each page and be able to toggle between the tabs to see new information
- View the optimal layout for each of the website's pages depending on their device's screen size
- See hover states for all interactive elements on the page
- View Demo - https://space-tourism-alamin.vercel.app
- Solution page - https://www.frontendmentor.io/solutions/...
- React
- React router
- Styled components
- Vite
During the development of the Space Tourism Website, I encountered several challenges and gained valuable insights into various aspects of web development. Here are some of the key learnings:
One of the challenges I faced was dynamically changing the background image based on the page the user navigates to. I wanted to provide a visually appealing experience by adjusting the background according to each page. Here's how I tackled this challenge:
const StyledAppLayout = styled.div.withConfig({
shouldForwardProp: (prop) => "pageLocation" !== prop,
})`
background-image: ${(props) =>
`url("/images/${props.pageLocation}/background-${props.pageLocation}-mobile.jpg")`};
@media screen and (min-width: 768px) {
background-image: ${(props) =>
`url("/images/${props.pageLocation}/background-${props.pageLocation}-tablet.jpg")`};
}
@media screen and (min-width: 1024px) {
background-image: ${(props) =>
`url("/images/${props.pageLocation}/background-${props.pageLocation}-desktop.jpg")`};
}
// Additional styles...
`;I utilized React Router's useLocation hook to get the current location, extracted the page name, and passed it as a prop to my styled component. Leveraging styled-components allowed me to dynamically set background images based on the page, creating a seamless transition between pages.
Implementing conditional redirects with React Router was crucial for ensuring a smooth user experience. For instance, when a user lands on the /crew route without specifying a particular crew member. To address this, I implemented conditional redirects using React Router. Here's a breakdown of the solution:
function CrewContents() {
const crews = jsonData.crew;
const { name: crewName } = useParams();
const activeName = crewName || crews[0].name;
const currentCrew = crews.find((crew) => crew.name === activeName);
// Redirect to the first crew member if no specific crew is selected
if (!crewName) {
return <Navigate to={`/crew/${crews[0].name}`} replace />;
}
// Redirect to a 404 page if the specified crew member is not found
if (!currentCrew) {
return <NotFound />;
}
// Rest of the component rendering
return (
// ...
);
}In this code snippet, I first check if crewName is not provided, and if so, I redirect the user to the first crew member's page. Additionally, if the specified crew member is not found in the dataset, a redirect to a custom NotFound page is implemented.
This approach ensures a seamless user experience, providing default navigation when needed and gracefully handling scenarios where a crew member is not found.
- Clone this repo:
git clone https://github.com/CodeWithAlamin/Space-Tourism-website.git- Install dependencies:
npm install- Build command:
npm run build- Live server:
npm run devAlamin
- Twitter - @CodeWithAlamin
- LinkedIn - @CodeWithAlamin
- Frontend Mentor - @CodeWithAlamin
- Github: @CodeWithAlamin
Feel free to contact me with any questions or feedback!
Show your appreciation by starring this project on GitHub.🙂 Your support will motivate me to continue creating and sharing valuable open-source projects
I would like to express my gratitude to Frontend Mentor for providing the challenge and inspiration to build this project. Their platform and resources have been instrumental in my learning journey and the development of this project.
This project is licensed under the MIT License - see the LICENSE file for details.