Projeto: Consumindo uma API pública

Deploy: https://elc1090.github.io/project2-2024a-aapi-renan/

Desenvolvedores

• Renan Bick - Sistemas de Informação
• Thales Lagemann - Sistemas de Informação

Nosso produto

Quiz de Programação Quiz com perguntas que tocam em várias áreas da programação e desenvolvimento de software, como Linguagens, Frameworks, Bibliotecas, Conceitos, Paradigmas, Ferramentas, etc.

API escolhida

Iremos utilizar o web-aplicativo Notion para criar nossas tabelas e fazer chamadas de API.

Consumimos a API do QuizAPI para nossas perguntas.

• Notion
• QuizAPI

Desenvolvimento

1. Começamos criando instalando React no repositório do projeto e criando um design básico no Figma.
2. Tentamos adicionar TailWind para estilização, porém depois de muitos problemas para fazer funcionar acabamos desistindo e utilizando uma biblioteca de estilização chamada Styled Components.
3. Criamos a base do aplicativo com React, como nenhum dos dois participantes do grupo era experiente com o framework, utilizamos a ajuda do ChatGPT para construir a estrutura base do projeto.
4. Com alguns componentes já feitos, integramos tudo em uma única tela de forma a ter um fluxo de execução funcional.
5. Após isso, tentamos integrar nosso fluxo já existente com a API do Notion, porém novamente tivemos muitos problemas e decidimos partir para uma solução mais simples.
6. Adicionamos então uma chamada para a API do quizapi.io para buscar as perguntas que iriamos utilizar no nosso quiz.
7. Então, após um bom tempo corrigindo problemas no programa, chegamos a um fluxo de exexução funcional e bem decente.

Tecnologias

• Notion (API e Backend)
• QuizAPI (API e Backend)
• React (Frontend)
• TailWind (Styling)
• Styled Components (Styling)
• ChatGPT

Ambiente de desenvolvimento

• VS Code (IDE)
• Google Chrome (Navegador)
• Brave (Navegador)
• WebStorm (IDE)
• Edge (Navegador)

Referências e créditos

• ChatGPT foi bastante usado para rearranjar elementos na tela e para estilização, então temos muitos prompts do tipo: "put it into a floating container and make the background dark", "make the container brighter", "centralize the page title and put the score to the very right of the appbar, also put the question underneath the question number, on a different line", vários prompts desse tipo.
• StackOverflow foi muito usado também, em páginas como How to work with styled components in my react app?, Switch' is not exported from 'react-router-dom'

---

Projeto entregue para a disciplina de Desenvolvimento de Software para a Web em 2024a