Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/marco0antonio0/dirrochacms

DirrochaCMS is a lightweight CMS for content management with an API for websites and apps. It supports easy editing, publishing, and deployment on Netlify and Vercel, using Firebase Firestore as a free NoSQL database.
https://github.com/marco0antonio0/dirrochacms

api cms collaborate gerenciador-de-conteudo interface-amigavel javascript nextjs nodejs typescript

Last synced: about 1 year ago
JSON representation

DirrochaCMS is a lightweight CMS for content management with an API for websites and apps. It supports easy editing, publishing, and deployment on Netlify and Vercel, using Firebase Firestore as a free NoSQL database.

Awesome Lists containing this project

README 

          
# šŸš€ DirrochaCMS: Sua SoluĆ§Ć£o Leve para Gerenciamento de ConteĆŗdo






















DirrochaCMS Ć© um Sistema de Gerenciamento de ConteĆŗdo (CMS) leve e eficiente, projetado para simplificar a criaĆ§Ć£o de endpoints de API e o gerenciamento de dados para sites e diversas aplicaƧƵes. ConstruĆ­do pensando em desenvolvedores e equipes, o DirrochaCMS oferece uma soluĆ§Ć£o rĆ”pida, personalizĆ”vel e amigĆ”vel para gerenciar o conteĆŗdo de seus projetos web. Nosso objetivo Ć© fornecer uma ferramenta intuitiva que torne o gerenciamento de conteĆŗdo direto e descomplicado, economizando seu tempo e recursos.



## ā¬‡ļø InstruƧƵes de InstalaĆ§Ć£o RĆ”pida



Antes de mergulhar nas funcionalidades do DirrochaCMS, siga estas instruƧƵes para configurar o projeto localmente:



1.  **Clone o projeto com `degit`:**



    ```bash

    npx degit marco0antonio0/DirrochaCMS meu-projeto

    cd meu-projeto

    ```



    *   Este comando copia o projeto para uma nova pasta chamada `meu-projeto`. VocĆŖ pode substituir `meu-projeto` pelo nome que preferir.

    * Certifique-se de ter o Node.js instalado na sua maquina.



2.  **Instale as dependĆŖncias:**



    ```bash

    npm install

    # ou

    yarn install

    ```



    *   Este comando instala todas as bibliotecas e pacotes necessƔrios para o funcionamento do DirrochaCMS.



3.  **Configure as VariƔveis de Ambiente:**



    *   **Crie o arquivo `.env`:** Copie o arquivo `.env.example` para `.env`.

        ```bash

        cp .env.example .env

        ```

    * **Acesse o Firebase:** No [Console do Firebase](https://console.firebase.google.com/), crie um novo projeto ou acesse um projeto existente.

    * **Credenciais:** Obtenha as credenciais do seu projeto Firebase (chave de API, ID do projeto, domĆ­nio de autenticaĆ§Ć£o, etc.) em:

        *  VĆ” para as configuraƧƵes do projeto e na aba **Geral** vocĆŖ encontra as credenciais e na aba **Contas de serviƧo** vocĆŖ pode gerar uma nova chave.

    *   **Preencha o arquivo `.env`:** Substitua os valores de exemplo pelas suas credenciais do Firebase no arquivo `.env`:



        ```env

        NEXT_PUBLIC_FIREBASE_API_KEY=SUA_CHAVE_DE_API_DO_FIREBASE

        NEXT_PUBLIC_FIREBASE_APP_ID=SEU_ID_DE_APP_DO_FIREBASE

        NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=SEU_DOMƍNIO_DE_AUTENTICAƇƃO_DO_FIREBASE

        NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=SEU_ID_DE_REMETENTE_DE_MENSAGENS_DO_FIREBASE

        NEXT_PUBLIC_FIREBASE_PROJECT_ID=SEU_ID_DE_PROJETO_DO_FIREBASE

        NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=SEU_BUCKET_DE_STORAGE_DO_FIREBASE

        NEXT_PUBLIC_ENV=SEU_AMBIENTE (ex: development)

        SECRET_KEY=SUA_CHAVE_SECRETA

        ```



4. **Pronto!** Agora vocĆŖ pode iniciar o projeto.



    ```bash

        npm run dev

    ```

    * Execute o comando para startar o ambiente de desenvolvimento do projeto



---



![DirrochaCMS Login Demo](/images/login-demo.dirrocha.com%20(1).png)



## āœØ Principais Funcionalidades



O DirrochaCMS oferece uma variedade de funcionalidades poderosas:



*   **CriaĆ§Ć£o de Endpoints Personalizados:** Defina e crie seus prĆ³prios endpoints de API para acessar e gerenciar seus dados.

*   **Gerenciamento Intuitivo de Dados:** Use uma interface limpa e intuitiva para executar operaƧƵes de Criar, Ler, Atualizar e Excluir (CRUD) em seus dados.

*   **Estruturas de Dados FlexĆ­veis:** Projete esquemas de dados personalizados com vĆ”rios tipos de campos, como texto, nĆŗmeros, booleanos e muito mais, para atender Ć s necessidades do seu projeto.

*   **Leve e de Alto Desempenho:** ConstruĆ­do com tecnologias de ponta para garantir alto desempenho e eficiĆŖncia.

*   **IntegraĆ§Ć£o Descomplicada:** Integre facilmente o DirrochaCMS com suas ferramentas e serviƧos existentes.

*   **Gerenciamento de UsuƔrios:** Crie e gerencie contas de usuƔrio, controle o acesso e configure as definiƧƵes diretamente dentro do CMS.

*   **AutenticaĆ§Ć£o:** Proteja seus endpoints com recursos de autenticaĆ§Ć£o integrados, permitindo que vocĆŖ gerencie logins de usuĆ”rio e proteja dados sensĆ­veis.

*   **ConfiguraƧƵes de UsuƔrio:** Defina se deseja usar usuƔrios no sistema, permitindo que os usuƔrios se registrem e faƧam login.

*   **Pesquisa:** Pesquise por nome ou e-mail de forma rƔpida e simples.

*   **Endpoints DinĆ¢micos:** Crie endpoints dinamicamente com os campos desejados, facilitando a personalizaĆ§Ć£o para suas necessidades.

*   **Interface AmigƔvel:** Interface fƔcil de usar e entender.



**Exemplo PrĆ”tico:** Imagine construir um blog. Com o DirrochaCMS, vocĆŖ pode facilmente criar endpoints para posts, categorias, autores e comentĆ”rios, gerenciando todo esse conteĆŗdo por meio de uma interface amigĆ”vel. VocĆŖ tambĆ©m pode implementar recursos de gerenciamento de usuĆ”rios e autenticaĆ§Ć£o para uma experiĆŖncia de blog mais robusta.



## šŸ› ļø Stack de Tecnologias



Utilizamos uma poderosa combinaĆ§Ć£o de tecnologias:



*   āœ… **Firebase API:** Serve como backend para persistĆŖncia de dados e autenticaĆ§Ć£o. Garante escalabilidade e facilidade de integraĆ§Ć£o.

*   āœ… **Rotas de API Next.js:** Permite a criaĆ§Ć£o de endpoints de API, oferecendo alto desempenho e uma Ć³tima experiĆŖncia para o desenvolvedor.

*   āœ… **Next.js:** O framework para construir a interface de usuĆ”rio do aplicativo. Ele oferece renderizaĆ§Ć£o do lado do servidor e desempenho excepcional.

*   āœ… **Docker:** Possibilita a conteinerizaĆ§Ć£o, garantindo portabilidade e consistĆŖncia entre diferentes ambientes.

*   āœ… **Docker Compose:** Simplifica a orquestraĆ§Ć£o de mĆŗltiplos contĆŖineres, agilizando o desenvolvimento e a implantaĆ§Ć£o.

* āœ… **React:** Usado para construir a interface do usuĆ”rio.

* āœ… **Heroui:** Uma biblioteca de UI para React, facilita o desenvolvimento.

* āœ… **Lodash.debounce:** FunĆ§Ć£o para evitar execuƧƵes excessivas.

* āœ… **React-hot-toast:** Sistema de notificaƧƵes.



## āš™ļø PrĆ©-requisitos e InstalaĆ§Ć£o (Detalhada)



Antes de comeƧar, certifique-se de ter o seguinte instalado:



1.  **Node.js (v16+):** O ambiente de execuĆ§Ć£o JavaScript.



    *   [Baixar Node.js](https://nodejs.org/)



2.  **npm ou yarn:** O gerenciador de pacotes para instalar as dependĆŖncias do projeto.

3.  **Docker e Docker Compose:** Para conteinerizaĆ§Ć£o e gerenciamento de serviƧos.



    *   [Instalar Docker](https://docs.docker.com/get-docker/)



### InstalaĆ§Ć£o



1.  **Clone o RepositĆ³rio (Se jĆ” tiver feito usando npx degit, pule esse passo):**



    ```bash

    git clone https://github.com/marco0antonio0/DirrochaCMS

    cd DirrochaCMS

    ```



### OpƧƵes de ImplantaĆ§Ć£o



#### **ImplantaĆ§Ć£o em um VPS (Servidor Privado Virtual):**



1.  **Instale as DependĆŖncias:**



    ```bash

    npm install

    # ou

    yarn install

    ```



2.  **Construa a AplicaĆ§Ć£o:**



    ```bash

    npm run build

    # ou

    yarn build

    ```



3.  **Inicie o ambiente de desenvolvimento:**



    ```bash

    npm run dev

    # ou

    yarn dev

    ```



4.  **Execute com Docker:**



    ```bash

    docker build -t dirrocha-cms .

    docker run -p 3000:3000 dirrocha-cms .

    ```



    A aplicaĆ§Ć£o estarĆ” acessĆ­vel em `http://localhost:3000`.



#### **ImplantaĆ§Ć£o no Netlify ou Vercel:**



1.  **Configure as VariƔveis de Ambiente do Firebase:**



    *   Crie um projeto no [Console do Firebase](https://console.firebase.google.com/).

    *   Obtenha as credenciais do seu projeto (chave de API, ID do projeto, etc.).

    *   Verifique se o arquivo `.env` foi criado e se ele contem todas as credenciais.



2.  **Implante:**

    *   Simplesmente envie os arquivos do seu projeto para um repositĆ³rio e conecte-o ao Netlify ou Vercel. Eles cuidarĆ£o do processo de implantaĆ§Ć£o.



## šŸš€ Como Usar o DirrochaCMS



### PƔgina Inicial (index.tsx)



![PƔgina Inicial do DirrochaCMS](/images/4.png)



1.  **Acesse a AplicaĆ§Ć£o:** Abra seu navegador e vĆ” para `http://0.0.0.0:3000`.

2.  **NavegaĆ§Ć£o:** VocĆŖ serĆ” direcionado Ć  pĆ”gina inicial, onde poderĆ” visualizar os endpoints existentes ou gerenciar usuĆ”rios.

3.  **Abas:** Na pĆ”gina inicial, vocĆŖ pode ver as abas "Endpoints" e "UsuĆ”rios".

4. **Pesquisa:** Na pĆ”gina inicial, vocĆŖ tem uma opĆ§Ć£o de pesquisa para encontrar seus endpoints ou usuĆ”rios.



#### **Gerenciando Endpoints:**



*   **Visualizar Endpoints:** A pƔgina inicial lista todos os endpoints criados.

*   **Acessar Dados do Endpoint:** Clique em um endpoint para visualizar e gerenciar seus dados.

*   **Criar Novos Endpoints:** Clique em "ConfiguraƧƵes" para ir Ć  pĆ”gina de criaĆ§Ć£o.

*   **Logout:** Clique no Ć­cone de logout para sair.

* **DocumentaĆ§Ć£o:** Clique no link azul para ir para documentaĆ§Ć£o.



#### **Gerenciando UsuƔrios:**



*   **Visualizar UsuĆ”rios:** A pĆ”gina inicial possui uma aba "UsuĆ”rios" onde vocĆŖ pode ver todos os usuĆ”rios registrados.

*   **Excluir UsuĆ”rios:** Na aba "UsuĆ”rios", vocĆŖ pode excluir usuĆ”rios.



### PĆ”gina de CriaĆ§Ć£o de Endpoint (create.tsx)



![Criar Endpoint no DirrochaCMS](/images/8.png)



1.  **Acessar a PĆ”gina:** Clique em "ConfiguraƧƵes" na pĆ”gina inicial para acessar a pĆ”gina de CriaĆ§Ć£o de Endpoint.

2.  **Criar Endpoints:**

    *   **Nome do Endpoint:** Insira o nome desejado para seu novo endpoint.

    *   **Selecionar Campos:** Escolha os campos (tipos de dados) que deseja incluir no endpoint.

    *   **Salvar:** Clique em "Criar endpoint" para criar o novo endpoint.

3.  **ConfiguraƧƵes de UsuƔrio:**

    *   **Acessar ConfiguraƧƵes de UsuĆ”rio:** Clique na aba "Users" na pĆ”gina de CriaĆ§Ć£o de Endpoint.

    *   **Habilitar/Desabilitar Login:** Alterne "Login de usuƔrios" para habilitar ou desabilitar o login de usuƔrios.

    *   **Habilitar/Desabilitar Registro:** Alterne "Registro de usuƔrios" para habilitar ou desabilitar o registro de usuƔrios.

    * **Habilitar/Desabilitar logout:** Alterne "Logout de usuƔrios" para habilitar ou desabilitar o logout de usuƔrios.

    *   **Salvar:** Clique em "Salvar configuraĆ§Ć£o" para salvar suas configuraƧƵes de usuĆ”rio.

4. **ValidaĆ§Ć£o:** A pĆ”gina possui um sistema de validaĆ§Ć£o para verificar se vocĆŖ preencheu todos os campos corretamente.

5. **Endpoint:** Na aba "Endpoint" vocĆŖ pode criar o seu endpoint customizado.



### Gerenciar Dados



![Lista de Itens no DirrochaCMS](/images/6.png)

![Criar Item no DirrochaCMS](/images/7.png)



1.  **Acessar um Endpoint:** VƔ para a pƔgina inicial e clique em um endpoint existente.

2.  **Adicionar Novos Dados:** Clique no botĆ£o "Adicionar" para adicionar uma nova entrada de dados.

3.  **Editar Dados:** Clique em uma entrada de dados existente para editĆ”-la.

4.  **Excluir Dados:** Ao editar uma entrada de dados, vocĆŖ encontrarĆ” uma opĆ§Ć£o para excluĆ­-la.



**Exemplos de RequisiƧƵes de API:**



Aqui estĆ£o alguns exemplos de como interagir com seus endpoints de API personalizados:



*   **GET Todos os Posts:**



    ```bash

    curl -X GET http://0.0.0.0:3000/api/posts

    ```



    **Resposta Esperada:**



    ```json

    [

      {

        "id": "123",

        "title": "Primeiro Post",

        "content": "ConteĆŗdo do primeiro post",

        "author": "John Doe"

      },

      {

        "id": "456",

        "title": "Segundo Post",

        "content": "ConteĆŗdo do segundo post",

        "author": "Jane Smith"

      }

    ]

    ```



*   **POST Um Novo Post:**



    ```bash

    curl -X POST \

      -H "Content-Type: application/json" \

      -d '{

        "title": "Novo Post do Blog",

        "content": "Este Ć© o conteĆŗdo do novo post do blog.",

        "author": "Seu Nome"

      }' \

      http://0.0.0.0:3000/api/posts

    ```



    **Resposta Esperada:**



    ```json

    {

      "id": "789",

      "title": "Novo Post do Blog",

      "content": "Este Ć© o conteĆŗdo do novo post do blog.",

      "author": "Seu Nome"

    }

    ```



*   **PUT (Atualizar) um Post Existente:**



    ```bash

    curl -X PUT \

      -H "Content-Type: application/json" \

      -d '{

        "title": "TĆ­tulo Atualizado do Post do Blog",

        "content": "Este Ć© o conteĆŗdo atualizado."

      }' \

      http://0.0.0.0:3000/api/posts/789

    ```



*   **DELETE um Post:**



    ```bash

    curl -X DELETE http://0.0.0.0:3000/api/posts/789

    ```



**Exemplos de RequisiƧƵes de AutenticaĆ§Ć£o**



*   **Login de UsuƔrio:**

    ```bash

    curl -X POST \

    -H "Content-Type: application/json" \

    -d '{

    "email":"teste@teste.com" ,

    "password":"senha123"

    }' \

    http://0.0.0.0:3000/api/user/login

    ```



    **Resposta Esperada:**



    ```json

    {

      "token": "..."

    }

    ```



*   **Registrar UsuƔrio:**

    ```bash

    curl -X POST \

    -H "Content-Type: application/json" \

    -d '{

    "name":"teste",

    "email":"teste@teste.com" ,

    "password":"senha123"

    }' \

    http://0.0.0.0:3000/api/user/register

    ```



    **Resposta Esperada:**



    ```json

    {

      "token": "..."

    }

    ```



*   **Logout de UsuƔrio:**

    ```bash

    curl -X POST \

    -H "Content-Type: application/json" \

    -H "Authorization: Bearer eyJhbGciO..."\

    http://0.0.0.0:3000/api/user/logout

    ```



    **Resposta Esperada:**



    ```json

    {

      "message": "Token invalidado com sucesso."

    }

    ```



## šŸ“ Estrutura de DiretĆ³rios