next tailwind amazona

Construa o site de comércio eletrônico NextJS como a Amazon

• Tecnologia: NextJs 13, Próximo Auth 4
• UI: Tailwind, Chart.js, React-CARTJS
• DB: MongoDB, Mongoose
• Pagamento: PayPal, Stripe
• Hosting de conteúdo: Cloudinary
• Implantar: Github, Vercel, MongoDB Atlas

Recursos

• Vídeo do YouTube: https://youtu.be/_iblyr5mrza
• Site de demonstração: https://next-tailwind-amazona.vercel.app
• Código fonte: https://github.com/basir/next-tailwind-amazona
• Curso completo: basir.thinkific.com

O que você aprenderá

• NextJs Basics, como a criação de projetos, navegando entre páginas e busca de dados
• NextJS tópicos avançados como roteamento dinâmico, otimização de imagens, SSG e SSR
• Estrutura CSS do Tailwind CSS para criar um site responsivo usando tema, animação e carrossel personalizados
• ReactJs, incluindo componentes em decomposição, API de contexto e ganchos
• Próximo pacote de autenticação para autenticar clientes e usuários administrativos
• MongoDB e Mongoose para salvar e recuperar dados como produtos, pedidos e usuários
• API do desenvolvedor do PayPal para fazer o pagamento online
• Implante aplicativos da Web em servidores como Vercel e Netlify

Curso completo

Obtenha este curso com 90% de desconto no ThinkiC: https://basir.thinkific.com/courses/build-ecommerce-website-pos-mazon-by-next-js?coupon=save90

Execute localmente

1. Repo Clone

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. Crie arquivo .env

   • duplicado .env.exemplo e renomeie -o para .env

3. Configure o MongoDB

   • MongoDB local
   • Instale a partir daqui
   • In .env Atualização de arquivo mongodb_uri = mongodb: // localhost/amazona
   • Ou Atlas Cloud MongoDB
   • Crie banco de dados em https://cloud.mongodb.com
   • In .env atualização

4. Instale e execute

     npm install
     npm run dev

5. Dados de sementes

   • Execute isso no navegador: http: // localhost: 5000/api/semente
   • Ele retorna email e senha do administrador e 6 produtos de amostra

6. Login do administrador

   • Execute http: // localhost: 3000/login
   • Digite email e senha do administrador e clique em Login

Lições

1. Introdução
2. Instalar ferramentas
3. Crie o próximo aplicativo
4. Publique no Github
5. Crie layout do site
   1. Crie componente de layout
   2. Adicione o cabeçalho
   3. Adicione a seção principal
   4. Adicione rodapé
   5. Adicione as aulas do Tailwind
6. Listar produtos
   1. Adicionar data.js
   2. Adicione imagens
   3. renderizar produtos
7. Crie detalhes do produto
   1. Crie a página do produto
   2. Crie 3 colunas
   3. Mostre a imagem na primeira coluna
   4. Mostrar informações do produto na segunda coluna
   5. Mostrar add à ação do carrinho na terceira coluna
   6. Adicione estilos
8. Manusear add to Cart
   1. Defina o contexto de reação
   2. Defina o estado dos itens do carrinho
   3. Crie Addd to Cart Action
   4. Adicione redutor
   5. criar provedor de lojas
   6. manuseio Adicionar ao botão do carrinho
9. Crie a página do carrinho
   1. Crie cart.js
   2. Use o contexto para obter itens de carrinho
   3. Liste itens em itens de carrinho
   4. Redirecionar para a tela do carrinho após adicionar ao carrinho
10. Atualizar a quantidade no carrinho
    1. Adicionar caixa Selecionar para quantidade
    2. manusear a alteração da caixa selecionada
11. Salve itens de carrinho
    1. Instale o pacote JS-Cookie
    2. Salvar e recuperar itens de carrinho em cookies
12. Crie formulário de login
    1. Instale o formulário do gancho do React
    2. Crie caixas de entrada
    3. Adicione o botão de login
13. Conecte -se ao MongoDB
    1. Instale o Mongoose
    2. Instale o MongoDB ou use o MongoDB Atlas
    3. Salvar URL de conexão no arquivo .env
    4. Crie arquivo de db utils
    5. Crie usuários de amostra
14. Crie API de login
    1. Instale a próxima-autha
    2. Crie Nextauth.js
    3. implementar a assinatura
    4. Use a assinatura no formulário de login
15. Adicionar menu do usuário
    1. Verifique a autenticação do usuário
    2. Instale a cabeça sem cabeça
    3. Mostrar menu do usuário
16. Crie tela de remessa
    1. Exibir campos de endereço
    2. salvar endereço no contexto
17. Criar tela do método de pagamento
    1. Métodos de pagamento por disputa
    2. Salvar o método de pagamento no contexto
18. Produtos de amostra de sementes
    1. Crie modelo de produto em Mongoose
    2. Insira produtos de amostra em MongoDB
19. Carregar produtos MongoDB
    1. Carregue produtos na página inicial do MongoDB
    2. Carregue produtos na página do produto do MongoDB
    3. Use a API do produto para verificar a contagem de estoque em adição ao carrinho
20. Crie a tela do pedido do local
    1. Exibir endereço de envio
    2. Exibir método de pagamento
    3. Exibir itens de pedido
    4. IMPRESSÃO CRIA ORDEM
21. Crie tela de pedido
    1. Implementar a API de back -end para detalhes do pedido
    2. Carregar os dados do pedido do back -end
    3. Exibir detalhes do pedido
22. Crie tela de registro
    1. Adicione a API de inscrição
    2. Crie a página de registro
    3. Ligue para a API no formulário Enviar
23. Ordem de pagamento por PayPal
    1. Adicione o botão PayPal
    2. lidar com o pagamento
    3. Crie API de back -end
    4. Atualizar o estado do pedido
24. Criar tela de histórico de pedidos
    1. Crie minha API de pedido
    2. Crie o componente do histórico de pedidos
    3. Pegue ordens e exibi -los
25. Publique no vercel
    1. Crie uma conta vercel
    2. Conecte -se ao GitHub
    3. Defina a próxima autenticação e db de MongoDB em Env vars
    4. Empurre o código para o github
26. Atualizar perfil de usuário
    1. Crie tela de perfil
    2. Mostre informações do usuário
    3. lidar com as informações do usuário de atualização
27. Crie painel de administração
    1. Crie menu administrador
    2. Crie tela do painel
    3. Implementar API de resumo do administrador
28. Listar pedidos para administrador
    1. Crie a página de pedidos
    2. Crie pedidos API
    3. Use API na página
29. Entregar o pedido para administrador
    1. Criar Deliver API
    2. Adicione o botão Deliver
    3. implementar o manipulador de cliques
30. Listar produtos para administrador
    1. Crie a página de produtos
    2. Crie API de produtos
    3. Use API na página
31. Crie a página de edição do produto
    1. Crie página de edição
    2. Crie API para o produto
    3. mostrar dados do produto em forma
32. Carregue a imagem do produto
    1. Crie uma conta em nuvem
    2. Obtenha chaves em nuvem
    3. Crie API de upload
    4. Carregar arquivos na página de edição
33. Criar e excluir produtos
    1. Adicionar o botão Criar produto
    2. Construa nova API de produto
    3. Adicionar manipulador para excluir
    4. Implementar API de exclusão
34. Liste usuários para administrador
    1. Crie a página de usuários
    2. Crie API de usuários
    3. Use API na página
35. Adicione o carrossel
    1. criar produtos em destaque
    2. Dados do carrossel de alimentação
    3. mostre produtos populares
36. Crie a página de pesquisa
    1. criar filtros
    2. Listar produtos
    3. Mostrar filtros