edinaldofcs/Eletronics-Ecommerce-front

ELETRONICS - ECOMMERCE

Ecommerce de equipamentos de informática

SOBRE

O projeto Ecommerce eletronics é uma aplicação criada em Next.js que consome uma REST Api feita com NestJS, com rotas públicas, rotas autenticadas e integração com sistema de pagamentos em modo de teste.

node
npm ou yarn

INSTALAÇÃO

Clonar repositório front-end

git clone https://github.com/leonardoxavier01/ecommerce.git

Instalar as dependências

npm install

Na raiz do projeto, crie um arquivo .env e adicione a váriável que fara a coneção com o a API

NEXT_PUBLIC_API_URL=https://www.edinaldofcs.com

Após estes passos, você poderá testar a aplicação, com o comando

npm run dev

OBS: Para ver o projeto da API, Clique aqui

Acessando o projeto

Caso opte por não clonar o repositório, você pode acessar a aplicação diretamente, pelo site https://eletronics.vercel.app/

Página inicial

Ao acessar a aplicação, a página inicial consta com a lista de categorias, bem como os 5 produtos mais vendidos.

• para ver detalhes dos produtos, ou os produtos de determinada categoria, basta clicar sobre um ítem:

Cadastro

Para conseguir realizar alguma compra, ou colocar ítens no carrinho, primeiramente é necessário fazer um cadastro e realizar o login

Cadastro

Login

Carrinho

Uma vez feito o login, você poderá adicionar um produto ao carrinho OBS: Ao colocar um produto no carrinho, caso você efetue o login em outro dispositivo, o ítem irá aparecer no seu carrinho.

Você pode aumentar ou diminuir a quantidade de ítens, além de remover o ítem completamente

Finalizando compra

Para finalizar sua compra, você deve clicar em Ir para o Pagamento. Feito isso, você será redirecionado para o Checkout da Stripe. Não se preocupe, pois a ferramenta está em modo de teste

Para efetuar a compra, utilize as seguintes informações

E-mail: Qualquer email válido

Dados do cartão: 4242 4242 4242 4242

MM / AA: 01/24 (ou qualquer data posterior ao dia atual)

CVC: 123 (ou quais quer 3 números)

Nome no cartão: Qualquer nome

Após a confirmação da compra, você será redirecionado para a pgina de sucesso

Note que seu carrinho ficará vazio :)

Caso ocorra alguma falha, você será redirecionado para a página de falha :(

Obrigado por Chegar até aqui

Tecnologias utilizadas

• Nest.js - Fremework React
• Typescript Linguagem tipada
• Tailwind - framework CSS
• Radix - biblioteca de componentes de interface
• React-number-format - Biblioteca de formatadores de entrada/números