/space-tourism-website

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

Primary LanguageJavaScript

Frontend Mentor - Space Tourism Website

This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Your challenge is to build out this multi-page space tourism website and get it looking as close to the design as possible.

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

Screenshot

screenshot of the space tourism home page

Links

Here are the links to my solution on GitHub and the live page where you can check out the space tourism SPA on your browser.

My process 💻

Built with

  • React, react-router
  • CSS custom properties
  • Tailwindcss
  • Mobile-first workflow
  • Figma design
  • Git and Github/pages
  • NASA Images API

What I learned

Planning of the, React, components before coding improves the speed of the app creation. But this step must never be missed or taken for granted.

I also improved my react router understanding and learned how to implement the latest router version. It is much simpler.

import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path='space-tourism-website/' element={ <Home /> } />
  <Route path='space-tourism-website/destination' element={ <Destination /> } />
  <Route path='space-tourism-website/crew' element={ <Crew /> } />
  <Route path='space-tourism-website/technology' element={ <Technology /> } />
</Routes>

Using TaildwindCSS is fantastic and allows granular levels of customisation! by using their configuration file. It loads really quick, super intuitive and it can be used alongside CSS.

theme: {
  extend: {
    colors: {
      'midnight': '#0b0d17',
      'tulip': '#d0d6f9',
      'white': '#ffffff'
    },
    fontFamily: {
      'bellefair': ['Bellefair'],
      'barlow-condensed': ['Barlow Condensed'],
    }
  }
}

I learned more about intergrating APIs with React apps. The NASA API is well documented so it was easy to implement.

Continued development

I would like to feel confortable using the history feature of react-router and also be able to implement it without having to read documentation.

Even though I feel really confortable with tailwindcss, sometime I have to look back at the docs for reassurance. It would be amazing being able to recall them from memory.

Useful resources

Here are the well written resources used throughout this project.

Author

Acknowledgments

To the whole Dev Community, keep dreaming and innovating. Thank you all. 😄

This project is a collaboration between us (Frontendmentor), Scrimba, and Kevin Powell. If you'd like to see how Kevin would tackle the project, you can follow along on Scrimba's free course.