felipemotarocha / fullstackweek-store

Projeto Full Stack Week 2.0 💻

Este é o repositório oficial do e-commerce desenvolvido durante a Full Stack Week, um evento diferente de tudo que você já viu, com 4 lives de muito conteúdo. Nosso objetivo principal é criar um projeto altamente relevante, utilizando as tecnologias mais modernas e demandadas pelo mercado, a fim de adicionar autoridade ao currículo de desenvolvedor.

Tecnologias Utilizadas 🚀

• React: Uma biblioteca JavaScript popular para construir interfaces de usuário interativas.

• Next.js 13: Um framework React que oferece renderização do lado do servidor (SSR), geração estática (SSG), entre muitos outros recursos.

• Next Auth: Biblioteca para autenticação de usuários com OAuth.

• Postgres: Um sistema de gerenciamento de banco de dados relacional.

• Prisma: Um ORM (Object-Relational Mapping) para Node.js e TypeScript.

• shadcn/ui: Uma biblioteca de componentes de IU reutilizáveis e estilizáveis.

• Tailwind CSS: Um framework CSS que oferece várias classes para utilização já pré-estilizadas.

• API do Stripe: Uma API de pagamento popular para processar pagamentos online de forma segura.

Funcionalidades 📦

• Login com o Google: Permitimos que os usuários façam login usando suas contas do Google para uma experiência de autenticação simplificada.

• Navegação por Categorias: Os usuários podem explorar produtos por categorias, facilitando a busca e a compra.

• Descontos em Produtos: Alguns produtos podem ter descontos especiais, permitindo aos usuários economizar em suas compras.

• Gerenciamento do Carrinho de Compras: Os usuários podem adicionar produtos ao seu carrinho de compras, remover produtos e também modificar a quantidade de um produto no carrinho de compras conforme necessário.

• Pagamento do Pedido com a API do Stripe: Oferecemos uma experiência segura de pagamento online com a integração da API do Stripe, incluindo o uso de webhooks para processar eventos relacionados ao pagamento. Os usuários podem concluir seus pedidos com facilidade e segurança.

Protótipo no Figma 🎨

Você pode visualizar o protótipo do nosso projeto no Figma. Ele oferece uma prévia visual de como a interface do usuário é projetada e como as diferentes funcionalidades são organizadas. Confira o protótipo aqui.

Fique à vontade para explorar e compartilhar suas opiniões sobre o design do projeto!

Contribuições e Colaborações 🤝

Este projeto está totalmente aberto a contribuições. Se você deseja colaborar, fique à vontade para criar pull requests, corrigir bugs, adicionar novos recursos ou aprimorar a documentação. Sua contribuição é valiosa e ajuda a melhorar ainda mais este projeto!

Como Contribuir

1. Faça um fork deste repositório.

2. Crie uma branch para sua contribuição:

    git checkout -b minha-contribuicao

3. Faça suas alterações e adicione commits descritivos (seguindo o Conventional Commits, preferencialmente).

4. Crie um pull request para a branch main deste repositório.

fullstackweek-store's Issues

Adicionar menu lateral para adicionar novo produto no controle de estoque

Construir o menu para adicionar novo produto ao estoque conforme desenvolvido no Figma:

Depende da issue #32

LocalStorage

Para que o localstorage funciona bem precisamos verificar se o window não é undifined então crie um hook useLocalStorage.ts:

import { useEffect, useState } from "react";

export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
  const [value, setValue] = useState<T>(() => {
    // Perform localStorage action

    const jsonValue =
      typeof window !== "undefined" ? localStorage.getItem(key) : "[]";
    if (jsonValue != null) return JSON.parse(jsonValue);

    if (typeof initialValue === "function") {
      return (initialValue as () => T)();
    } else {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as [typeof value, typeof setValue];
}

depois mudifique o carrinho cart.ts:

const [products, setProducts] = useLocalStorage<CartProduct[]>( "@fsw-store/cart-products", [], );

SÓ ISSO SIMPLES

Definir estrutura da tabela `WishList`

• Tabela deve armazenar as listas de desejos dos usuários.
• Um usuário pode ter várias listas de desejos.
• Uma lista de desejos pode ter vários produtos

Status do pedido não está sendo atualizado para PAYMENT_CONFIRMED

Os pedidos não estão atualizando para PAYMENT_CONFIRMED

Adicionar botão de favorito ao produto e inserir na tabela Wishlist

Objetivo:

• Criar botão "⭐ Favorito" no componente produto.
• Adicionar produto a tabela "Wishlist"

Adicionar botão de criação de lista de desejos

A lista de desejos deve ter:

• Nome

format prices

Eu encontrei isso na doc do javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

não precisamos usar nenhuma lib externa.

No nosso ProductItem passamos o nosso {product.totalPrice} e o {product.basePrice}, e se usarmos o intl vai ficar assim:

const formatedTotalPrice = new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
}).format(product.totalPrice);

const formatedBasePrice = new Intl.NumberFormat("BRL", {
style: "currency",
currency: "BRL",
}).format(Number(product.basePrice));

e depois passar apenas a as variaveis no span assim:
{formatedTotalPrice}
{formatedBasePrice

Adicionar botão de lista de desejos no menu lateral

localStorage is not defined

Após a finalização do evento verifiquei que o deploy correspondente aos dois ultimos commits realizados falhou com o erro

ReferenceError: localStorage is not defined
 at __WEBPACK_DEFAULT_EXPORT__ (/vercel/path0/.next/server/chunks/240.js:1:14186)

No momento da build ao gerar as páginas estáticas ocorre o erro pois o objeto localStorage ainda é undefined.

Correção:

No arquivo src/providers/cart.tsx:

Alterar o valor inicial do state products. Trocar de

const [products, setProducts] = useState<CartProduct[]>(
    JSON.parse(localStorage.getItem("@fsw-store/cart-products") || "[]")
  );

Para:

const [products, setProducts] = useState<CartProduct[]>([]);

Adicionar um useEffect com array de dependencias vazio, dessa forma só executará uma vez no carregamento da página:

useEffect(() => {
    setProducts(
      JSON.parse(localStorage.getItem("@fsw-store/cart-products") || "[]"),
    );
  }, []);

A solução acima já foi testada em fork deste repositório.

Criar tabela `WishList`

Com estrutura definida aqui #20

Próximas Funcionalidades

[CORE] Sistema de Busca

• Usuário deve conseguir buscar produtos por nome/categoria
• Ver: https://www.prisma.io/docs/concepts/components/prisma-client/full-text-search#postgresql

Lista de Desejos

• Usuário deve conseguir adicionar produtos à uma lista de desejos
• [FUTURO] Usuário pode criar várias listas (colocar nomes etc.)

Sistema de Avaliações

• Usuário deve conseguir avaliar um produto (nota de 1 a 5)
• Outros usuários devem conseguir visualizar as avaliações de um produto

Sistema de Comentários

• Usuário deve conseguir comentar em um produto
• Outros usuários podem marcar um comentário com "Gostei" ou "Não gostei"
• [FUTURO] Usuário deve conseguir anexar foto ao comentário

Cálculo de Frete

• Usuário deve conseguir calcular o preço e tempo do frete
• Origem dos produtos será única (São Paulo por ex.)

Cupom de Desconto

• Cupons de desconto podem ser cadastrados no dashboard
• Usuário deve conseguir usar cupons de desconto

Perfumarias

• Animações de fade-in, slide-in etc.
• Dark/light mode
• Newsletter (Resend)

Adicionar Tela da Lista de produtos do Estoque

Contruir a estrutura da lista de produtos de estoque conforme Figma

getServerSession (Não passa o user ID correto)

A sessão não está pegando o id correto do usuário, e os pedidos estão apenas vindo o de todos os usuários.

Mesmo deslogado o pedidos aparecem na página

Adicionar Tela do Dashbord de Controle de Estoque do Admin

Construir a tela de dashboard de controle de estoque conforme desenvolvido no Figma:

Adicionar tela de visualização de listas de desejos

• Essa tela deve exibir todas as listas de desejos do usuário.
• Criar componente WishListItem

Garantir que um produto possa ser adicionado a uma lista de desejos

• Quando o usuário visualizar um produto, ele deve ter a opção de adicioná-lo a uma lista de desejo.
• Ao clicar no botão "Adicionar a lista de desejo", abrir um Dialog com as listas do usuário.
• Ao clicar em uma lista, adicionar o produto à ela
• Exibir uma mensagem de sucesso ao adicionar
• Um produto não pode ser adicionado a mesma lista mais de uma vez