A React Application challenge With CRUD (Create, Read, Update, Delete)

Last update: Dec 17, 2021

Desafio 03 - Corrigindo o código

Ignite


ūüíĽ Sobre o desafio

Nesse desafio, temos uma aplica√ß√£o Node.js que est√° em processo de desenvolvimento mas que j√° possui os testes necess√°rios para fazer toda a valida√ß√£o dos requisitos (voc√™ n√£o deve mexer nos testes). Ap√≥s algumas altera√ß√Ķes no c√≥digo da aplica√ß√£o, parte dos testes deixaram de passar e agora s√≥ voc√™ pode resolver esse problema. Bora l√°? ūüöÄ

Essa aplica√ß√£o realiza o CRUD (Create, Read, Update, Delete) de reposit√≥rios de projetos. Al√©m disso, √© poss√≠vel dar likes em reposit√≥rios cadastrados, aumentando a quantidade de likes em 1 a cada vez que a rota √© chamada.

A estrutura de um repositório ao ser criado é a seguinte:

{
  id: uuid(),
  title,
  url,
  techs,
  likes: 0
}

Descrição de cada propriedade:

  • id deve ser um uuid v√°lido;
  • title √© o t√≠tulo do reposit√≥rio (por exemplo "unform");
  • url √© a URL que aponta para o reposit√≥rio (por exemplo "https://github.com/unform/unform");
  • techs √© um array onde cada elemento deve ser uma string com o nome de uma tecnologia relacionada ao reposit√≥rio (por exemplo: ["react", "react-native", "form"]);
  • likes √© a quantidade de likes que o reposit√≥rio recebeu (e que vai ser incrementada de 1 em 1 a cada chamada na rota de likes).

Note que a quantidade de likes deve sempre ser zero no momento de criação.

Template da aplicação

Para realizar esse desafio, criamos para você esse modelo que você deve utilizar como um template do GitHub.

O template está disponível na seguinte URL:

rocketseat-education/ignite-template-corrigindo-o-codigo

Dica: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em nosso FAQ.

Agora navegue at√© a pasta criada, abra no Visual Studio Code e por √ļltimo abra o arquivo index.js. Lembre-se de executar o comando yarn no seu terminal para instalar todas as depend√™ncias e voc√™ ter√° o seguinte c√≥digo:

Rotas da aplicação

Com o template já clonado e o arquivo index.js aberto, você deve completar onde não possui código com o código para atingir os objetivos de cada teste.

GET /repositories

A rota deve retornar uma lista contendo todos os repositórios cadastrados.

POST /repositories

A rota deve receber title, url e techs pelo corpo da requisi√ß√£o e retornar um objeto com as informa√ß√Ķes do reposit√≥rio criado e um status 201.

PUT /repositories/:id

A rota deve receber title, url e techs pelo corpo da requisi√ß√£o e o id do reposit√≥rio que deve ser atualizado pelo par√Ęmetro da rota. Deve alterar apenas as informa√ß√Ķes recebidas pelo corpo da requisi√ß√£o e retornar esse reposit√≥rio atualizado.

DELETE /repositories/:id

A rota deve receber, pelo par√Ęmetro da rota, o id do reposit√≥rio que deve ser exclu√≠do e retornar um status 204 ap√≥s a exclus√£o.

POST /repositories/:id/like

A rota deve receber, pelo par√Ęmetro da rota, o id do reposit√≥rio que deve receber o like e retornar o reposit√≥rio com a quantidade de likes atualizada.

Específicação dos testes

Em cada teste, tem uma breve descri√ß√£o no que sua aplica√ß√£o deve cumprir para que o teste passe.

‚ö†ÔłŹ Note que partes da aplica√ß√£o j√° est√£o prontas e voc√™ precisar√° alterar apenas o que est√° errado (ou implementar algo que esteja faltando).

Se você achou algum trecho de código confuso ou pensou em uma melhor solução, sinta-se livre para também refatorar.

ūüí° Caso voc√™ tenha d√ļvidas quanto ao que s√£o os testes, e como interpret√°-los, d√™ uma olhada em **[nosso FAQ](https://www.notion.so/FAQ-Desafios-ddd8fcdf2339436a816a0d9e45767664)**

Para esse desafio, temos os seguintes testes:

Testes de repositórios

  • Should be able to create a new repository

Para que esse teste passe, você deve permitir que um novo repositório seja cadastrado pela rota POST /repositories. Caso precise confirmar o formato do objeto, você pode olhar aqui.

Também é necessário que você retorne a resposta com o código 201.

  • Should be able to list the projects

Para que esse teste passe, é necessário que você conclua o teste anterior. Se tudo ocorreu bem, os repositórios cadastrados deverão aparecerem na listagem da rota GET /repositories e esse teste irá passar.

  • Should be able to update repository

Para que esse teste passe, voc√™ deve permitir que um reposit√≥rio seja atualizado a partir de seu id pela rota PUT /repositories/:id usando as informa√ß√Ķes recebidas pelo corpo da requisi√ß√£o. Lembre-se de manter as informa√ß√Ķes que n√£o foram passadas pelo corpo, por exemplo: Se o usu√°rio quiser trocar apenas o title, mantenha url e techs que j√° estavam no reposit√≥rio.

  • Should not be able to update a non existing repository

Para que esse teste passe, voc√™ deve verificar se o reposit√≥rio existe antes de atualizar as informa√ß√Ķes na rota PUT /repositories/:id. Caso n√£o exista, retorne um status 404 (que √© o status para Not Found) com uma mensagem de erro no formato { error: "Mensagem do erro" }.

  • Should not be able to update repository likes manually

Para que esse teste passe, você deve impedir que a quantidade de likes de um repositório seja alterada manualmente através da rota PUT /repositories/:id. Por exemplo:

Errado:

// Repositório recém criado:
{
	id: "c160a99b-9d3b-4669-8a35-8dce1e8196ec",
	title: "Umbriel",
	techs: ["React", "ReactNative", "TypeScript", "ContextApi"],
	url: "https://github.com/Rocketseat/umbriel",
	likes: 0
}

// Requisi√ß√£o para alterar informa√ß√Ķes: 
// Rota: "/repositories/c160a99b-9d3b-4669-8a35-8dce1e8196ec"
// Método: PUT
// Corpo: { title: "Novo título", likes: 10 }

// Retorno:

{
	id: "c160a99b-9d3b-4669-8a35-8dce1e8196ec",
	title: "Novo título",
	techs: ["React", "ReactNative", "TypeScript", "ContextApi"],
	url: "https://github.com/Rocketseat/umbriel",
	likes: 10
}

Certo:

// Repositório recém criado:
{
	id: "c160a99b-9d3b-4669-8a35-8dce1e8196ec",
	title: "Umbriel",
	techs: ["React", "ReactNative", "TypeScript", "ContextApi"],
	url: "https://github.com/Rocketseat/umbriel",
	likes: 0
}

// Requisi√ß√£o para alterar informa√ß√Ķes: 
// Rota: "/repositories/c160a99b-9d3b-4669-8a35-8dce1e8196ec"
// Método: PUT
// Corpo: { title: "Novo título", likes: 10 }

// Retorno:

{
	id: "c160a99b-9d3b-4669-8a35-8dce1e8196ec",
	title: "Novo título",
	techs: ["React", "ReactNative", "TypeScript", "ContextApi"],
	url: "https://github.com/Rocketseat/umbriel",
	likes: 0 // A quantidade de likes n√£o mudou
}
  • Should be able to delete the repository

Para que esse teste passe, você deve permitir que um repositório seja excluído através do id passado pela rota DELETE /repositories/:id.

  • Should not be able to delete a non existing repository

Para que esse teste passe, você deve validar se o repositório existe antes de excluí-lo. Caso o repositório não exista, retorne um status 404 com uma mensagem de erro no formato { error: "Mensagem do erro" }.

Testes de likes

  • Should be able to give a like to the repository

Para que esse teste passe, deve ser poss√≠vel incrementar a quantidade de likes em 1 a cada chamada na rota POST /repositories/:id/like. Use o id passado por par√Ęmetro na rota para realizar essa a√ß√£o.

  • Should not be able to give a like to a non existing repository

Para que esse teste passe, você deve validar que um repositório existe antes de incrementar a quantidade de likes. Caso não exista, retorne um status 404 com uma mensagem de erro no formato { error: "Mensagem do erro" }.

ūüďĚ Licen√ßa

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.


Feito com ūüíú by Matheus Faria ūüĎč

GitHub

https://github.com/MattCarval/rocketseat-desafio-ignite-corrigindo-o-codigo
You might also like...

A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow

A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow

A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow

Apr 5, 2022

Mathemagician is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.

Mathemagician is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.

"Mathemagician" is a web app for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote.

Apr 22, 2022

Calculator app challenge built with react.js

Calculator app challenge built with react.js

Frontend Mentor - Calculator app solution This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you i

Apr 25, 2022

Plataforma-marvel - A Marvel Platform challenge Using React

Plataforma-marvel - A Marvel Platform challenge Using React

Plataforma Marvel ūüíĽ Sobre o projeto Esse √© o front de uma hipot√©tica plataforma

Jan 1, 2022

Codelandia-Challenge-2-JordanShoes - Desafio da comunidade da Codel√Ęndia, realizada com React e Typescript.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022

Address-list-challenge - Listing Addresses App Built with React

Address-list-challenge - Listing Addresses App Built with React

Listando Endere√ßos com React ūüíĽ Sobre o projeto Esse √© o front de uma aplica√ß√£o

Mar 5, 2022

0801 - Adtriba Coding Challenge Using React

0801 - Adtriba Coding Challenge Using React

Adtriba coding challenge Screenshots Technologies used: React with Next.js React

Jan 10, 2022

An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

An admin dashboard built with React, Redux, Firebase for the beezer interview coding challenge.

Apr 5, 2022

Challenge from frontendmentor built using react-typescript and tailwindcss

Challenge from frontendmentor built using react-typescript and tailwindcss

Frontend Mentor - Todo app solution This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your

Apr 2, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 13, 2022
TaskBerry - a task management application developed with react.js that implements the ability to add, edit and delete your daily tasks to keep track of them
TaskBerry - a task management application developed with react.js that implements the ability to add, edit and delete your daily tasks to keep track of them

Taskberry is a really simple task management web app built on reactjs. In this app, a user can create, edit and delete multiple tasks in the app

Feb 25, 2022
A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bug-corrections.

web-chat-real-time A real-time webchat made using React, NodeJs/Express and Typescript. I intend to update the project with new functionalities and bu

Nov 4, 2021
This is a React application for managing books you want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.
This is a React application for managing books you  want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.

This is a React application for managing books you want to read. It tracks your progress and makes reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux

Oct 17, 2021
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes
Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Math Magicians is a Single Page Application (SPA) created in React that allows users to make simple calculations & Read some famous Quotes

Apr 14, 2022
Application that allows you read posts
Application that allows you read posts

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: NextJs Prismic ?? Telas Home. Na primeira imagem é possível ver o conceito

Feb 27, 2022
Virtual bookstore created with React and Redux, with add and delete functionalities.
Virtual bookstore created with React and Redux, with add and delete functionalities.

Bookstore Virtual bookstore created with React and Redux. Preview Built With Node.js React Redux JavaScript Live Demo Heroku Live Demo Netlify Live De

Nov 19, 2021
A bookstore MVP that allows users to add, delete, and list available books
A bookstore MVP that allows users to add, delete, and list available books

Bookstore It is a bookstore MVP that allows users to add, delete, and list available books. Features The website displays a bookstore user interface u

Mar 23, 2022
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.

Bookstore Project In this project, I set up my Bookstore project. It is about making a Bookstore with 2 section BOOKS and CATEGORIES (styles and funct

Aug 28, 2021
Read documents like a pro, not spending a minute more
Read documents like a pro, not spending a minute more

Read documents like a pro, not spending a minute more

Feb 10, 2022