Ecommerce-admin

Objetivo    |    Features    |    Demonstração    |    Tecnologias    |    Documentação    |    License    |    Autor

📷 Layout

Screenshot:

🎯 Objetivo

O objetivo é a criação de um site de ecommerce para administradores onde pode ser possível gerenciar todas as apis do site, isso inclui a criação, deleção, visualização, arquivamento e disponibilidade. O site gerenciado pode ser encontrado no repositório Ecommerce-store.

O projeto de Ecommerce-admin possui aplicação simples e prática para gerenciar todas as apis que incluem Stores(Lojas), Billboards(Quadros), Category(Categoria), Size(Tamanho), Color(Cor), Product(Produto), Image(Imagem), Order(Pedido), OrderItem(Item do pedido) e também consiste em gerenciar o sita da loja principal incluindo o pagamento que é atualizado na aba de pedidos, nele é possível encontrar o item do pedido, celular, Endereço, Preço do produto e se foi pago

✨ Features

• Autenticação com Clerk
• Upload de imagens usando Cloudinary
• Checkout de pagamentos usando o Stripe
• Banco de dados usando o PlanetScale para gravar o banco dados
• É possível criar, deletar, atualizar os models de: Quadros, Categorias, Tamanhos, Cores, Produtos e itens do pedido para a loja
• Geração de apis para todos os models: Billboard, Categories, Size, Colors, Product and Order
• Atualização de pedidos e itens do pedido na hora do pagamento: Endereço, telefone, celular
• Disponibilidade e exibição das apis dos models para site externos
• Métodos de requisição HTTP: POST, GET, PATCH, DELETE
• Layout de tabela para melhor visualização dos itens
• Site responsivo para tablet e mobile
• Dark Mode

💻 Demonstração:

E-commerce.GMS.-.Google.Chrome.2023-12-28.12-56-25.mp4

🚴🏻‍♂️ Rodar o projeto

Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git. Com o Git instalado, em seu terminal execute o seguinte comando:

git clone https://github.com/GabrielMedradoS/Ecommerce-admin.git

Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o node.js, que vem acompanhado do npm.

Nesse projeto foi utilizado o pnpm, que busca economizar espaço em disco e acelerar a instalação de pacotes devido à sua abordagem de armazenamento de dependências compartilhado.

Instale as dependências usando pnpm ou npm:

# pnpm
pnpm install

# npm
npm install

Baixe a CLI Stripe e faça login em seu terminal usando o seguinte comando:

stripe login

Encaminhe eventos ao seu webhook:

stripe listen --forward-to localhost:3000/api/webhook

Acione eventos com a CLI:

stripe trigger payment_intent.succeeded

Crie o arquivo .env com as variáveis de ambiente necessárias:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="Next Clerk Key"
CLERK_SECRET_KEY="Clerk 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="Seu Banco de dados, no caso estou usando PlanetScale"
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="Cloudinary Key"
STRIPE_KEY="Sua chave secreta do Stripe"
FRONTEND_STORE_URL="URL principal da sua loja"
STRIPE_WEBHOOK_SECRET="Webhook secret key disponibilizada pelo stripe"

Rode o comando a seguir para gerar o client do Prisma:

# pnpm
pnpm prisma generate

# npm
npm prisma generate

Execute o comando para enviar ao PlanetScale ou outro banco:

# pnpm
pnpm prisma db push

# npm
npm prisma db push

Execute o projeto:

# pnpm
pnpm run dev

# npm
npm run dev

O servidor estará disponível em http://localhost:3000.

🛠 Tecnologias

📜 documentação

Dependencies

{
  "name": "e-commerce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.27.2",
    "@hookform/resolvers": "^3.3.2",
    "@prisma/client": "^5.6.0",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-table": "^8.11.0",
    "axios": "^1.6.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "date-fns": "^3.0.0",
    "lucide-react": "^0.294.0",
    "next": "14.0.3",
    "next-cloudinary": "^5.11.0",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "react-hot-toast": "^2.4.1",
    "recharts": "^2.10.3",
    "stripe": "^14.10.0",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "prisma": "^5.6.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

• Next.js 13 | documentation
• Shadcn/ui | documentation
• Tailwind | documentation
• Clerk Authentication
• PlanetScale | documentation
• Stripe | documentation -> ao usar o Webhooks é preciso Baixar a CLI do Stripe
• Prisma.io | documentation
• Next Cloudinary
• Cloudinary | documentation
• Zustand | documentation
• Zod | documentation
• React Hot Toast
• Axios | documentation
• React Hook Form
• Date-fns | documentation
• Recharts | documentation

💡 Como contribuir

• Faça um fork desse repositório;
• Crie um branch para a sua feature: git checkout -b minha-feature;
• Faça um commit com suas alterações: git commit -m 'feat: Minha nova feature';
• Faça um push para o seu branch: git push origin minha-feature;
• Faça um pull request com sua feature;

Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma issue ou entre em contato comigo.

⚖️ License

This project is under the MIT license. See the archive LICENSE for more details.

✍🏾 Autor

Gabriel Medrado

Rhuan Gonzaga