Space Ships 🚢

The app lists to the user all ships and sea plataforms from the Space X's GraphQL api, and shows up more information about them inside each card.

// A aplicação permite que o usuário veja os navios e plataformas marítimas disponíveis na API GraphQL da SpaceX, podendo clicar nos cards para descobrir mais sobre os mesmos.

App Overview // overview da aplicação 💻

• 🏠 Home - View all the loaded cards // veja todos os cards carregados
• 💗 Detail - Check out the details about the clicked ship or sea plataform // Descubra mais informações sobre o card clicado

How to run / como executar 💿

Go to project's directory and install all the dependencies // Vá até o diretório do projeto e instale as dependências

yarn | npm install

Next, simply run the project // Depois é só rodar o projeto =)

yarn start || npm start

Project Structure / estrutura do projeto 🌳

├── App.jsx 
├── assets // images
│   ├── arrow.svg
│   └── ship.svg
├── components // app containers
│   ├── Header
│   │   ├── Header.jsx
│   │   └── styles.js
│   ├── Loader
│   │   ├── Loader.jsx
│   │   └── styles.js
│   ├── ShipCard
│   │   ├── ShipCard.jsx
│   │   └── styles.js
│   ├── ShipsList
│   │   ├── ShipsList.jsx
│   │   └── styles.js
│   └── Template
│       ├── styles.js
│       └── Template.jsx
├── graphql // api requests
│   └── queries.js
├── index.js
├── pages // app screens
│   ├── Home
│   │   ├── Home.jsx
│   │   └── styles.js
│   └── ShipDetail
│       ├── ShipDetail.jsx
│       └── styles.js
├── redux // state management files
│   ├── actions
│   │   ├── ShipDetailActions.js
│   │   └── ShipsActions.js
│   ├── reducers
│   │   ├── index.js
│   │   ├── ShipDetailReducer.js
│   │   └── ShipsReducer.js
│   └── store.js
├── routes.js // app routes
└── styles
    └── global.js // global styles

Tools used / ferramentas utilizadas 🛠

• React JS
• Styled Components
• Redux
• Router DOM
• GraphQL
• Figma (design tool)