https://github.com/amrmabdelazeem/space-tourism-website-main

Dive into the future of space travel with our Space Tourism Multipage Website project. Experience sleek design and captivating content that fuel your curiosity about interstellar adventures. Whether you're a seasoned enthusiast or new to space exploration, this immersive website is your gateway to the cosmos.
https://github.com/amrmabdelazeem/space-tourism-website-main

html-css-javascript node-sass react-hooks react-router reactjs sass scss

Last synced: 15 days ago
JSON representation

Dive into the future of space travel with our Space Tourism Multipage Website project. Experience sleek design and captivating content that fuel your curiosity about interstellar adventures. Whether you're a seasoned enthusiast or new to space exploration, this immersive website is your gateway to the cosmos.

• Host: GitHub
• URL: https://github.com/amrmabdelazeem/space-tourism-website-main
• Owner: amrmabdelazeem
• Created: 2024-05-10T17:18:09.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-13T20:33:30.000Z (6 months ago)
• Last Synced: 2024-10-10T15:23:16.816Z (about 1 month ago)
• Topics: html-css-javascript, node-sass, react-hooks, react-router, reactjs, sass, scss
• Language: SCSS
• Homepage: https://amrmabdelazeem.github.io/space-tourism-website-main/
• Size: 1.88 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Space Tourism Website

This is a solution to the [Space tourism website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3).

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

![main](public/preview.jpg)

### 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.

8. Test the application to ensure that the routing and styling are working as expected.

9. Build the project using vite bundler.

10. Commit the code to a version control system, such as Git, and push it to a remote repository on Github.

11. 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](https://sass-lang.com/)

- [React](https://reactjs.org/) - JS library

- [React-router](https://reactrouter.com/en/main)

- [vite](https://vitejs.dev/) - Vite is a local development server

### Useful resources

- [Sass](https://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

- [React](https://reactjs.org/)

- [React-router](https://reactrouter.com/en/main)

## Author

- Github - [Github](https://github.com/amrmabdelazeem)

- Frontend Mentor - [@amrmabdelazeem](https://www.frontendmentor.io/profile/amrmabdelazeem)

- Portfolio - [Portfolio](https://amr93-personal-portfolio.vercel.app/)

## 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.