https://github.com/mairess/project-recipes-app-ts-v2
Aplicativo de receitas culinárias, o usuário pode pesquisar por drinks ou meals, ou escolher entre as categorias disponíveis, pode iniciar uma receita, favoritar uma receita.
https://github.com/mairess/project-recipes-app-ts-v2
context-api custom-hooks docker docker-compose react-testing-library reactjs typescript vitest
Last synced: 16 days ago
JSON representation
Aplicativo de receitas culinárias, o usuário pode pesquisar por drinks ou meals, ou escolher entre as categorias disponíveis, pode iniciar uma receita, favoritar uma receita.
- Host: GitHub
- URL: https://github.com/mairess/project-recipes-app-ts-v2
- Owner: mairess
- Created: 2024-01-04T22:30:25.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-19T14:28:37.000Z (11 months ago)
- Last Synced: 2024-03-20T11:40:48.226Z (11 months ago)
- Topics: context-api, custom-hooks, docker, docker-compose, react-testing-library, reactjs, typescript, vitest
- Language: TypeScript
- Homepage: https://the-recipes-app.vercel.app/
- Size: 510 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
Projeto App de Receitas
| Statements | Branches | Functions | Lines |
| --------------------------- | ----------------------- | ------------------------- | -------------------- |
|  |  |  |  |
## Contexto
Esse é projeto foi originalmente realizado em [grupo](https://github.com/mairess/project-recipes-app-ts), mas eu gostei tanto dele que fiz uma versão solo. Essa é uma aplicação versátil, que permite aos usuários explorar, buscar, filtrar, favoritar, compartilhar e acompanhar o processo de preparação de receitas e drinks. Utilizei duas APIs distintas, uma para comidas e outra para bebidas, garantindo uma ampla variedade de opções para os usuários. Usei `context api` para compartilhamento do estado da aplicação, `custom hooks`, `react router` e para testes usei `react testing library`, `vitest`, a estilização foi realizada com `styled-components` por meio de protótipo disponibilizado pela [Trybe](https://betrybe.com).
```
O layout foi projetado com foco em dispositivos móveis apenas (360px de largura por 640px de altura).
```
O app
Rode o projeto localmente
> ⚠️ É preciso ter o [Node](https://nodejs.org/en) instalado em sua máquina.
Primeiro, clone o repositório:
```SEHLL
git clone [email protected]:mairess/project-recipes-app-ts-v2.git
```
Instale as dependências:
```SEHLL
npm install
```
Inicie o vite server:
```SEHLL
npm run dev
```
Rode o projeto com o docker
> ⚠️ É preciso ter o [Docker](https://www.docker.com/get-started/) instalado em sua máquina.
Primeiro, clone o repositório:
```SEHLL
git clone [email protected]:mairess/project-recipes-app-ts-v2.git
```
Suba o container:
```SEHLL
docker compose up -d
```
O vite server estará disponível na porta `3000`:
```SEHLL
http://localhost:3000
```
Rode os testes
Rode os testes com:
```SHELL
npm test
```
Rode a cobertura:
```SHELL
npm run coverage
```
## Tecnologias utilizadas
- React
- Typescript
- React testing library
- Vitest
- Styled components
- Docker