Marvel-APP

Supabase & Vue

Workshop abordando sobre as funcionalidades do Vue2 usando OptionsAPI e seu ecossistema e também adoção do Supabase como responsável da nossa camada de Backend, a iniciativa do workshop é abordar de forma simples e funcional como podemos adotar o Vue.js para desenvolver interfaces para web, e como podemos adotar o serviço do Supabase de forma simples conseguimos ter autonomia e previsibilidade sobre as camadas client <> server.

Referência Oficial

1. Vue documentação oficial
2. Supabase documentação oficial
3. Bootstrap5 documentação oficial

Desafio

A proposta é criar um web-app com as funcionalidades básicas do ambiente da Marvel/DC, para ganharmos tempo com a parte de User Interface iremos adotar a nova release do Bootstrap5.

No âmbito das funcionalidades gerais temos um CRUD com as seguintes responsabilidades:

• Criar personagem
• Excluir personagem
• Visualizar personagem por ID
• Visualizar todos os personagens

Na parte do Vue.js iremos adentrar sobre:

• Vue-Cli
• WebComponents
• Single File Components(SFC)
• Diretivas (v-for, v-if e etc...)
• Props, Computeds e Events
• Ciclo de Vida do Componente (Hooks)
• Rotas (Vue-router)
• API Client(Axios e Supabase)

Docs ::exclamation::

Foi criado dentro do diretório docs toda a documentação sobre como foi criado esse webApp seguindo as diretrizes do prótotipo abaixo.

Docs 📌

Caso tenha interesse em executar esse prótotipo na sua máquina, precisa seguir os passos abaixo:

1. Instalar Node e Npm

2. Instalar o Yarn

npm i -g yarn

3. No seu terminal, faça clone do repositório

git clone [email protected]:opensanca/marvel-supabase-vue.git

4. Entrar no projeto

cd marvel-supabase-vue

5. Instale as dependências necessárias.

yarn

6. Criar uma conta no Supabase
7. Criar uma organização no Supabase e um projeto com nome da sua escolha.
8. Crie uma tabela com o nome character.
9. Adicione as credenciais da sua SupabaseAccount (url, key) no src/services/index.js.

Contribuição

Contribuições são sempre bem vindas! Por favor, crie um PR para adicionar Perfil Github.

License 📝

Este projeto está licenciado sob a licença do MIT.

Demonstre seu apoio 👨‍🚀

Dê um ⭐️ se este projeto lhe ajudou!

Mantenedor 🚀

@cristofer.sousa