{"id":21766490,"url":"https://github.com/kastorcode/gostack-challenge-04","last_synced_at":"2026-04-09T17:32:53.207Z","repository":{"id":123500335,"uuid":"401141943","full_name":"kastorcode/gostack-challenge-04","owner":"kastorcode","description":"Challenge #4 of the Rocketseat GoStack Bootcamp: Introduction to React.","archived":false,"fork":false,"pushed_at":"2021-08-29T21:10:33.000Z","size":519,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T05:27:39.943Z","etag":null,"topics":["bootcamp","brazil","challenge","course","css","frontend","goiania","goias","gostack","html","javascript","matheus","oliveira","ramalho","reactjs","rocketseat"],"latest_commit_sha":null,"homepage":"https://rocketseat.com.br","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kastorcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-29T21:03:26.000Z","updated_at":"2021-08-29T21:21:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"be19729e-5bef-41c8-b78e-355baf40c0fa","html_url":"https://github.com/kastorcode/gostack-challenge-04","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kastorcode/gostack-challenge-04","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kastorcode%2Fgostack-challenge-04","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kastorcode%2Fgostack-challenge-04/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kastorcode%2Fgostack-challenge-04/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kastorcode%2Fgostack-challenge-04/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kastorcode","download_url":"https://codeload.github.com/kastorcode/gostack-challenge-04/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kastorcode%2Fgostack-challenge-04/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269356328,"owners_count":24403506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["bootcamp","brazil","challenge","course","css","frontend","goiania","goias","gostack","html","javascript","matheus","oliveira","ramalho","reactjs","rocketseat"],"created_at":"2024-11-26T13:17:43.769Z","updated_at":"2025-12-30T21:07:19.390Z","avatar_url":"https://github.com/kastorcode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## GoStack Bootcamp Challenge 4\n\u003e 🚀 Practical project of the [Rocketseat](https://rocketseat.com.br) GoStack Bootcamp.  \n👷 Developed by Matheus Ramalho de Oliveira.  \n🔨 Systems Analyst, Full-Stack Developer.  \n🏡 Goiânia, Goiás, Brasil.  \n✉️ kastorcode@gmail.com  \n👍 [instagram.com/kastorcode](https://www.instagram.com/kastorcode)\n\n---\n\n### Screenshots\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/1.png\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/2.png\" /\u003e\n\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/gostack.png\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    Challenge 4: Introduction to React\n\u003c/p\u003e\n\n---\n\n## :rocket: Sobre o desafio\n\nCrie uma aplicação do zero utilizando **Webpack, Babel, Webpack Dev Server e ReactJS**.\n\nNessa aplicação você irá desenvolver uma **interface** semelhante com a do **Facebook** utilizando React.\n\nAs informações contidas na interface são **estáticas** e não precisam refletir nenhuma API REST ou back-end.\n\n### Tela da aplicação\n\n![Facebook](.github/facebook.png)\n\nO layout não precisa ficar exatamente igual, você pode utilizar sua criatividade para modificar da maneira que preferir.\n\nO mais importante é que todos elementos apareçam em tela.\n\nO layout da aplicação está [nesse link](.github/layout.sketch) que pode ser aberto por essa ferramenta gratuita e online: https://www.figma.com/\n\n### Componentes\n\nNa imagem abaixo destaquei cada componente que você criará e abaixo da imagem está a descrição e responsabilidades de cada um:\n\n![Componentes](.github/components.png)\n\n**Header (Amarelo):** Responsável por exibir a logo e o link para acessar o perfil;\n\n**PostList (Verde):** Responsável por armazenar os dados da listagem de post, esses dados devem ficar dentro do `state` do componente e não em uma variável comum, por exemplo:\n\n```js\nclass PostList extends Component {\n  state = {\n    posts: [\n      {\n        id: 1,\n        author: {\n          name: \"Julio Alcantara\",\n          avatar: \"http://url-da-imagem.com/imagem.jpg\"\n        },\n        date: \"04 Jun 2019\",\n        content: \"Pessoal, alguém sabe se a Rocketseat está contratando?\",\n        comments: [\n          {\n            id: 1,\n            author: {\n              name: \"Diego Fernandes\",\n              avatar: \"http://url-da-imagem.com/imagem.jpg\"\n            },\n            content: \"Conteúdo do comentário\"\n          }\n        ]\n      },\n      {\n        id: 2\n        // Restante dos dados de um novo post\n      }\n    ]\n  };\n}\n```\n\n**Post (Vermelho):** Responsável por exibir os dados do post, esses dados devem vir através de uma propriedade recebida do componente PostList, ou seja, lá no PostList você terá algo assim:\n\n```js\nposts.map(post =\u003e \u003cPost key={post.id} data={post} /\u003e);\n```\n\n**Comment (Azul):** Responsável por exibir um comentário. Os dados do comentário virão por uma propriedade do componente. Dentro do componente Post você terá um novo `.map` para listar os comentários do post:\n\n```js\ndata.comments.map(comment =\u003e \u003cComment key={comment.id} data={comment} /\u003e);\n```\n\n---\n\n### 🗓 ️Roadmap\n- Introduction to Node.js\n- Creating Node.js project\n- Continuing Node.js project\n- CSS Flexbox\n- UI Design\n- Introduction to React\n- First project with ReactJS\n- First project with React Native\n- Front-end documentation\n- Flux architecture\n- Using React Hooks\n- Server-side rendering(SSR) with ReactJS\n- GraphQL\n- Expo\n- Creating ReactJS project\n- Creating React Native project\n- Animations with React Native\n- Full-stack app development\n- Node.js tests\n- Node.js deploy\n- ReactJS tests\n- React Native tests\n- ReactJS deploy\n- React Native publication\n- WebSocket with Express\n- Advanced patterns at Node.js\n- OmniStack SaaS(software as a service) and AdonisJS\n- Final challenge\n- Monorepo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkastorcode%2Fgostack-challenge-04","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkastorcode%2Fgostack-challenge-04","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkastorcode%2Fgostack-challenge-04/lists"}