Demonstração (sem conexão com banco de dados): https://eduardogiacomini.github.io/easy-contact/
Uma simples aplicação criada para gerenciar os seus contatos. Esta aplicação foi desenvolvida utilizando HTML, CSS, Sass, JavaScript ES6+ no lado do cliente e JavaScript no lado do servidor com NodeJS e MongoDB como banco de dados.
Obrigado Jamboe pelo incrível mockup.
Com este projeto eu aprendi muitas coisas interessantes como:
- Definir o design do projeto a partir de um diagrama de classes;
- Utilizar variáveis CSS para alterar as cores da aplicação dinamicamente.
O Diagrama de Classes foi criado com o objetivo de identificar a estrutura básica da entidade que estava sendo tratada e as suas ações.
Com a utilização de variáveis CSS, o tema da aplicação pode ser alterado de maneira muito fácil, tornando a experiência do usuário o melhor possível ao utilizar a aplicação. Veja na imagem abaixo:
Esta feature pode ser implementada facilmente em seus projetos:
- Crie uma variável que represente uma cor no seu arquivo CSS:
:root {
--color-primary: #2998FF ;
}- Use esta variável onde desejar:
p {
color: var(--color-primary);
}- Para alterar o conteúdo da vaiável utilizamos um pouco de JavaScript, veja a seguir:
const root = document.documentElement;
root.style.setProperty('--color-primary', '#7ED56F');- Wow, isto é incrível. Todos os parágrafos que utilizavam aquela variável foram alterados dinamicamente.
- NodeJS;
- Nodemon;
- MongoDB.
- Baixe ou clone o repositório em sua máquina;
- Navegue para a pasta do projeto:
cd easy-content; - Navegue para a pasta da API:
cd api; - Instale as dependências:
npm install; - Execute a API:
npm run dev; - Em outra aba do terminal. Navegue para a pasta APP (é necessário estar na raiz do projeto):
cd app; - Instale as dependências:
npm install; - Execute o APP:
npm run dev.
Você pode usar esta aplicação, mas não se esqueça de dar os créditos ao autor original. Copyright by @EduardoGiacomini. Perguntas, carloseduardo.diasgiacomini@gmail.com.