huntweb-swapi

💻 Sobre o projeto

Projeto para consumir informações do star wars da api swapi e exibir no frontend desenvolvido em reactjs. Permite acessar uma introdução de cada item ao clicá-lo. O que mais gosto desse projeto é que foi o meu primeiro bootcamp e o meu primeiro desafio contendo frontend consumindo uma API.

Nova Api Swapi

• swapi, swapi infos, swapi documentation
• https://swapi.dev/api/
• rotas das informações da swapi

{
    "people": "https://swapi.dev/api/people/", 
    "films": "https://swapi.dev/api/films/", 
    "vehicles": "https://swapi.dev/api/vehicles/",
    "planets": "https://swapi.dev/api/planets/",  
    "species": "https://swapi.dev/api/species/", 
    "starships": "https://swapi.dev/api/starships/"
}

• utilizar informações no arquivo json: planets, species, starships

💻 Tópicos

A seguir, listei os tópicos abordados para construir o projeto original.

A versão atual do projeto sofreu algumas modificações no que implica a forma como estão sendo realizados os itens listadas.

1. O que é ReactJS ?

• 1.1. ReactJS construir o Frontend
• 1.2. uma biblioteca para desenvolver em javascript
• 1.3. Acessar API Rest
• 1.4. Roteamento
• 1.5. Componentes
• 1.6. Estados e Propriedades

2. Criando Projeto

• 2.1. node -v
• 2.2. npm -v
• 2.3. yarn -v
• 2.4. create-react-app huntweb
• 2.5. cd huntweb
• 2.6. code .
• 2.7. npm start

3. O que são componentes ?

• 3.1. conceito de componentização
• 3.2. react
• 3.3. react-dom
• 3.4. método do componente: render

4. Criando Header ?

• 4.1. na pasta src, na pasta componentes, na pasta Header, então criar todos arquivos desse componente: index.js
• 4.2. Estilização do component Header: styles.css
• 4.3. Estilização global

5. Buscando produtos da API

• 5.1. acessar API Rest feita em nodejs e exibir na nossa tela em ReactJS.
• 5.2. fiz essa api no repositório nodejs-api
• 5.3.1. essa API Rest fornece o dados dos produtos: id, title, description, url, ( createdAt, não será exibido)
• 5.3.2. informações de paginação: docs, total, limit, page, pages
• 5.4. biblioteca axios: yarn add axios: permite acessar um endereço externo: pasta services/api.js
• 5.5. A URL da nossa API: http://rocketseat-node.herokuapp.com/api
• 5.6. Insomnia: usar essa aplicação para gerir os dados da api
• 5.7. Na api, os produtos estão dentro da informação docs
• 5.8. A busca dessas informações na api será realizada pelo main/index.js.

6. Armazenamento no estado

• 6.1. state, estado, acredito ser o principal conceito do reactjs
• 6.2. o react trabalha com variável state e não variável normal.
• 6.3. o estado trabalha em manipular a variável objeto

7. Listando produtos

• 7.1. estilizar a exibição dos produtos

8. Páginas anterior / próxima

• 8.1. fazer a paginação dos produtos
• 8.2. criar os botões: anterior e próximo
• 8.3. estilização dos botões
• 8.4. chamar um método toda vez que o usuário clicar no botão

9. Configurando Navegação (Roteamento)

• 9.1. Usar rotas para a navegação: yarn add react-router-dom
• 9.2. Componente de detalhes dos produtos: browserrouter, switch, route
• 9.3. Redirecionar o usuário conforme cada rota
• 9.4. Componente Link para cada um dos botões

10. Navegando para o detalhe

• 10.1. Buscar os dados dos produtos da API Rest
• 10.2. Exibir em tela na pages products
• 10.3.1. state
• 10.3.2. async await
• 10.3.3. props
• 10.3.4. componentdidmount
• 10.4. Estilização da product info

---

Próximo passo para frontend

• 1. responsividade
• 2. acessibilidade
• 3. modo dark / light
• 4. variação de cores
• 5. hospedar aplicação

---

Encerramos

Componentização, roteamento, ciclos de vida, utilização de API Rest, estado.

🎨 Layout

Uma aplicação web que requisita informações de uma API

Web - v2.0

• favicon da star wars: insirido as imagens na pasta public
• fluxo da rota
• componente de loader para o elemento people clicado
• paginação de objetos
• estilização de item clicado
• header fixed
• header logo
• tratar paginação no fluxo para page > 1 (Navegação (Roteamento))
• o botão voltar (Navegação (Roteamento))
• reactrouter
• inspiração starwars-visualguide
• inspiração tbone849-star-wars-guide
• inspiração swapi-task
• inspiração finmavis-swapi-task
• inspiração animatk-ReactJS-Star-Wars-API

Web - v1.0

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• Css: posicionamento, dimensionamento e muito mais
• Javascript
• HTML: estrutura e efeitos
• React: os fundamentos, como state, props, components, ciclo de vida.
• Git
• Github
• Yarn
• Node.js
• Zeit Now

🚀 Como executar o projeto

Podemos considerar este projeto como sendo com uma parte:

1. Front End
2. API Rest

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode

🧭 Rodando a aplicação web (Front End)

# Clone este repositório
$ git clone https://github.com/douglasabnovato/huntweb

# Acesse a pasta do projeto no seu terminal/cmd
$ cd huntweb 

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm run start

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

😯 Como contribuir para o projeto

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. Envie as suas alterações: git push origin my-feature

Caso tenha alguma dúvida confira este guia de como contribuir no GitHub

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com ❤️ por Douglas A B Novato 👋🏽 Entre em contato!

Fonte do projeto: Rocketseat Discover - ReactJS