https://github.com/guicamargo19/eplay-games

Projeto front-end com ReactJS, Redux, Router DOM e Styled Components.
https://github.com/guicamargo19/eplay-games

css3 eslint formik-yup html5 npm react-spinners react-toolkit-query reactjs redux router-dom styled-components typescript vscode

Last synced: 2 days ago
JSON representation

Projeto front-end com ReactJS, Redux, Router DOM e Styled Components.

• Host: GitHub
• URL: https://github.com/guicamargo19/eplay-games
• Owner: guicamargo19
• License: mit
• Created: 2024-01-24T23:13:46.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-22T17:52:30.000Z (7 months ago)
• Last Synced: 2024-04-22T19:00:48.933Z (7 months ago)
• Topics: css3, eslint, formik-yup, html5, npm, react-spinners, react-toolkit-query, reactjs, redux, router-dom, styled-components, typescript, vscode
• Language: TypeScript
• Homepage: https://eplay-nu.vercel.app
• Size: 3.31 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ePlay Games

## Apresentação do projeto

https://github.com/guicamargo19/eplay/assets/133445061/2a2247c8-22a6-41f8-8186-89f4c7e4fbc2

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](https://github.com/facebook/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](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