Skip to content

Space, creative design and animations coming together! Built with Typescript, React, Styled Components & Framer Motion.

License

Notifications You must be signed in to change notification settings

developedbygeo/Space-travel

Repository files navigation

Space Travel

mobile viewport - portrait mode mobile viewport - landscape mode


A React-based, fully responsive website that uses JSON data and combines creative design and space adventures.

This project was a lovely opportunity to follow a provided, structured Figma design and bring to life. It implements lazy loading & component/page animations, and is based on TypeScript, React Router, Styled Components and Framer Motion. For a detailed overview, please have a look at the Features & Tech section.

Important Note: All of the image assets, along with the design files were provided by Frontend Mentor, as part of the Space tourism multi-page website challenge.


Installation

As this project was bootstrapped with React, the following scripts are available:

Install the dependencies:

npm install

Run the app in development mode:

npm start

Launch the test server in the interactive watch mode:

npm test

Features

  • Dynamic website background based on path.
  • JSON-fetched data with a custom hook to facilitate only essential data extraction.
  • Animated page transitions and component presentation.
  • Fully-responsive in both landscape & portrait mode.

Tech

  • React
  • TypeScript
  • React Router
  • Styled Components
  • Framer Motion
  • Lodash
  • React Content Loader
  • React Icons

For a more detailed overview of the development & production dependencies, please check package.json.

Live Version

https://developedbygeo.github.io/Space-travel/

Contributing

Contributions are certainly welcome. Please feel free to open an issue/PR if there is something you would like to be changed.

Acknowledgements

A massive thank you to The Odin Project, freeCodeCamp & Frontend Mentor for their guidance and quality material.

License

MIT

About

Space, creative design and animations coming together! Built with Typescript, React, Styled Components & Framer Motion.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published