mayromyller / dev-anotar

DevAnotar

Descrição Breve

Uma aplicação FullStack simples, que utiliza autenticação com Kinde Auth, Supabase, Shadcn/ui, TailwindCSS, Stripe (pagamento), NextJS e Prisma ORM.

Índice

1. Motivação
2. Demonstração
3. Funcionalidades
4. Instalação
5. Como Usar
6. Configurar .env
7. Stack
8. Estrutura do Projeto
9. Contribuição
10. Licença
11. Contato
12. Agradecimentos

Motivação

Este projeto foi criado para aprimorar conhecimentos em desenvolvimento de aplicações fullstack, integrando tecnologias como meio de pagamento (Stripe), ORM (Prisma) e banco de dados (Supabase). Ele utiliza diversas tecnologias de ponta, amplamente adotadas por empresas que buscam escalar seus produtos, tornando-o uma base valiosa para a criação de projetos maiores e mais robustos.

Demonstração

• Página inicial da aplicação ao fazer login:

• Página de configurações de perfil:

• Criar uma nova nota:

Funcionalidades

• Editar perfil e preferencias
• Alterar cores do tema da aplicação
• Criar notas
• Editar notas
• Deletar notas
• Listar notas
• Autenticação com Kinde
• Integração com pagamento para poder criar notas

Instalação

Pré-requisitos

• Node.js versão 18 ou superior
• Conta no Kinde, Supabase e Stripe

Passos para Instalação

1. Clone o repositório:

   https://github.com/mayromyller/dev-anotar.git
   cd dev-anotar

2. Instale as dependências:

   pnpm install

   ou outro gerenciador de pacote de sua preferência.

3. Configure as variáveis de ambiente. Veja a seção Configurar .env para mais detalhes.

Como Usar

1. Execute o servidor de desenvolvimento:

   pnpm dev

2. Abra a aplicação em http://localhost:3000.

3. Faça autenticação e comece a utilizar.

Configurar .env

Crie um arquivo .env na raiz do projeto e adicione as seguintes variáveis:

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=

KINDE_SITE_URL=
KINDE_POST_LOGOUT_REDIRECT_URL=
KINDE_POST_LOGIN_REDIRECT_URL=

DATABASE_URL=

DIRECT_URL=

STRIPE_SECRET_KEY=

STRIPE_PRICE_ID=
STRIPE_WEBHOOK_SECRET=

Stack

• Frontend: NextJS 14, TailwindCSS, Shadcn/ui
• Backend: Node.js, Prisma, Supabase
• Autenticação: Kinde Auth
• Pagamento: Stripe

Estrutura do Projeto

.
├── prisma
│   └── schema.prisma
├── src
│   ├── app
│   │   ├── payment
│   │   │   ├── success.tsx
│   │   │   └── cancelled.tsx
│   │   ├── dashboard
│   │   │   ├── billing.tsx
│   │   │   ├── index.tsx
│   │   ├── new
│   │   │   ├── [id].tsx
│   │   │   └── index.tsx
│   │   └── settings.tsx
│   ├── components
│   │   └── ui
│   └── ...
└── ...

Contribuição

Contribuições são bem-vindas! Para contribuir, siga estas etapas:

1. Abra uma issue para discutir o que você gostaria de mudar.
2. Faça um fork do repositório.
3. Crie uma nova branch (git checkout -b feature/descrição-da-feature).
4. Faça as alterações desejadas.
5. Envie suas mudanças (git commit -am 'Adiciona nova feature').
6. Faça um push para a branch (git push origin feature/descrição-da-feature).
7. Crie um novo Pull Request.

Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE para mais detalhes.

Contato

• LinkedIn
• GitHub
• Email: [email protected]