Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/galembeck/capputeeno
This repository contains the solution to Rocketseat's frontend challenge called "capputeeno", which is an e-commerce page.
https://github.com/galembeck/capputeeno
graphql nextjs nextjs13 styled-components tanstack-react-query typescript
Last synced: 13 days ago
JSON representation
This repository contains the solution to Rocketseat's frontend challenge called "capputeeno", which is an e-commerce page.
- Host: GitHub
- URL: https://github.com/galembeck/capputeeno
- Owner: galembeck
- Created: 2023-12-08T01:57:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-12T00:53:23.000Z (about 1 year ago)
- Last Synced: 2024-12-05T21:09:24.929Z (2 months ago)
- Topics: graphql, nextjs, nextjs13, styled-components, tanstack-react-query, typescript
- Language: TypeScript
- Homepage:
- Size: 8.53 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 Capputeeno
Bem-vindo(a). Este é o repositório que contém a solução para o desafio frontend da [Rocketseat´s](https://www.rocketseat.com.br/).
O objetivo deste desafio é avaliar as habilidades de programação. Ainda há melhorias que podem sem implementadas neste projeto, as quais pretendo, futuramente, adicionar com o intuito de estudar as linguagens e ferramentas aqui utilizadas.
[](https://discord.gg/rocketseat)
Happy hacking!
> ⚠️ **É importante ressaltar que este projeto/repositório se encontra em constante atualização.**
## 🧠 Contexto
O desafio consistia em implementar um e-commerce para venda de canecas e camisetas que deveriam ter as seguintes funcionalidades:
- [x] Catálogo de produtos com paginação
- [x] Filtragem produtos por categoria
- [x] Busca por nome do produto
- [x] Adicionar e remover produtos do carrinho
- [x] Finalizar compra
## 🤝 Colaboradores
Pedro Galembeck
Fernanda Kipper
Rocketseat
## 📋 Instruções
Para utilizar o projeto acima, basta seguir as instruções abaixo.
- Siga esse [protótipo](https://www.figma.com/file/rET9F2CeUEJdiVN7JRu993/E-commerce---capputeeno?node-id=680%3A6449)
- Utilize Next.js e Typescript
- Faça a estilização com styled-components
- Utilize o local storage para gerenciar o carrinho
- Por favor, inclua no README as instruções de instalação do projeto
- Sinta-se livre para incluir quaisquer observações
- Consuma nossa **API GraphQL** rodando o comando `yarn start` na pasta `api`
## ✔️ Critérios de Avaliação
Além dos requisitos levantados acima, os seguintes critérios também eram solicitados pelos recrutadores:
- Gerenciamento de estado
- Componentização
- Responsividade
- Preocupação com usabilidade
- Preocupação com acessibilidade
- Testes e2e
- Padrões de código
- Padrão de commits (_conventional_)
## 😎 Adicionais
- Fazer deploy na vercel ou em outro local de sua preferência e disponibilizar um link de visualização, se necessário utilize esse servidor para a API GraphQL: https://rocketseat-frontend-challenge.herokuapp.com/
- Testes unitários
- Utilização de cache do Next.js
---
## 🖥️ Instalação
### Capputeeno (frontend)
1. Clone este repositório:
```bash
git clone https://github.com/LDNzera/capputeeno.git
```
1. Abra a pasta do projeto (_capputeeno_):
```bash
cd capputeeno
```
3. Instale as dependências utilizadas:
```bash
npm install
```
3. Inicie o projeto:
```bash
npm run dev
```
### API
2. Abra a pasta da API utilizada (_api_):
```bash
cd capputeeno
cd api
```
3. Instale as dependências utilizadas:
```bash
npm install
```
3. Inicie a API:
```bash
npm start
```