{"id":24312738,"url":"https://github.com/matheus1714/ignite-project-feed-page","last_synced_at":"2025-03-09T11:09:07.501Z","repository":{"id":187963216,"uuid":"677874274","full_name":"Matheus1714/ignite-project-feed-page","owner":"Matheus1714","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-15T04:01:43.000Z","size":2796,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T08:37:38.519Z","etag":null,"topics":["css-module","feed","ignite","ignite-rocketseat","rocketseat","typescript"],"latest_commit_sha":null,"homepage":"https://ignite-project-feed-page.vercel.app","language":"TypeScript","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/Matheus1714.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":"2023-08-12T23:48:57.000Z","updated_at":"2023-08-13T22:09:07.000Z","dependencies_parsed_at":"2025-01-17T08:32:07.793Z","dependency_job_id":"754f3653-786e-472e-b27b-0ab7b5c1a703","html_url":"https://github.com/Matheus1714/ignite-project-feed-page","commit_stats":null,"previous_names":["matheus1714/ignite-project-feed-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matheus1714%2Fignite-project-feed-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matheus1714%2Fignite-project-feed-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matheus1714%2Fignite-project-feed-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matheus1714%2Fignite-project-feed-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matheus1714","download_url":"https://codeload.github.com/Matheus1714/ignite-project-feed-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242679513,"owners_count":20168163,"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","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":["css-module","feed","ignite","ignite-rocketseat","rocketseat","typescript"],"created_at":"2025-01-17T08:29:32.106Z","updated_at":"2025-03-09T11:09:07.474Z","avatar_url":"https://github.com/Matheus1714.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Ignite Feed](https://ignite-project-feed-page.vercel.app/) 🚀\n\n![project-01](img/animation.gif)\n\nThis is a project created using the concepts learned in [Rocketseat's](https://www.rocketseat.com.br/) classes in the Ignite program for a comments feed.\n\n## Design\n\nThis Front-end project was developed based on the design proposed in [Figma](https://www.figma.com/file/QUu1Ge0qogrBEN95ov77Mg/Ignite-Feed-(Community)?type=design\u0026node-id=0%3A1\u0026mode=design\u0026t=XSHWfaJ2thJ4E1tE-1).\n\n![](img/Figma.gif)\n\n## Technologies\n\nThis project was developed using Vite + ReactJS, Typescript.\n\nThe project dependencies were:\n\n```json\n\"dependencies\": {\n    \"@phosphor-icons/react\": \"^2.0.10\",\n    \"date-fns\": \"^2.30.0\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.2.15\",\n    \"@types/react-dom\": \"^18.2.7\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.0.0\",\n    \"@typescript-eslint/parser\": \"^6.0.0\",\n    \"@vitejs/plugin-react\": \"^4.0.3\",\n    \"eslint\": \"^8.45.0\",\n    \"eslint-plugin-react-hooks\": \"^4.6.0\",\n    \"eslint-plugin-react-refresh\": \"^0.4.3\",\n    \"typescript\": \"^5.0.2\",\n    \"vite\": \"^4.4.5\"\n  }\n```\n\n## Run Project\n\nRun the installation of dependencies with:\n\n```shell\nnpm i\n```\n\nRun the exe project using the command:\n\n```shell\nnpm run dev\n```\n\n😝 Enjoy!!\n\n## What I Learned with This Project?\n\n### Create a global file to CSS\n\nHaving a global file (`global.css`) that has standardized colors in a single file helps a lot with standardizing colors in the project and changing themes in the future.\n\n```css\n:root{\n    ---white: #ffffff;\n    --gray-100: #e1e1e6;\n    --gray-300: #c4c4cc;\n    --gray-400: #8d8d99;\n    --gray-600: #323238;\n    --gray-700: #29292e;\n    --gray-800: #202024;\n    --gray-900: #121214;\n\n    --green-300: #00B37E;\n    --green-500: #00875f;\n\n    --red-500: #F75A68;\n}\n```\n\n### Key's in React\n\nUsing Keys in react helps react in optimizing the rendering of the component on the page, so choosing a key with a unique value is essential.\n\n```ts\n...\n{comments.map(comment =\u003e {\n      return (\n         \u003cComment \n            onDeleteComment={deleteComment} \n            key={comment} \n            content={comment} \n         /\u003e\n      )\n})}\n...\n```\n\n### Imutability\n\nIn immutability, the variables do not change, a new value is created (a new space in the memory) for the variable.\n\nWithin React immutability allows for a performance boost. React looks at variables that have changed and it performs better.\n\nA good example of this is in the comment deletion function, in which you must change and redo the list with the comment that has changed.\n\n```ts\nfunction deleteComment(commentToDelete: string){\n   const commentsWithoutDeleteOne = comments.filter(comment =\u003e {\n      return comment !== commentToDelete\n   })\n   setComments(commentsWithoutDeleteOne)\n}\n```\n\n### Typescript\n\nUsing `Typescript` helps a lot in project development in React. Variable typing helps the developer to avoid problems during development. `Interface` development helps a lot.\n\n```ts\nexport interface AuthorType{\n    name: string\n    role: string\n    avatarUrl: string\n}\n```\n\n## Acknowledgment\n\nThanks to Rocketseat for the content and initiatives it provides.🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheus1714%2Fignite-project-feed-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheus1714%2Fignite-project-feed-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheus1714%2Fignite-project-feed-page/lists"}