eduardomcf / pnnd Goto Github PK
View Code? Open in Web Editor NEWLicense: Mozilla Public License 2.0
License: Mozilla Public License 2.0
Achei interessante a ideia, e fiz algumas anotações do que poderia ser feito:
Ao invés de recuperar os elementos com document.getElement, poderia utilizar as próprias funções do React como:
Os dois poderiam mudar um estado do componente que determinaria quando a navbar estaria aberta ou fechada e esses botões manipulariam este valor.
Já para a definição da estilização dinâmica, tem outros meios de contornar isso como o uso do pacote classNames. Porém para resolver de uma forma mais simples, poderia usar o atributo styles dentro da tag html e passar um objeto...
Exemplo:
const sidebarWidth = openedSidebar ? "250px" : "0px"
Acredito que essa seria uma forma mais simples usando React. Se puder ver uma forma de não precisar manipular a div root ao modificar os estilos da NavBar seria ótimo.
Boa tarde, observando a estrutura do folder components, vi que os arquivos dos componentes não estão encapsulados em subfolders, isso poderia ser feito para melhorar a organização do código tanto para quem escreve como para outras pessoas que tentam entender o projeto, principalmente para quando aumentar a quantidade de componentes.
Eu amei o projeto e acho que pode ser usado para auxiliar os professores com os alunos com deficiência visual. Só uma coisa que percebi é que a constante Annotations já tem alguns dados, onde seus atributos estão na sequência: id, tumb, tags, rating. Mas quando é feito uma requisição POST os atributos são adicionados nesse sequência: id, tags, rating, tumb.
Como sugestão, penso que seria interessante ter no README instruções que mostrassem como executar o backend e o frontend localmente.
As cores utilizadas prejudicam na experiência do usuário (deixando claro que não sei se as cores serão essas mesmas), por exemplo, na rota raiz /
temos o header
de verde e abaixo a parte da lista em branco, alterando para a rota /annotate
a maior parte da tela é vermelha e ao voltar para a tela de listagem a mudança de cores é um pouco brusca prejudicando a experiência do usuário, optaria por tons mais semelhantes.
Opa, excelente projeto.
Sobre as chamadas ao back, acredito que seria interessante definir a rota da API (http://localhost:3006) em um arquivo separado, como em um .env ou até um config.js
, por exemplo. Essa modularização facilitaria bastante a alteração em futuras versões do projeto, já que esta informação seria centralizada, permitindo assim, que a alteração em um único lugar, afete todas as partes do código que chamadas realizem chamadas a API.
Minha sugestão seria criar uma pasta para conter arquivos que encapsulam as chamadas para a API, dessa forma facilitando a reutilização dessas chamadas
Testar os componentes é importante para evitar bugs no seu sistema, então sugiro que você os faça.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.