Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guicamargo19/efood

Projeto ReactJS, React Router DOM e Styled Components.
https://github.com/guicamargo19/efood

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

Last synced: 2 days ago
JSON representation

Projeto ReactJS, React Router DOM e Styled Components.

Awesome Lists containing this project

README 

        
# eFood



## Apresentação do projeto



https://github.com/guicamargo19/efood/assets/133445061/fbed022a-76bb-4439-822c-01c4ed71684b



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



Esta página apresenta uma listagem de restaurantes, onde é possível acessar a página individual de cada restaurante para

verificar o cardápio e inserir os itens desejados no carrinho, sendo possível inserir apenas um de cada tipo de prato, é

posível remover o item desejado do carrinho clicando na lixeira.



Pode-se também preencher o dados para entrega e pagamento com opção apenas de cartão de crédito. Projeto totalmente

responsivo que oferece um ótimo feedback de interação com o usuário tornando a experiência de navegação mais agradável e

intuitiva.



Foi 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), com formulários 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**.



Página segue boas práticas de programação, utilizando as regras **ESLint** para o ambiente de desenvolvimento.



## 🚀 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