Newsletter ·

Read in English

🔗 Índice

1. O estudo
2. Tecnologias
3. Estrutura do projeto
4. A estilização
5. Primeiros passos
6. Páginas
7. Licença

📙 O estudo

A aplicação Newsletter foi elaborada em conjunto com sua API, com o intuito de fortalecer os conhecimentos de Javascript/ Typescript e aprender novas tecnologias, como Vue e o Gemini, inteligência artificial da Google e, além disso, dar início a outros conhecimentos como POO e Design Patterns, especificamente o design Singleton, utilizado nas instâncias do ORM e da ferramenta Cron (ambos da API).

💻 Tecnologias

• Linguagem - Javascript
• Framework - Nuxt 2
• Runtime ¹ - Node.JS

🗂️ Estrutura do projeto

📦 raiz-do-projeto
├── 📁 components       # Onde ficam os componentes da aplicação
├── 📁 layouts          # Onde ficam os modelos das páginas utilizadas nas rotas
├── 📁 middleware       # Contém a configuração dos middlewares de autenticação de usuário
├── 📁 pages            # Contém as configurações de roteamento da aplicação
├── 📁 plugins          # Contém as configurações de plugins adicionais
├── 📁 store            # Onde ficam as stores contendo os estados globais da aplicação e os métodos para manipular os dados

💡 A estilização

Para estilizar a aplicação, foi utilizada a biblioteca Vuetify, que tem como base visual o Material Design do Google. Quase todos os elementos da aplicação vieram de componentes pré-existentes no Vuetify, assim como seus estilos e outras questões, como acessibilidade.

🚀 Primeiros passos

# Clone o projeto

git clone https://github.com/vinicioscst/newsletter-vue.git

# Instale as dependências

npm install

# Crie o arquivo .env e preencha os dados corretamente

BASE_URL=            # Insira aqui a URL da sua API. Exemplo: http://localhost:3000

# Rode a aplicação

npm run dev

Warning

Para poder ter acesso às notícias e poder manipulá-las, lembre-se de criar um usuário através da API

🔗 Páginas

├── 🔗 /                         # Página inicial, onde ficam concentradas as notícias mais recentes.
│                                # É possível pesquisar as notícias por título ou tópico, além de ordernar pela data e ordem alfabética
├── 🔗 /articles                 # Normalmente acessada após uma pesquisa, fazendo o filtro das notícias através dos query params
├── 🔗 /login                    # Onde contém o formuário para fazer o login do usuário administrador
├── 🔗 /admin                    # Dashboard do usuáro, onde é possível gerar, visualizar, editar e excluir as notícias
│   ├── 🔗 /admin/settings       # Configurações de usuário, podendo ser possível alterar nome, email e/ ou senha

Licença

Esse projeto está sob a licença MIT

Footnotes

1. É recomendada a versão 14.x ou 16.x ↩