Frontend Mentor - Space tourism website solution

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
  • Links
  • Screenshots
• My process
  • Built with
  • What I learned
  • Continued development
  • 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

Links

• Live site: Space tourism

Screenshots

My process

Built with

• Sass
• Flexbox
• CSS Grid
• Mobile-first workflow
• React
• React Router
• Framer Motion

What I learned

My first React project is done! I'm already pretty comfy with CSS and this challenge is kinda of CSS-heavy so I thought this would be a good starting point for working with React. I had to learn most of it on the go, as I was building out the app but I had a lot of fun. I also started experimenting with Framer Motion which is an amazing tool if somewhat intimidating at first.

I tried to keep it scalable and not to be too repetitive with my code. At some point, I even rewrote the whole thing to just use one component for all the Destination, Crew and Technology pages as they actually have a lot of similarities. This approach got rid of many of the repetitive bits but the end product was really hard to read so I scrapped it. I decided it's not worth sacrificing the readability. Some repetition will be there and that's perhaps not always a bad thing.

To still improve things a bit, I refactored my old code, created a new component for my buttons - which are repeating over all pages, just with different styles - and introduced some utility and shared classes. I ended up taking a hybrid approach to the CSS which I enjoyed a lot. I felt like I managed to get rid of some of the repetitiveness in my CSS without overwhelming the JSX too much.

Continued development

Working with images and animating the different tabs was the hardest part of this and on first load, things still look a bit "jumpy" when content switches. I did my best to mitigate this with some animations and giving everything a "placeholder". It's a lot better than how it was but it's not perfect and I'm going to come back to this as I learn more.

Useful resources

• Responsive navbar with React - This video helped a lot understanding and fixing some of the issues I had with resizing the window
• Net Ninja's Framer Motion course - Super useful for starting out with Framer Motion

Author

• Frontend Mentor - @FluffyKas
• Twitter - @fluffykas