Theme Selector

Aplicação web que permir o usuário cadastrar, editar e deletar temas de cores da sua preferência. Estes temas podem ser aplicados mudando as cores da página. Também é possível filtrar temas pelo nome utilizando o campo de busca.

✨ O que foi feito?

• Utilize JS Vanilla e CSS nativo para a estrutura HTML responsiva
• Deve exibir uma lista com todos os temas do JSON de mock fornecido
• Cada tema deve ter uma visualização em miniatura
• Qualquer tema que não esteja aplicado no momento pode ser removido
• Ao clicar em um tema, ele deve ser aplicado
• Deve ser possível editar temas existentes
• Deve haver um campo de filtro para pesquisar temas por nome
• Deve haver um botão para criar um novo tema, direcionando para a página de edição/adicionar
• Garanta a responsividade da aplicação em dispositivos desde mobile (320px) até desktop (1920px), aderindo às melhores práticas de usabilidade;
• Deve exibir uma visualização do tema sendo adicionado
• Deve ter seletores de cores para cada uma das cores do tema (de sua escolha)
• As cores selecionadas devem ser salvas no formato de cor hexadecimal

💻 Tecnologias utilizadas no projeto

• JavaScript
• HTML
• CSS
• Fetch API
• Async / await
• JSON Server (v0.17.4)
• NodeJs (v20.11.1)

🛠️ Instruções de execução

• 🤖 Faça um clone deste repositório:

git clone https://github.com/marcelopoars/theme-selector.git

• 🤖 Instale as dependências:

npm install

ℹ️ NOTE: Tive problemas com filtros na versão v1.0.0 beta do JSON Server, então recomendo utilizar a versão v0.17.4 que foi utilizada neste projeto.

• 🤖 Para rodar o servidor execute o comando:

npm start

Será exibida uma mensagem em seu terminal, informando a url para acessar a aplicação e o endpoint de themes.

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/themes

  Home
  http://localhost:3000

• 🤖 Para rodar o projeto em modo desenvolvimento, rode o comando abaixo. Para obter hot-reload, recomendo utilizar a extensão Live Server para VS Code.

npm run dev:server

• 🤖 Todos os temas cadastrados serão gravados no arquivo db.json na rais do diretório deste projeto.
• 🤖 Deixei um backup de temas no arquivo mock.json. (Serve apenas como uma cópia para lembrar a estrutura padrão).

📚 Endpoint Themes

URL: http://localhost:3000/themes

[
  {
    "id": "1",
    "name": "Tema Azul",
    "colors": {
      "primary": "#007bff",
      "secondary": "#6c757d",
      "success": "#28a745",
      "danger": "#dc3545",
      "warning": "#ffc107"
    }
  },
  {
    "id": "2",
    "name": "Tema Verde 2",
    "colors": {
      "primary": "#28a745",
      "secondary": "#6c757d",
      "success": "#218838",
      "danger": "#c82333",
      "warning": "#ffc107"
    }
  }
]

👨‍💻 Autor

Olá! Eu sou Marcelo Pereira. 👋

Desenvolvedor Frontend apaixonado por criar interfaces web incríveis e acessíveis. Entusiasta de SEO, Acessibilidade e Inteligência Artificial. Minha missão é contribuir para uma web mais inclusiva e semântica, garantindo que todas as pessoas tenham acesso a uma experiência digital excepcional. 🤓🎉

Marcelo Pereira
GitHub  |  LinkedIn  |  Instagram  |  Website (Portfólio)

---

Criado com 💜 por Marcelo Pereira