{"id":19543215,"url":"https://github.com/codewithalamin/space-tourism-website","last_synced_at":"2025-04-26T17:32:10.063Z","repository":{"id":207933096,"uuid":"718105435","full_name":"CodeWithAlamin/Space-Tourism-website","owner":"CodeWithAlamin","description":"Multi-page website - explore destinations, meet the crew, and dive into technologies | Space tourism multi-page website solution.","archived":false,"fork":false,"pushed_at":"2023-11-18T18:42:36.000Z","size":2340,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-30T10:38:30.506Z","etag":null,"topics":["frontend-app","frontend-mentor","frontendmentor-challenge","reactjs"],"latest_commit_sha":null,"homepage":"https://space-tourism-codepapa.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-13T11:48:01.000Z","updated_at":"2024-08-20T18:04:20.000Z","dependencies_parsed_at":"2024-10-30T10:51:07.206Z","dependency_job_id":null,"html_url":"https://github.com/CodeWithAlamin/Space-Tourism-website","commit_stats":null,"previous_names":["codepapa360/space-tourism-website","codewithalamin/space-tourism-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FSpace-Tourism-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FSpace-Tourism-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FSpace-Tourism-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FSpace-Tourism-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Space-Tourism-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224040738,"owners_count":17245801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-app","frontend-mentor","frontendmentor-challenge","reactjs"],"created_at":"2024-11-11T03:18:00.639Z","updated_at":"2024-11-11T03:18:01.755Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003c!-- \u003cimg src=\"./public/images/favicon-32x32.png\" alt=\"logo\" width=\"30\" height=\"auto\"\u003e --\u003e\n  \u003cimg src=\"./public/images/shared/logo.svg\" alt=\"logo\" width=\"40\" height=\"auto\"\u003e\n\n  \u003ch2\u003eSpace Tourism\u003c/h2\u003e\n\n  \u003ch3\u003e\n    \u003ca href=\"https://space-tourism-alamin.vercel.app\"\u003e\n      \u003cstrong\u003eView Demo\u003c/strong\u003e\n    \u003c/a\u003e \n    || \n    \u003ca href=\"https://www.frontendmentor.io/solutions/space-tourism-website-w-reactjs-GbYaAoC2Nc\"\u003e\n      \u003cstrong\u003eFrontend Mentor\u003c/strong\u003e\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/CodeWithAlamin/Space-Tourism-website/issues\"\u003eReport Bug\u003c/a\u003e\n    •\n    \u003ca href=\"https://github.com/CodeWithAlamin/Space-Tourism-website/pulls\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003chr\u003e\n\n\u003c/div\u003e\n\n\u003c!-- Badges --\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003c!-- Status --\u003e\n\u003cimg src=\"https://img.shields.io/badge/Status-Completed-success?style=flat\" alt=\"Status\" /\u003e\n\n\u003c!-- Liceensee --\u003e\n\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue?style=flat\" alt=\"License\" /\u003e\n\n\u003ca href='https://www.twitter.com/CodeWithAlamin' target=\"_blank\"\u003e\u003cimg alt='Twitter' src='https://img.shields.io/badge/@CodeWithAlamin-100000?style=for-the-badge\u0026logo=Twitter\u0026logoColor=00C9F7\u0026labelColor=3F3F3F\u0026color=0092FA'/\u003e\u003c/a\u003e\n\u003ca href='https://www.linkedin.com/in/CodeWithAlamin' target=\"_blank\"\u003e\u003cimg alt='LinkedIn' src='https://img.shields.io/badge/@CodeWithAlamin-100000?style=for-the-badge\u0026logo=LinkedIn\u0026logoColor=00a0dc\u0026labelColor=2F2F2F\u0026color=0077b5'/\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003c!-- Brief --\u003e\n\u003cp align=\"center\"\u003e\nA multi-page space tourism website — discover destinations, meet the crew, and delve into technology. 🚀🌌\n\u003c/p\u003e\n\n\u003c!-- Screenshot --\u003e\n\u003ca align=\"center\" href=\"https://space-tourism-alamin.vercel.app\"\u003e\n\n![Screenshot](./public/thumbnail-preview.jpg)\n\n\u003c/a\u003e\n\n## Table of contents📚\n\n- [Key Features](#key-features)\n- [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n- [Installation](#installation)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n- [License](#license)\n\n## Key Features🎉\n\nUsers should be able to:\n\n- View each page and be able to toggle between the tabs to see new information\n- View the optimal layout for each of the website's pages depending on their device's screen size\n- See hover states for all interactive elements on the page\n\n## Links\n\n- View Demo - https://space-tourism-alamin.vercel.app\n- Solution page - [https://www.frontendmentor.io/solutions/...](https://www.frontendmentor.io/solutions/space-tourism-website-w-reactjs-GbYaAoC2Nc)\n\n## My process🛠️\n\n### Tech Stack🏗️\n\n- React\n- React router\n- Styled components\n- Vite\n\n### What I Learned💡\n\nDuring 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:\n\n#### Dynamic Backgrounds with React Router and Styled Components\n\nOne 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:\n\n```css\nconst StyledAppLayout = styled.div.withConfig({\n  shouldForwardProp: (prop) =\u003e \"pageLocation\" !== prop,\n})`\n  background-image: ${(props) =\u003e\n    `url(\"/images/${props.pageLocation}/background-${props.pageLocation}-mobile.jpg\")`};\n\n  @media screen and (min-width: 768px) {\n    background-image: ${(props) =\u003e\n      `url(\"/images/${props.pageLocation}/background-${props.pageLocation}-tablet.jpg\")`};\n  }\n\n  @media screen and (min-width: 1024px) {\n    background-image: ${(props) =\u003e\n      `url(\"/images/${props.pageLocation}/background-${props.pageLocation}-desktop.jpg\")`};\n  }\n\n  // Additional styles...\n`;\n```\n\nI 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.\n\n#### React Router and Conditional Redirects\n\nImplementing 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:\n\n```jsx\nfunction CrewContents() {\n  const crews = jsonData.crew;\n  const { name: crewName } = useParams();\n  const activeName = crewName || crews[0].name;\n  const currentCrew = crews.find((crew) =\u003e crew.name === activeName);\n\n  // Redirect to the first crew member if no specific crew is selected\n  if (!crewName) {\n    return \u003cNavigate to={`/crew/${crews[0].name}`} replace /\u003e;\n  }\n\n  // Redirect to a 404 page if the specified crew member is not found\n  if (!currentCrew) {\n    return \u003cNotFound /\u003e;\n  }\n\n  // Rest of the component rendering\n  return (\n    // ...\n  );\n}\n```\n\nIn 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.\n\nThis approach ensures a seamless user experience, providing default navigation when needed and gracefully handling scenarios where a crew member is not found.\n\n## Installation📥\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Space-Tourism-website.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Live server:\n\n```sh\nnpm run dev\n```\n\n## Author👤\n\n\u003cb\u003eAlamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Star this project🌟\n\nShow your appreciation by starring this project on GitHub.🙂 Your support will motivate me to continue creating and sharing valuable open-source projects\n\n## Acknowledgments🙏\n\nI 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.\n\n## License📜\n\nThis project is licensed under the [MIT](./LICENSE.md) License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fspace-tourism-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Fspace-tourism-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fspace-tourism-website/lists"}