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.
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
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.
- Solution URL: Github Repo
- Live URL: Space tourism
- React, react-router
- CSS custom properties
- Tailwindcss
- Mobile-first workflow
- Figma design
- Git and Github/pages
- NASA Images API
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.
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.
Here are the well written resources used throughout this project.
- Website - Carlos E Alford M
- Frontend Mentor - WebShuriken
- Twitter - @webshuriken
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.