next saas stripe starter

Próximo SaaS Stripe Starter

Comece a toda velocidade com o iniciante do SaaS!

Introdução · Instalação · Stack Tech + Recursos · Autor · Créditos

Introdução

Capacite seu próximo projeto com a pilha de Next.JS 14, PRISMA, NEON, AUTH.JS V5, reenviam, reejam email, shadcn/ui e stripe.
Tudo perfeitamente integrado ao iniciante do SaaS para acelerar sua jornada de desenvolvimento e SaaS.

Instalação

Clone e crie este repositório localmente com o seguinte comando:

npx create-next-app my-saas-project --example " https://github.com/mickasmt/next-saas-stripe-starter "

Ou, implante com o vercel:

Passos

1. Instale dependências usando o PNPM:

pnpm install

2. Cópia .env.example para .env.local e atualize as variáveis.

cp .env.example .env.local

3. Inicie o servidor de desenvolvimento:

pnpm run dev

Observação

Eu uso o pacote npm-check-updates para atualizar este projeto.

Use este comando para atualizar seu projeto: ncu -i --format group

Roteiro

• Atualize Eslint para V9
• Adicione as assinaturas de reenvio para o sucesso

Pilha de tecnologia + Recursos

SaaS-Starter-Demo.mp4

Estruturas

• Next.JS - React Framework para a construção de aplicativos de desempenho com a melhor experiência do desenvolvedor
• Auth.js - Lidar com a autenticação do usuário com facilidade com provedores como Google, Twitter, Github, etc.
• PRISMA-Typescript-primeiro ORM para Node.js
• Reação email - estrutura de email versátil para desenvolvimento de email eficiente e flexível

Plataformas

• VERCEL - Visualizar e implantar facilmente alterações com o Git
• Real
• Néon - Postgres sem servidor com autocaling, ramificação, armazenamento sem fundo e generosa camada gratuita.

Ui

• Tailwind CSS-Utility-primeiro CSS Framework para o desenvolvimento rápido da interface do usuário
• Shadcn/UI-componentes reutilizáveis construídos usando Radix UI e Tailwind CSS
• Framer Motion - Biblioteca de movimento para reagir a componentes animados com facilidade
• Lucide-Ícones lindamente simples e perfeitos para pixels
• next/font - Otimize fontes personalizadas e remova solicitações de rede externas para melhor desempenho
• ImageResponse - gerar imagens de gráficos abertos dinâmicos na borda

Ganchos e utilitários

• useIntersectionObserver - React Hook para observar quando um elemento entra ou sai da visualização
• useLocalStorage - persistir dados no armazenamento local do navegador
• useScroll - react gancho para observar a posição de rolagem (exemplo)
• nFormatter - Formato números com sufixos como 1.2k ou 1.2M
• capitalize - capitalize a primeira letra de uma corda
• truncate - truncar uma corda para um comprimento especificado
• use-debounce -Debounce uma chamada de função / atualização de estado

Qualidade de código

• TypeScript-verificador de tipo estático para obter o tipo de adetência de ponta a ponta
• Formatador de código mais bonito - Opinacionado para o estilo de código consistente
• Eslint - Linter flugable para Next.js e TypeScript

Variado

• VERCEL Analytics-Rastreie visitantes exclusivos, visualizações de página e muito mais de uma maneira amiga da privacidade

Autor

Criado por @miickasmt em 2023, lançado sob a licença do MIT.

Créditos

Este projeto foi inspirado pela taxonomia de Shadcn, precedente de Steven Tey e 13 ai SaaS de Antonio Erdeljac.

• Shadcn (@shadcn)
• Steven Tey (@steventey)
• Antonio Erdeljac (@ytcodeantonio)