Skip to content

Front-end challenge: create a user-friendly evaluation form - React | Next.js | TypeScript | Sass

Notifications You must be signed in to change notification settings

MayllaRabay/desafio-serasa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Create, innovate, inspire, code and test like a girl!

🚧 Desafio Serasa Experian 🚀 em andamento... 🚧

💻 Sobre o projeto

Desafio técnico de front-end para o processo seletivo da Serasa. O objetivo é fazer os três exercícios contidos na pasta /exercises:

  • componentizar e documentar a tipografia dada;
  • criar um formulário de avaliação acessível, utilizando o Design System criado;
  • descrever em um markdown tecnologias, frameworks, padrões de código e arquiteturas que poderiam ser usadas no blog da Serasa, visando sua melhoria.

🚀 Desafio Extra

Criar uma API para receber e armazenar os dados do formulário.

🎨 Layout

Design em /exercises/1-EXERCISE/materiais e /exercises/2-EXERCISE/materiais.

💡 Pré-requisitos

  • O primeiro passo é instalar o Git em seu computador caso você ainda não o tenha.
  • Os pacotes que iremos utilizar durante o desenvolvimento desse projeto serão gerenciados pelo Node Package Manager (NPM), então precisaremos instalá-lo. Vamos até o site oficial do Node.js para instalar sua versão LTS (versão mais estável). Quando instalamos o Node.js, o NPM também é instalado no computador como parte do mesmo pacote.
  • Além disto é interessante ter um bom editor para trabalhar com o código como por exemplo o VSCode.

🚀 Como executar o projeto

# Abra seu terminal/cmd e clone este repositório
$ git clone https://github.com/MayllaRabay/desafio-serasa.git

# Acesse a pasta do projeto
$ cd desafio-serasa/serasa-challenge

# Baixe todas as dependências e pacotes da aplicação
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm run dev

# A aplicação será aberta na porta:3000 - acesse em seu navegador
http://localhost:3000

🔧 Tecnologias

  • ReactJS
  • NextJS
  • Typescript
  • Sass

✨ Extras

Porque usar ReactJS?

Com o React é mais fácil e prático de manipular a interface de acordo com o que o usuário poderá interagir, graças à tríade que o compõe: COMPONENTES, PROPRIEDADES e ESTADOS.

Toda função dentro do React que retorna um HTML é um COMPONENTE! Os componentes facilitam a manutenção e a leitura do código, principalmente quando nossa aplicação começa a ficar grande, com muitas páginas, muitas linhas de código, muitas funcionalidades. O uso de componentes no React é excelente para evitar repetição, ou seja, quando temos o mesmo 'pedaço' de interface se repetindo ao longo da aplicação, um header ou footer por exemplo, nós podemos encapsular essa parte em um componente e utilizá-lo várias vezes dentro da nossa aplicação.

Além dos componentes serem uma forma de reutilizarmos código, eles também servem para isolar as responsabilidades de uma determinada funcionalidade, sendo assim mais fácil de resolver bugs e manter a integridade do código, com menos chance de quebrá-lo.

Para mais informações, veja a documentação do React.

:bowtie: Autor

Feito com ❤️ por Maylla Rabay 👋 Entre em contato!

About

Front-end challenge: create a user-friendly evaluation form - React | Next.js | TypeScript | Sass

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published