Giter Club home page Giter Club logo

b2bit-case's Introduction

b2bit logo

Case técnico Frontend

Case técnico para a vaga de Desenvolvedor Frontend React Jr. na empresa b2bit.

DescriçãoComo rodarTecnologiasFeatures

📋 Descrição

O case consiste em uma aplicação na qual o usuário possa realizar o login e, caso autenticado, irá ser redirecionado para a Home, onde poderá visualizar suas informações a qualquer momento graças à autenticação via JWT token. Além disso, o usuário tem a possibilidade de fazer o logout da sua conta, removendo seus dados do armazenamento do navegador.

🔌 Como rodar

Para prosseguir, garanta que tem instalado o Node.js >= 16.0 e o git para esse passo a passo:

  1. Clone o projeto para sua máquina:
# SSH
git clone [email protected]:ananuness/b2bit-case.git

# https
git clone https://github.com/ananuness/b2bit-case.git
  1. Vá até a pasta do projeto e instale as dependências:
# acessando a pasta do projeto
cd b2bit-case

# instalando todas as dependências
npm install
  1. Defina as variáveis de ambiente requeridas encontradas no arquivo .env.example e mude o nome do arquivo para apenas .env ou .env.local.

  2. Rode o projeto em modo de desenvolvimento:

npm run dev

🚀 Tecnologias

  • [Obrigatório] Typescript para tipagem no Javascript
  • [Obrigatório] Reactjs para desenvolvimento de interfaces nativas e web
  • [Obrigatório] Axios para facilitar o gerenciamento de requisições e respostas
  • [Obrigatório] Vitest e Testing Library para os testes
  • React Router para gerenciamento de rotas
  • Tailwindcss para estilização
  • Formik para fácil gerenciamento de formulários no react
  • Yup para validações
  • Vite para criação do projeto React
  • Vercel para deploy

✨ Features

  • Tela de Sign in
  • Validação dos campos do formulário
  • Feedbacks de erros e carregamentos
  • JWT token para autenticação
  • Tela de Perfil do usuário
  • Logout do usuário

Feito com 💛 por Ana Beatriz Nunes

b2bit-case's People

Contributors

ananuness avatar

Watchers

 avatar

b2bit-case's Issues

[test] Add e2e tests

Proposal

Add end-to-end test for greater reliability, testing the entire flow of login, logout and loading user information. Whether on the happy path or on the paths where failures occur.

Scenarios

  • User logged in successfully
  • User profile details loaded without errors
  • User logged out successfully
  • User typed the e-mail and password wrongly
  • User profile details lacking information
  • User token expired

Suggestions

  • Use Playwright or Cypress;
  • Add CI/CD workflow to improve time between development and deploy;

[docs] Add readme file in English

Proposal

Add an English version of the readme file for greater reach and accessibility for other developers interested in the project.

Suggestions

  • Add a file named README.en.md;
  • Link the English version to the main readme;

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.