Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/testes-react-wefit


https://github.com/epiled/testes-react-wefit

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

# 🔸🎬📽 WeFit

Teste para a vaga de desenvolvedor React

| :placard: WeFit | |
| ------------- | --- |
| :sparkles: Nome | **WeFit - WeMovies**
| :label: Tecnologias | react, typescript, styled components, recoil, html, css, js, node, vite, eslint

![thumb](https://github.com/Epiled/testes-react-wefit/assets/55258483/361f878d-f6a4-40f7-a135-4f2f57f18815)

🔸 🎬 Teste WeFit - WeMovies 📽 🔸

Neste repositorio estĂŁo os dois cĂłdigos dos dois desafios.
Os materiais originais foram forncedos pela WeFit e nĂŁo se encontram nesse repositorio

- Desafio JavaScript
Transformar através do JS (wefit-test/js/main.js) o HTML/DOM de acordo com os prints (/Roteiro-teste-WeFit).

- Desafio de Estruturação de Projeto React + TypeScript + styled-components
O desafio consiste na criação de um site de e-commerce simplificado do zero, onde o candidato terá que criar um fluxo com três módulos/telas.

SĂŁo elas:

- Home: Onde ele terá que fazer uma requisição na API, trazendo assim, a lista de filmes quem podem ser adicionados ao carrinho.
- Carrinho: Onde ele poderá ver os itens que foram adicionados, somando o valor total com base em cada item adicionado, podendo remover um item do carrinho. Por padrão, se o carrinho tiver nenhum item adicionado, deverá aparecer a tela de empty com a opção de voltar para tela inicial.
- Compra realizada: Após confirmar o pedido na tela anterior, o usuário deverá ser encaminhado para a tela de pedido confirmado. Aqui o usuário também terá a opção de voltar para tela inicial.

![Badge](https://img.shields.io/github/last-commit/Epiled/testes-react-wefit?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/code-size/Epiled/testes-react-wefit?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/count/Epiled/testes-react-wefit?style=for-the-badge)
![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)

![Badge](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
![Badge](https://img.shields.io/badge/-Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
![Badge](https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![Badge](https://img.shields.io/badge/-Styled%20Components-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white)
![Badge](https://img.shields.io/badge/-Recoil-3578E5?style=for-the-badge&logo=recoil&logoColor=white)
![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)
![Badge](https://img.shields.io/badge/-Vite.js-646CFF?style=for-the-badge&logo=vite&logoColor=white)
![Badge](https://img.shields.io/badge/-ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)

đź“‘ Tabela de ConteĂşdos

* [Sobre](#sobre)
* [Demonstração](#demonstracao)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Building](#building)
* [Tecnologias](#tecnologias)
* [Autor](#autor)

👀 Demonstração

No link abaixo vocês podem ver as páginas hospedadas e rodar seus próprios teste de perfomance ou desempenho


Desafio JS: https://epiled.github.io/testes-react-wefit/desafio-js/


Desafio de Estruturação de Projeto React + TypeScript + styled-components: https://testes-react-wefit.vercel.app/

https://github.com/Epiled/testes-react-wefit/assets/55258483/cf807c92-a9d7-4a70-8e08-d9b6ebb74ec4

https://github.com/Epiled/testes-react-wefit/assets/55258483/d02e4a7f-46ef-495b-9b12-194a95080181

⚙ Instalação

```
1. git clone https://github.com/Epiled/testes-react-wefit.git
2. cd testes-react-wefit
3. npm install
```

👩‍🏫 Como usar

- Desafio JavaScript
```
1. Acesse a pasta desafio-js
2. Abra o arquivo index.html no navegador
```

- Desafio de Estruturação de Projeto React + TypeScript + styled-components
```
1. Abra o terminal na pasta testes-react-wefit
2. npm run dev
3. Abra a seguinte url http://localhost:5173/
```

âš™ Building

```
1. Abra o terminal na pasta testes-react-wefit
2. npm run build
```

đź›  Tecnologias

As seguintes tecnologias foram usadas na construção deste projeto:

👨‍💻 Autor

![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)


Felipe De Andrade

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)
[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)
[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)