Descrição • Tecnologias • Pré-requisitos • Como usar • Demonstração

ℹ Descrição

Projeto desenvolvido como desafio da Brainn Co. para função de Dev front-end. 🧠🚀

O desafio consistia em desenvolver uma aplicação web front-end que mostre os resultados das loterias.

O layout da aplicação foi feita conforme o design do Figma, e os resultados das loterias é obtida usando a API REST desenvolvida por eles.

🏹 O que foi cumprido do esperado

• Suporte para 6 sorteios: Mega-sena, Quina, Lotofácil, Lotomania, Timemania e Dia de sorte;
• Ao escolher um sorteiro, mudar o tema do sorteio, número do sorteio, data do sorteio e números sorteados;
• Responsividade para celulares, conforme layout;
• Consumo da API via REST ou GraphQL;
• Rotas com React Router DOM (feito com SvelteKit).

🎯 O que foi feito além do esperado

• Animações ao mostrar resultado de um sorteio;
• Cache dos resultados dos sorteios em local storage para evitar repetição de requests.

⚒ Tecnologias

O que era esperado

• React com TypeScript
• Testes com React Testing Library e/ou Cypress

O que foi utilizado

• Svelte com Typescript

• SvelteKit

• TailwindCSS

• Jest

• React Testing Library

  *Obs.: Svelte com SvelteKit seria o equivalente de ReactJS com Next.js. SvelteKit cuida da parte do servidor e SSR/SSG, e Svelte renderização.

⚙ Pré-requisitos

• Git
• Yarn
• Editor de código.

🖥 Como usar

Clone o projeto e acesse a pasta

$ git clone https://github.com/EduardoReisUX/lottery.git && cd lottery

Siga os passos seguintes

# Instale as dependências
$ yarn

# Verifique os testes unitários
$ yarn test
# ou
$ yarn test:watch

# Inicie a aplicação na sua máquina
$ yarn dev

👀 Demonstração

Feito com 💜 por Eduardo dos Reis