This responsive webpage displays information about space travel.
- This is a project from Frontend Mentor which provided the design files for this project
- The aim of this project was to build a design as close as possible to the design files. Kevin Powell assisted in this by providing information about how to build and implement a design system in the accompanying scrimba course
- I took the project further by implementing my own design for the technology page. Furthermore I used React instead of plain JavaScript to handle the interactive elements of the page
- In order to boost my knowledge in using the new React Router v6 I used it for building the navigation of the site
- I also decided to use TypeScript to implement type-safety and get further practice using TypeScript in React applications
- Navigating through different pages
- Navigating through different tabs on the pages and dynamically displaying content and pictures
Live demo here.
The dependencies which are necessary to run this app can be found in the package.json file.
- Clone the repo
- Navigate to the project folder in the terminal and install the necessary NPM dependencies
npm install
- Run the app typing
npm start
in your terminal and visit localhost:3000 in your browser.
- Working with design files in figma
- Building out a complete design system upfront with custom properties and utility classes
- Building a layout with CSS grid
- Implementing a responsive design e.g., using different types of navigation menus
- Considering various accessibility aspects e.g,. implementing an option to skip straight to the content
- Implementing navigation via React-Router using Route, Link, NavLink components as well as several hooks (e.g. useLocation)
- Implementing no-match routes providing an error messages for invalid urls
- Importing and displaying pictures in react applications
The project is finished.
- I built the design system following the corresponding scrimba course by Kevin Powell