Gerenciador de Extensões de Navegador com Interface Dinâmica

What are you most proud of, and what would you do differently next time?

Eu me orgulho muito de ter conseguido completar o desafio do Frontend Mentor e colocar o projeto no ar com o GitHub Pages! Foi a primeira vez que publiquei um projeto online, e ver ele funcionando em uma URL pública, como https://coutinho013.github.io/browser-extensions-manager/, foi muito gratificante. Também fiquei feliz por ter implementado a alternância entre modo claro e escuro usando CSS Variables e JavaScript – achei que ficou bem legal e funcional. Além disso, aprender a usar Git e GitHub, mesmo enfrentando alguns erros, me deu muita confiança para projetos futuros.

Se eu pudesse fazer algo diferente na próxima vez, eu planejo melhor o setup do repositório desde o início. Eu criei o repositório no GitHub com um README.md inicial, o que causou vários conflitos de histórico com o meu repositório local (como o erro fatal: refusing to merge unrelated histories). Da próxima vez, vou criar o repositório vazio ou clonar ele logo depois de criar, para evitar esses problemas. Também gostaria de ter focado mais em responsividade – o projeto funciona bem em desktop, mas não testei muito em dispositivos móveis, então acho que poderia ter usado uma abordagem mobile-first desde o começo.

What challenges did you encounter, and how did you overcome them?

Enfrentei dois grandes desafios nesse projeto: um técnico, relacionado ao Git, e outro relacionado ao desenvolvimento da interface.

O maior desafio com Git foi entender e resolver os erros que apareceram quando tentei enviar meu projeto para o GitHub. Primeiro, tive problemas como no upstream branch e refusing to merge unrelated histories, porque o repositório remoto tinha commits que eu não tinha localmente. Foi um pouco confuso no começo, mas aprendi a configurar o upstream com git branch --set-upstream-to=origin/main main e a usar git push --force para sobrescrever o repositório remoto, já que eu queria manter apenas os meus arquivos locais. Também descobri que é melhor clonar o repositório logo após criá-lo ou criá-lo sem arquivos iniciais para evitar esses conflitos. Foi um aprendizado e tanto!

No desenvolvimento, o maior desafio foi fazer a alternância de temas (claro/escuro) funcionar corretamente. Eu queria que o interruptor .toggle-switch mudasse o tema e salvasse a preferência do usuário, mas tive dificuldade com a lógica no JavaScript e com a estilização do interruptor no CSS. Consegui fazer o tema alternar usando toggleMode e CSS Variables, mas a persistência (salvar no localStorage) não implementei. Também tive que ajustar os filtros ("All", "Active", "Inactive") para garantir que a lista de extensões atualizasse corretamente, o que levei um tempo para acertar com a função filterExtensions.

What specific areas of your project would you like help with?

Eu gostaria de ajuda em algumas áreas para melhorar o projeto:

Responsividade: Não foquei muito em dispositivos móveis, e acho que a interface pode não estar funcionando bem em telas menores. Gostaria de ajuda para ajustar o CSS e usar uma abordagem mobile-first, talvez com media queries ou até um framework como Bootstrap, se for uma boa ideia. Persistência de Dados: Queria que o modo claro/escuro fosse salvo no localStorage para que o usuário não perdesse a preferência ao recarregar a página. Também seria legal salvar o estado das extensões (ativo/inativo) para que as alterações persistissem. Não sei bem como implementar isso no JavaScript e gostaria de orientação. Melhorar o Interruptor de Tema: O botão .toggle-switch para alternar entre os temas claro e escuro está funcionando, mas a estilização não está tão boa, e o comportamento não está tão suave. Gostaria de ajuda para estilizar melhor o interruptor e talvez adicionar uma animação suave quando o tema muda. Testes e Feedback: Não testei muito o projeto em diferentes navegadores ou dispositivos, então gostaria de feedback sobre como ele está funcionando e sugestões de melhorias na interface ou no código.