comércio eletrônico-admin-nextjs
O site de demonstração não funciona mais porque o PlanetScale retirou o plano gratuito.
Data de início: 26 de julho de 2023.
Descrição
O painel de administração de comércio eletrônico com integração Stripe é um aplicativo da web robusto projetado para agilizar e aprimorar o gerenciamento de um site de comércio eletrônico. Desenvolvido usando tecnologias de ponta como Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, zustand, clerk auth, Cloudinary e Stripe, este painel abrangente fornece aos administradores um kit de ferramentas poderoso para supervisionar e otimizar vários aspectos do loja on-line.
Principais recursos
- O painel de administração permite que os administradores do site criem, atualizem e excluam informações da loja.
- Os administradores podem gerenciar com eficiência os outdoors ou banners que aparecem na página inicial do site. Eles podem fazer upload, atualizar e remover banners promocionais para atrair clientes e destacar ofertas ou vendas em andamento.
- Com o painel de administração, gerenciar categorias, tamanhos e cores de produtos torna-se muito fácil. Os administradores podem adicionar, editar ou excluir categorias, tamanhos e cores, permitindo que o site organize e exiba produtos com eficiência.
- Para permitir uma comunicação tranquila entre o aplicativo web front-end e o back-end, o painel incorpora rotas de API. Isso garante que as informações do produto sejam facilmente buscadas e exibidas no site voltado para o cliente.
- O painel de administração utiliza autenticação Clerk para autenticação segura, garantindo que apenas pessoal autorizado possa acessar e gerenciar informações confidenciais.
- Com a integração Planet Scale e Prisma, o aplicativo se beneficia de um banco de dados robusto e escalável, capaz de lidar com estoques crescentes de produtos e aumentar o tráfego do site.
- O coração de qualquer site de comércio eletrônico está em seus recursos de gerenciamento de produtos. O painel de administração permite que os administradores adicionem novos produtos, atualizem os existentes, arquivem produtos fora de estoque, marquem produtos como produtos em destaque e removam produtos que não estão mais disponíveis. Eles podem definir detalhes do produto, como nome, categoria, preço, imagens e outros atributos específicos do produto.
- O gerenciamento eficiente de pedidos é crucial para qualquer site de comércio eletrônico. O painel fornece ferramentas abrangentes para visualizar, processar e gerenciar pedidos recebidos.
- Integre perfeitamente o Stripe como gateway de pagamento, permitindo que os clientes façam pagamentos online seguros e convenientes. Os administradores podem visualizar o histórico de transações e garantir uma experiência de checkout perfeita para os compradores.
Testando o Projeto
Para testar o projeto, baixe o arquivo zip e abra-o no editor de sua preferência. Em seguida, execute npm install
no terminal para instalar as dependências.
Depois de instalar as dependências necessárias, você terá que criar um arquivo .env
na raiz da pasta do seu projeto. As variáveis de ambiente necessárias são as seguintes.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
Siga as etapas da documentação oficial para Clerk, Planet Scale, Cloudinary e Stripe para obter os valores da variável de ambiente. Após concluir as etapas acima, execute npm run dev
para testar o projeto.
Se você não quiser passar por todos os problemas, você sempre pode testar o site de demonstração deste projeto.