This is a test task single-page application built with React that showcases space travel tours offered by SpaceX. Users can explore different tours, add them to their favorites. The application utilizes TypeScript, Atomic Design pattern, React Apollo for fetching data from the SpaceX API, Recoil for state management of favorite flights on the frontend, and Styled Components for styling.
Live Demo: You can try the live demo of the application by visiting https://space-x-test-task-iota.vercel.app/.
Technologies Used:
- React: A JavaScript library for building user interfaces.
- TypeScript: Enhances code scalability, maintainability, and type safety.
- Atomic Design Pattern: A methodology for designing and building scalable and reusable components.
- React Apollo: A GraphQL client for React applications, used for fetching data from the SpaceX API.
- Recoil: A state management library for React, used to manage the state of favorite flights on the frontend.
- Styled Components: Allows for styling components with CSS-in-JS.
API: The application fetches tour data from the SpaceX API. The API provides information about different tours, including their titles, descriptions. https://studio.apollographql.com/public/SpaceX-pxxbxen/variant/current/explorer
Getting Started: To run the application on your local machine, follow these steps:
-
Clone this repository to your local machine:
git clone <repository-url> -
Navigate to the project directory:
cd SpaceX-TestTask -
Install the dependencies:
npm install -
Start the development server:
npm start -
Open your browser and visit http://localhost:3000 to access the application.
Dependencies:
@apollo/client: A GraphQL client for React applications, used to interact with the SpaceX API.graphql: A library for working with GraphQL queries and schemas.react-alice-carousel: A carousel component for React applications.react-router-dom: A popular routing library for React applications.recoil: A state management library for React, used to manage the state of favorite flights.styled-components: Allows for styling components with CSS-in-JS.typescript: A superset of JavaScript that adds static typing to the language.