ePlay Games

Apresentação do projeto

eplaygames.mp4

Site de games desenvolvido em ReactJS com TypeScript, Redux para gerenciar o estado da aplicação, estilização realizada com Styled Components e React Router DOM para navegação entre páginas, tornando esta uma SPA (Single Page Application).

Um site responsivo que permite filtrar os jogos por categoria, inserir e remover itens do carrinho de compras, inserir dados de pagamento, com feedback personalizado durante toda experiência de navegação, com criação de formulário criados com Formik e com validação e máscaras nos campos feitas com Yup, assim como as requisições feitas para API foi utilizado React Toolkit Query.

Projeto desenvolvido no curso de Full Stack Python da EBAC - Escola Britânica de Artes Criativas e Tecnologia.

🚀 Começando

Estas instruções permitirão que você obtenha uma cópia do projeto em execução em sua máquina local para fins de desenvolvimento e teste.

Pré-requisitos

Antes de começar, certifique-se de ter as seguintes ferramentas instaladas em sua máquina:

• Node.js
• npm (geralmente vem com o Node.js)

Este projeto foi inicializado com Create React App.

Instalação

Siga estas etapas a seguir para configurar o ambiente de desenvolvimento:

1. Clone este repositório em sua máquina local.
2. Navegue até o diretório clonado.
3. Execute o seguinte comando para instalar as dependências:

npm install

Executar o projeto

Para executar o projeto em modo de desenvolvimento, execute o comando:

npm start

Abra http://localhost:3000 para visualizar no browser.

A página irá recarregar se alterações forem feitas. Você também verá Lint erros no console, se existirem.

Para executar o projeto em produção, execute o comando:

npm run build

Constrói o app para produção na pasta 'build'. Corrige pacotes React em modo de produção e otimiza a contrução para uma melhor performance.

🛠️ Ferramentas utilizadas para construção do projeto

• ESLint - Linter, uma ferramenta de análise estática, para as linguagens Javascript e Typescript.
• HTML - Linguagem de marcação utilizada na construção de páginas na Web.
• CSS - Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web.
• ReactJS - Biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
• Redux - É uma biblioteca JavaScript de código aberto para gerenciar o estado do aplicativo.
• React-Router-Dom - Biblioteca JavaScript que fornece navegação e roteamento para aplicações React.
• React Spinners - Uma coleção de Loadings Spinners para melhor feedback ao usuário.
• React Toolkit Query - Para requisições para API.
• Formik - Biblioteca para criação de formulários.
• Yup - Biblioteca para validação de formulários.
• TypeScript - Linguagem OpenSource desenvolvida pela Microsoft. É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem.
• Styled Components - Uma biblioteca que nos permite escrever CSS em JavaScript enquanto construímos componentes customizados em ReactJS.
• NPM - Gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.JS.

✒️ Autor

Guilherme Ferreira Camargo