Live Project Site / Site do Projeto ao vivo
kommerce.mp4
Kommerce is a project built with the intention of putting my skills into practice by developing an e-commerce virtual store application. For this purpose, the application uses the React ecosystem (with Next.js) and the CommerceJS and Stripe external APIs, in order to facilitate the development process.
More details about the project and the creation process can be found here.
- Navigation and selection of products to compose shopping cart;
- Add products to cart (by quantity);
- Update products' quantities;
- Remove products;
- Clear cart;
- Registration of user information for shipping;
- Registration of payment information;
- Transaction completion status feedback;
- HTML5
- Next JS (React Framework)
- Chakra UI (React Library for creating User Interfaces and Design Systems)
- CommerceJS (API focused on managing e-commerce services)
- Stripe (API focused on payments, transfers and management of online operations)
Prerequisites: npm / yarn
# Clone repository
git clone [email protected]:KlevertonOliveira/kommerce.git
# Enter the project folder
cd kommerce
# Install dependencies
yarn install
or
npm install
# Extra steps necessary to run the project:
## Create an account at the CommerceJS website in order to get a unique Api key (public and sandbox).
## Create an account at the Stripe website in order to get a unique Api key.
## Create a .env file and fill it following the model defined at .env.example using the Api keys obtained previously;
## At CommerceJS, it'll be necessary to register some products in order be able to use them inside the application.
# Run the project
yarn dev
or
npm run devJosé Kleverton Yvens Oliveira
https://www.linkedin.com/in/klevertonoliveira/
Kommerce é um projeto construído com o intuito de colocar em prática minhas habilidades ao desenvolver uma aplicação de loja virtual de comércio eletrônico. A aplicação utiliza, para isso, o ecossistema React (Next.js) e as APIs externas CommerceJS e Stripe, em vista a facilitar o processo de desenvolvimento.
Mais detalhes sobre o projeto e o processo de criação podem ser encontrados aqui.
- Navegação e seleção de produtos para composição do carrinho de compras;
- Adição de produtos por quantidades;
- Atualização de quantidades de produtos e gerenciamento do carrinho de compras;
- Remoção de produtos;
- Cadastro de informações do usuário para envio dos produtos;
- Cadastro de informações para realização do pagamento;
- Notificação/Feedback do status de conclusão da transação;
- HTML5
- Next JS (React Framework)
- Chakra UI (Biblioteca React para a criação de interfaces de usuário e Design Systems)
- CommerceJS (API com foco no gerenciamento de serviços de comércio eletrônico)
- Stripe (API centrada em pagamentos, repasses e gerenciamento de operações online)
Pré-requisitos: npm / yarn
# Clonar repositório
git clone [email protected]:KlevertonOliveira/kommerce.git
# Entrar na pasta do projeto
cd kommerce
# Instalar dependências
yarn install
ou
npm install
# Configurações extras necessárias para execução do projeto:
## Criar uma conta no website da CommerceJS para obter uma chave de API única (public e sandbox).
## Criar uma conta no website da Stripe para obter uma chave de API única.
## Criar um arquivo .env e preenchê-lo conforme o arquivo .env.example usando as chaves de API obtidas anteriormente;
## No site da CommerceJS, é necessário realizar o cadastro de alguns produtos para a utilização dos mesmos dentro da aplicação.
# Executar o projeto
yarn dev
ou
npm run devJosé Kleverton Yvens Oliveira