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

• Frontend Mentor - Space tourism website solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments
• README from Next.js
  • Getting Started
  • Learn More
  • Deploy on Vercel
• Additional commands for development
  • Component Driven Development
  • Unit testing
  • E2E testing

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Vercel

My process

Built with

• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Storybook - For Component Driven Development
• Jest - For unit tests
• Cypress - For E2E tests

What I learned

• How to build multi-page website with Next.js, Storybook and Styled Components, testing with Jest and Cypress.
• I found out Next.js is still not well developed especially around mocking some modules with Jest. Maybe I can contribute?

Continued development

• I still need to learn more about Server side rendering.

Useful resources

• Unit testing Next.js API routes - This told me the easiest way to test Next.js API.
• What are the best screen sizes for responsive web design in 2022? - Referencing this page, I set responsive break point width.
• idiomatic way to share styles in styled-components? - This told me the ways to share styles in styled-components.
• How TO - Aspect Ratio - I needed to maintain the aspect ratio of image container div.

Author

• Website - TakumaKira
• Frontend Mentor - @TakumaKira

Acknowledgments

README from Next.js

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Additional commands for development

Component Driven Development

First, run the development server:

yarn storybook

Open http://localhost:6006 with your browser to see the result.

Unit testing

Run the tests with:

yarn test

You will see the results in the terminal.

E2E testing

Run E2E tests with:

yarn cypress

Or, headlessly:

yarn cypress:headless