Space Tourism Website

This is a solution to the Space tourism website challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• 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 each page and be able to toggle between the tabs to see new information

My process

1. Set up a new React project using vite or your preferrd method.
2. Install the react-router-dom library using npm install react-router-dom.
3. Structure the project accordingly with the figma design and create each related page.
4. Create a new component called App.js and import the necessary libraries and components, including BrowserRouter, Route, Routes, Navigate, Home, Destination, Technology, Crew, Navbar, Sidebar and others.
5. Define the state for the sidebar using the useState hook, and create a function to toggle the state of the sidebar in Mobile view.
6. Create the layout for the application, including the navigation bar and sidebar, and use the Route and Routes components to define the different routes for the application.
7. Create the individual pages for the application, including Home, Destination, Technology, and Crew, and import them into the App.js component.
8. Use Sass to style the pages and media queries for different devices compatibility.
9. Test the application to ensure that the routing and styling are working as expected.
10. Build the project using vite bundler.
11. Commit the code to a version control system, such as Git, and push it to a remote repository on Github.
12. Deploy the project with github action/ github pages or whatever is suited with the developer.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Sass
• React - JS library
• React-router
• vite - Vite is a local development server

Useful resources

• Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• React
• React-router

Author

• Github - Github
• Frontend Mentor - @amrmabdelazeem
• Portfolio - Portfolio

Acknowledgments

This goes our to Scrimba and Kevin Powell whom provided the figma designs to this project and have amazing impact over front-end developers all over the web.