{"id":21676442,"url":"https://github.com/odeassis/reactjs-componentizando-aplicacao","last_synced_at":"2026-05-15T21:01:42.377Z","repository":{"id":186827380,"uuid":"415381454","full_name":"odeassis/reactjs-componentizando-aplicacao","owner":"odeassis","description":"Essa é uma aplicação onde o principal objetivo é uma página para listagem de filmes de acordo com gênero. ","archived":false,"fork":false,"pushed_at":"2021-10-23T15:14:16.000Z","size":155,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T07:23:03.019Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odeassis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-10-09T17:47:50.000Z","updated_at":"2021-10-23T15:14:19.000Z","dependencies_parsed_at":"2023-08-07T22:42:10.931Z","dependency_job_id":null,"html_url":"https://github.com/odeassis/reactjs-componentizando-aplicacao","commit_stats":null,"previous_names":["fdassis/reactjs-componentizando-aplicacao","odeassis/reactjs-componentizando-aplicacao"],"tags_count":0,"template":false,"template_full_name":"rocketseat-education/ignite-template-componentizando-a-aplicacao","purl":"pkg:github/odeassis/reactjs-componentizando-aplicacao","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Freactjs-componentizando-aplicacao","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Freactjs-componentizando-aplicacao/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Freactjs-componentizando-aplicacao/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Freactjs-componentizando-aplicacao/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odeassis","download_url":"https://codeload.github.com/odeassis/reactjs-componentizando-aplicacao/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Freactjs-componentizando-aplicacao/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33080346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:25:35.270Z","status":"ssl_error","status_checked_at":"2026-05-15T20:25:34.732Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T14:14:12.198Z","updated_at":"2026-05-15T21:01:42.325Z","avatar_url":"https://github.com/odeassis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003e\n  Componentizando a aplicação\n\u003c/h2\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://res.cloudinary.com/dorzadlpq/image/upload/v1633895456/Github/reactjs/fakeflix_im41gb.png\" width=50%/\u003e\n\u003c/div\u003e\n\n## :computer: Aplicação\n\n\u003cp\u003e\nEssa é uma aplicação onde o principal objetivo é uma página para listagem de filmes de acordo com gênero.\n\n- A aplicação possui apenas uma funcionalidade principal que é a listagem de filmes\n- Na sidebar é possível selecionar qual categoria de filmes deve ser listada\n- A primeira categoria da lista (que é \"Ação\") já deve começar como marcada\n- O header da aplicação possui apenas o nome da categoria selecionada que deve mudar dinamicamente.\n\u003c/p\u003e\n\n## :robot: Fake API com JSON Server\n\u003cp\u003e\n Essa aplicação utilizar o JSON Server para simular uma API que possui as informações de gêneros e filmes. \n\n Navegue até a pasta criada, abra no Visual Studio Code e execute os seguintes comandos no terminal:\n ```\n  yarn  \n  yarn server\n ```\n Feito isso iniciarar uma fake API com os recursos `/genres` e `/movies` em `localhost` na porta `3333` a partir das informações do arquivo server.json \n localizado na raiz do projeto.\n \n Acessando essas rotas no navegador, você consegue ver o retorno das informações já em JSON:\n  \n  `localhost:3333/genres`\n   ```JSON\n     [\n      {\n        \"id\": 1,\n        \"name\": \"action\",\n        \"title\": \"Ação\"\n      },\n      {\n        \"id\": 2,\n        \"name\": \"comedy\",\n        \"title\": \"Comédia\"\n      },\n      {\n        \"id\": 3,\n        \"name\": \"documentary\",\n        \"title\": \"Documentário\"\n      }\n    ]\n   ```\n\n  `localhost:3333/movies`\n  ```JSON\n    [\n      {\n        \"Genre_id\": 1,\n        \"Title\": \"Underdog\",\n        \"Year\": \"2007\",\n        \"Rated\": \"PG\",\n        \"Released\": \"03 Aug 2007\",\n        \"Runtime\": \"84 min\",\n        \"Genre\": \"Action, Adventure, Comedy, Family, Fantasy, Sci-Fi\",\n        \"Director\": \"Frederik Du Chau\",\n        \"Writer\": \"Adam Rifkin (screenplay), Joe Piscatella (screenplay), Craig A. Williams (screenplay), Joe Piscatella (story), Craig A. Williams (story), Adam           Rifkin (story), W. Watts Biggers (television series)\",\n        \"Actors\": \"Jason Lee, Peter Dinklage, Jim Belushi, Patrick Warburton\",\n        \"Plot\": \"A Beagle must use his newly-bestowed superpowers to defend Capitol City from mad scientist Simon Barsinister.\",\n        \"Language\": \"English\",\n        \"Country\": \"USA\",\n        \"Awards\": \"3 nominations.\",\n        \"Poster\": \"https://m.media-amazon.com/images/M/MV5BMTk5NjkyNzEwOV5BMl5BanBnXkFtZTcwODc5NDI1MQ@@._V1_SX300.jpg\",\n        \"Ratings\": [\n          {\n            \"Source\": \"Internet Movie Database\",\n            \"Value\": \"10/10\"\n          },\n          {\n            \"Source\": \"Rotten Tomatoes\",\n            \"Value\": \"16%\"\n          },\n          {\n            \"Source\": \"Metacritic\",\n            \"Value\": \"37/100\"\n          }\n        ],\n        \"Metascore\": \"37\",\n        \"imdbRating\": \"4.7\",\n        \"imdbVotes\": \"19,729\",\n        \"imdbID\": \"tt0467110\",\n        \"Type\": \"movie\",\n        \"DVD\": \"08 Jul 2016\",\n        \"BoxOffice\": \"$43,760,605\",\n        \"Production\": \"Spyglass Entertainment\",\n        \"Website\": \"N/A\",\n        \"Response\": \"True\"\n      }\n  ```\n \n Dessa forma, basta consumir essas rotas da API normalmente com o Axios. Caso queira estudar mais sobre o JSON Server, dê uma olhada aqui:\n Json Server **[typicode/json-server](https://github.com/typicode/json-server)**.\n\u003c/p\u003e\n\n## :zap: Resultado\n\u003cimg src=\"https://res.cloudinary.com/dorzadlpq/image/upload/v1635002007/Github/reactjs/fakeflix2_ej7pg2.gif\" width=100%/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodeassis%2Freactjs-componentizando-aplicacao","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodeassis%2Freactjs-componentizando-aplicacao","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodeassis%2Freactjs-componentizando-aplicacao/lists"}