Giter VIP home page Giter VIP logo

react-superbid's Introduction

React - Superbid

🗃 Projeto

Aplicação React para cadastro de vendedores em um marketplace.

📝 O que foi solicitado para ser feito nesse teste técnico/prático:

A ideia é ver como você estrutura um projeto e como aplica o conceito de "clean code" e separação de responsabilidades.

O desafio é criar um wizard, como se fosse um cadastro em um e-commerce onde a cada novo step você precisa salvar o anterior no caso dele querer voltar para revisar ou editar algo.

1- Criar um projeto em react

2- Utilizar o styled-components

3- evitar utilizar componentes já prontos de bibliotecas.

Será avaliado o seu conhecimento em CSS tanto em harmonia das informações na tela quanto em responsividade.

💻 Demonstração

Pode ser acessada online atráves do link: https://react-superbid.vercel.app/

Obs: ao final do cadastro é gerado um JSON com a finalidade de ser enviado para um possivel backend, que no momento não está conectado, porém é possivel visualizar o JSON criado ao finalizar o cadastro inspecionando a pagina e visualizando o console log.

🛠 Possiveis melhorias:

  1. Conectar o formulário de cadastro ao backend

  2. Adicionar mais recursos extras de responsavidade para versão mobile

  3. Adicionar verificações/validações aos inputs Ex: verificar se cpf/cpnj/email etc… é valido ou não

  4. Adicionar mais campos/inputs ao formulário de cadastro caso necessario

  5. Adicionar widget fixo no canto inferior da tela de (“Fale conosco em caso de dúvidas” ) que abra um chatbot por exemplo

  6. Apos concluir o cadastro redirecionar para a pagina principal do marketplace

  7. Caso você tenha mais alguma sugesão de melhoria sera muito bem vinda, entre em contato comigo ou faça um pull-request nesse repositório.

🧪 Tecnologias

Esse projeto foi desenvolvido principalmente com as seguintes tecnologias:

  • React React

  • Ts TypeScript

  • Ts Styled-components

📕 Bibliotecas

Esse projeto foi utilizou das seguintes libs:

  • vitejs
  • styled-components
  • react-dom
  • react-svgr

🔖 Layout

  • Fonte: Nunito

  • Cores:

     Cinza background → #F8F8F8
    
     Preto fonte  primário  →  #131415
    
     Cinza fonte →  #66696F
    
     Laranja primário → #EC660B
    
     Azul primário → #0050A0
    
     Azul claro → #D6EAF5
    

FormStep1

FormStep2

FormStep3

FormStep4

🚀 Como executar

Clone o projeto e acesse a pasta do mesmo.

$ git clone https://github.com/guilhermemm-dev/react-superbid
$ cd react-superbid

Para iniciá-lo, siga os passos abaixo:

# Instalar as dependências
$ yarn ou npm install

# Iniciar o projeto
$ yarn start ou npm run dev

O app estará disponível no seu browser pelo endereço http://localhost:3000.

📝 License

Esse projeto está sob a licença MIT.

License


Feito por Guilherme Martins - @guilhermemm-dev

  1. LinkedIn: https://www.linkedin.com/in/guilhermemm-dev/

  2. GitHub: https://github.com/guilhermemm-dev

  3. Portfolio: https://guilhermemm-dev.github.io/portifolio/

react-superbid's People

Contributors

gmartins-dev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.