fesanto/ecommerce

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

ecommerce's Issues

Assistir o vídeo e criar o start do projeto

Criar Layout

Acho que você poderia incluir nessa PR, um component the layout para você incluir todos os components/items/elementos que deve ser carregados em todas as páginas.

https://www.youtube.com/watch?v=DGn25s42NvQ

Originally posted by @nathpaiva in #7 (comment)

Criar o componente de `Navegação` do Footer

história de usuário

Como desenvolvedores queremos ter um componente Navigation para separar o menu de navegação do footer.

critério de aceitação

• O componente deve ser criado dentro da pasta components/Footer
• O componente deve receber um titulo e o titulo deve ser uma string
• O componente deve receber um array de links, e esse array precisa conter objetos, cada objeto precisa ter uma description e um path

definição de feito

• ao acessar o footer devemos ter os menus:
• Get in touch
• Connections
• Earnings
• Account

Criar componente `ComponentsProvider`

história de usuário

Como desenvolvederes queremos ter um componente ComponentsProvider para distribuir o theme da aplicação para todos os componentes.

critério de aceitação

• dentro de components precisa ser criado um novo diretório ComponentsProvider
• no diretório ComponentsProvider precisa ser criado um arquivo ComponentsProvider/index.ts e outro aquivo ComponentsProvider/ComponentsProvider.tsx
• no arquivo ComponentsProvider.tsx deve ser importado o ThemeProvider do styled-components. Esse componente deve ser exportado "named export".
• o ThemeProvider deve ser o container de ComponentsProvider
• deve ser criado um objeto theme, com os valores definidos no figma, colors e font.
• dentro the ThemeProvider devemos receber como props o children.
• dentro the ThemeProvider devemos ter o reset css da aplicação, criado com o createglobalstyle
• no arquivo ComponentsProvider/index.ts deve-se exportar todos os items criados dentro de ComponentsProvider/ComponentsProvider.tsx
• no arquivo comopnents/index.ts deve-se exportar todos os items criados dentro de ComponentsProvider/index.ts
• adicionar o novo component ComponentsProvider em pages/_app.tsx.

definição de feito

• ao acessar a aplicação devemos continuar navegando corretamente entre as páginas: home e components.

referencias

Create a declaration file

Configurar o styled components

Criar página estática

história de usuário

Como desenvolvedores queremos ter uma página estática chamada components, essa página será usar para poder ver todos os componentes que estamos criando na aplicação.

critério de aceitação

• o arquivo para essa nova página deve se chamar componetns.tsx
• ela deve ter um texto dummy

definição de feito

• Ao acessar a rota /components nós devemos conseguir ver o texto dummy

referencias

Pages

Criar componente `Header`

história de usuário

Como desenvolvederes queremos ter um componente Header para poder criar uma navegação básica para aplicação.

critério de aceitação

• dentro de components precisa ser criado um novo diretório Header
• no diretório Header precisa ser criado um arquivo Header/index.ts e outro aquivo Header/Header.tsx
• no arquivo Header.tsx deve ser criada uma navegação simples, levando para / (que levara para a Home page) e /components (que levara para Components page). Esse componente deve ser exportado "named export"
• no arquivo Header/index.ts deve-se exportar todos os items criados dentro de Header/Header.tsx
• no arquivo components/index.ts deve-se exportar todos os items criados dentro de Header/index.ts
• adicionar o novo component Header em pages/index.tsx e pages/components.tsx

definição de feito

• ao acessar a aplicação devemos ver o novo header criado nas páginas home e components.
• ao clicar no link home ou components deve-se acessar as respectivas páginas.

referencias

Next Link
Named vs Default export

Criar componente `Header`

história de usuário

Como desenvolvederes queremos ter um componente Header para ter a navegação principal do site, busca, carrinho e menu de usuário

critério de aceitação

• Criar componente de Link
• Criar IconButton - Menu de usuário e carrinho
• Criar componente de texto

definição de feito

• ao acessar a aplicação e navegar, precisamos conseguir ver e navegar pelo Header

referencias

• Projeto da sumup com referencias
• Components da sumup

Diretório de components

história de usuário

Como desenvolvedores queremos ter um novo diretório chamado components, esse diretório será usado para fazer a criação de todos os coponentes que usaremos na aplicação.

critério de aceitação

• o diretório components deve estár no root
• esse diretório deve ter um index.ts (o index.ts será responsável por exportar todos os componentes para a aplicação.

definição de feito

• Ao acessar o projeto demove ter disponível esse novo diretório criar.