/xp-app

Primary LanguageJavaScript

XP-APP

Desenvovimento de uma aplicação Fron-end para o processo seletivo da XPInc, na Trybe - Turma XP.

Desde o planejamento, o projeto foi todo pensado na experiência do cliente.

Inicialmente, eu li e entendi bem os requisitos propostos pela XP. Logo depois, eu esbocei a aplicação no excalidraw para depois passar um protótipo e fluxo de informações para o figma.

Entendidos os requisitos e com o esboço da aplicação em mãos, eu pesquisei sobre as melhores ferramentas de desenvolvimento e gestão de dados do projeto. Nessa linha, eu desenhei um fluxo de informações com base no estado global da aplicação e estados de cada página ou componente.

Após decidir quais ferramentas eu iria utilizar, dei início à configuração inicial da aplicação:

  • Criei o app com npx create-react-app
  • Configurei o EsLint e Preetier
  • Criei o estado global, actions e reducers
  • Desenvolvi as páginas e componentes na seguinte ordem: Login, Account, Investments (onde são renderizadas os componentes de ações do usuário e ações disponíveis no mercado) e, por fim, a página de Trade.
  • Refatoração ao longo de todo o desenvolvimento da aplicação
  • Intervalos para estilização das páginas e componentes
  • Inserção de alertas para melhor experiência do usuário
  • Configurar localStorage e opção de logout do usuário
  • Ajustes finos

Foi um processo de muitas descobertas e aprendizados! Durante o desenvolvimento tive a certeza: quero ser um desenvolvedor Front-end, de preferência na XPInc - empresa a qual ganhou minha admiração ao longo da jornada de estudos na Trybe :)

Fiquem à vontade. Espero que gostem!

A aplicação está on-line no link:

https://xp-app.netlify.app/

Caso você queira rodar o projeto na sua maquina, siga o passo a passo:

Clone o repositório na sua máquina (SSH)

git clone git@github.com:AmorimTorres/xp-app.git

Acesse o diretorio

cd xp-app

Instale as dependências

$ npm install

Inicie a aplicação

$ npm start

A aplicação, por padrão, roda na porta:

http://localhost:3000/

Imagens do projeto:

Tecnologias utilizadas:

JavaScript React JS Styled Components Redux Toolkit React-hot-toast
ES13 18.2.0 5.3.5 1.8.3 2.3.0

Autor