https://github.com/edijunior88/mks_frontend_challenge

Desafio para entregar uma página (Loja de Compras) com dados de uma API incluindo acesso aos itens (adicionados ao carrinho de compras)
https://github.com/edijunior88/mks_frontend_challenge

api css3 javascript react react-query reactjs styled-components

Last synced: about 2 months ago
JSON representation

Desafio para entregar uma página (Loja de Compras) com dados de uma API incluindo acesso aos itens (adicionados ao carrinho de compras)

• Host: GitHub
• URL: https://github.com/edijunior88/mks_frontend_challenge
• Owner: EdiJunior88
• License: mit
• Created: 2023-11-12T13:13:04.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-12T16:26:55.000Z (9 months ago)
• Last Synced: 2024-04-13T00:01:37.352Z (9 months ago)
• Topics: api, css3, javascript, react, react-query, reactjs, styled-components
• Language: TypeScript
• Homepage: https://mks-front-end-challenge-edijunior88.vercel.app/
• Size: 563 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


Challenge Front-End


O propósito primordial desta avaliação consiste em analisar sua proficiência na elaboração de código que seja claro, meticulosamente testado e passível de reutilização. Ao concluir a tarefa, solicitamos a gentileza de proceder com o deployment da aplicação e de nos fornecer, concomitantemente, os links correspondentes ao aplicativo e ao repositório associado. Este procedimento possibilitará uma análise abrangente do seu desempenho, sendo de suma importância para o desdobramento subsequente do processo avaliativo.




Tarefa (funcional)


Para esse desafio, você deve consumir nossa [API REST de produtos](https://mks-frontend-challenge-04811e8151e6.herokuapp.com/api-docs/) para exibir a lista de produtos da loja.

A aplicação deve conter apenas uma página/rota e um carrinho.

- Loja: A lista de produtos deve ser buscada de nossa API, use um shimmer/skeleton enquanto estiver em loading.

- Carrinho: O carrinho deve conter todos os produtos selecionados, juntamente com a opção de aumentar a quantidade de cada produto selecionado.

Use do Jest e a testing-library para realizar os testes unitários.



Recursos


UI/UX: [Figma loja](https://www.figma.com/file/ay9JKCd6LKvKLE7TclJJkX/MKS-Front-end-challenge?type=design&node-id=0%3A1&mode=design&t=AlZMI9zkOlhrx6JF-1) PS: O design system está incluso, incluindo a fonte.

API: [API REST de produtos](https://mks-frontend-challenge-04811e8151e6.herokuapp.com/api-docs/) para exibir a lista de produtos da loja.



Ferramentas requeridas


1. TypeScript ✔️

2. React ou Next.js (Preferimos Next.js) ✔️

3. React-query ✔️

4. Styled-components ou SASS ✔️

5. Framer-motion ❌ (utilização de animações do próprio CSS)

6. Jest ❌ (estudando testes, ainda não tenho conhecimentos para aplicar em um projeto)




Link do projeto: https://mks-front-end-challenge-edijunior88.vercel.app/

Fork do projeto: https://github.com/MKS-desenvolvimento-de-sistemas/mks-frontend-challenge



Tecnologias Utilizadas


-  [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages

-  [TypeScript](http://www.typescriptlang.org) – Languages

-  [Autoprefixer](https://github.com/postcss/autoprefixer) – CSS Pre-processors / Extensions

-  [Next.js](https://nextjs.org/) – Frameworks (Full Stack)

-  [Node.js](http://nodejs.org/) – Frameworks (Full Stack)

-  [PostCSS](https://github.com/postcss/postcss) – CSS Pre-processors / Extensions

-  [React](https://reactjs.org/) – Javascript UI Libraries

-  [styled-components](https://styled-components.com) – JavaScript Framework Components

-  [ESLint](http://eslint.org/) – Code Review

-  [axios](https://github.com/mzabriskie/axios) – Javascript Utilities & Libraries

Para ver todas as tecnologias [clique aqui](/techstack.md)



Status do Deploy


![Vercel](https://vercelbadge.vercel.app/api/EdiJunior88/MKS_FrontEnd_Challenge)



Tempo gasto no projeto




 

  

 







Status do Projeto:✅ Concluído