{"id":13729659,"url":"https://github.com/ERNI-Academy/guideline-react-project-example","last_synced_at":"2025-05-08T02:30:33.567Z","repository":{"id":42189138,"uuid":"431517770","full_name":"ERNI-Academy/guideline-react-project-example","owner":"ERNI-Academy","description":"Frontend application done with React.js for usage as hypothetical real project example","archived":false,"fork":false,"pushed_at":"2022-07-07T08:11:23.000Z","size":2094,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-24T10:02:50.379Z","etag":null,"topics":["axios","infinite-scroll","javascript","material-ui","react","react-query","react-router","reactjs","redux","redux-toolkit","thunk"],"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/ERNI-Academy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null}},"created_at":"2021-11-24T14:35:38.000Z","updated_at":"2023-05-19T11:03:28.000Z","dependencies_parsed_at":"2022-09-18T22:23:27.054Z","dependency_job_id":null,"html_url":"https://github.com/ERNI-Academy/guideline-react-project-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ERNI-Academy%2Fguideline-react-project-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ERNI-Academy%2Fguideline-react-project-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ERNI-Academy%2Fguideline-react-project-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ERNI-Academy%2Fguideline-react-project-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ERNI-Academy","download_url":"https://codeload.github.com/ERNI-Academy/guideline-react-project-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758164,"owners_count":21638988,"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":["axios","infinite-scroll","javascript","material-ui","react","react-query","react-router","reactjs","redux","redux-toolkit","thunk"],"created_at":"2024-08-03T02:01:03.514Z","updated_at":"2025-05-08T02:30:33.209Z","avatar_url":"https://github.com/ERNI-Academy.png","language":"TypeScript","funding_links":[],"categories":["FrontEnd"],"sub_categories":[],"readme":"# About guideline-react-project-example\n\nFrontend application done with React.js for usage as hypothetical real project example\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n## Built With\n\nThis section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.\n\n- [React](https://es.reactjs.org/)\n- [Typescript](https://www.typescriptlang.org/)\n- [Redux](https://redux.js.org/)\n- [Axios](https://www.npmjs.com/package/axios)\n- [React router](https://www.npmjs.com/package/react-router)\n- [Material UI](https://material-ui.com/)\n- [React infinite scroll](https://www.npmjs.com/package/react-infinite-scroll-component)\n\n## Features\n\n- Learn to solve bugs using a complete React.js project project based on a town of dwarves being able to filter by different features and read information about a citizen\n\n### Main Screen\n\n- To enter to app click on 'Enter to city' button \u003c/br\u003e\n  \u003cimg src=\"https://live.staticflickr.com/65535/49766270988_4024cab072.jpg\" width=\"500\" height=\"371\" alt=\"brastlewark-main-screen\"\u003e\u003c/br\u003e\u003c/br\u003e\n\n- You can filter the list writing the name or through the filter section \u003c/br\u003e\n  \u003cimg src=\"https://live.staticflickr.com/65535/49767132757_58f616128f.jpg\" width=\"500\" height=\"377\" alt=\"list-screen\"\u003e\u003c/br\u003e\u003c/br\u003e\n\n- Filter section: \u003c/br\u003e\n  \u003cimg src=\"https://live.staticflickr.com/65535/49766283718_30e5057e7e.jpg\" width=\"500\" height=\"372\" alt=\"filter-section\"\u003e\u003c/br\u003e\u003c/br\u003e\n\n- Clicking on one row you can see the citizen information \u003c/br\u003e\n  \u003cimg src=\"https://live.staticflickr.com/65535/49767132722_0db9bf3000.jpg\" width=\"500\" height=\"376\" alt=\"info-creen\"\u003e\u003c/br\u003e\u003c/br\u003e\n\n- Clicking on one friend image inside the citizen section a modal will popup showing the friend information \u003c/br\u003e\n  \u003cimg src=\"https://live.staticflickr.com/65535/49767132692_c949b24240.jpg\" width=\"500\" height=\"374\" alt=\"friend-screen\"\u003e\u003c/br\u003e\u003c/br\u003e\nThe app will be oppened in your default browser with localhost:3000\n\n## Prerequisites\n\n- [Git](https://git-scm.com/)\n- [Node](https://nodejs.org/)\n\n## Installation\n\nInstallation instructions {{ Name }} by running:\n\n1. Clone the repo\n\n   ```sh\n   git clone https://github.com/ERNI-Academy/guideline-react-project-example.git\n   ```\n\n2. Enter to directory\n\n    ```sh\n    cd guideline-react-project-example\n    ```\n\n3. Install packages\n\n    ```sh\n    npm install\n    ```\n\n4. Run project\n\n    ```sh\n    npm start\n    ```\n\nThe app will be oppened in your default browser with localhost:3000\n\n## Contributing\n\nPlease see our [Contribution Guide](CONTRIBUTING.md) to learn how to contribute.\n\n## License\n\n![MIT](https://img.shields.io/badge/License-MIT-blue.svg)\n\n(LICENSE) © 2022 [ERNI - Swiss Software Engineering](https://www.betterask.erni)\n\n## Code of conduct\n\nPlease see our [Code of Conduct](CODE_OF_CONDUCT.md)\n\n## Stats\n\n![https://repobeats.axiom.co/api/embed/04ab3235bafcb45b206fb31b39a3ec83502dc531.svg](https://repobeats.axiom.co/api/embed/04ab3235bafcb45b206fb31b39a3ec83502dc531.svg)\n\n## Follow us\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/ERNI?style=social)](https://www.twitter.com/ERNI)\n[![Twitch Status](https://img.shields.io/twitch/status/erni_academy?label=Twitch%20Erni%20Academy\u0026style=social)](https://www.twitch.tv/erni_academy)\n[![YouTube Channel Views](https://img.shields.io/youtube/channel/views/UCkdDcxjml85-Ydn7Dc577WQ?label=Youtube%20Erni%20Academy\u0026style=social)](https://www.youtube.com/channel/UCkdDcxjml85-Ydn7Dc577WQ)\n[![Linkedin](https://img.shields.io/badge/linkedin-31k-green?style=social\u0026logo=Linkedin)](https://www.linkedin.com/company/erni)\n\n## Contact\n\n📧 [esp-services@betterask.erni](mailto:esp-services@betterask.erni)\n\nDavid Carmona Maroto (\u003chttps://www.linkedin.com/in/davidcarmonamaroto/\u003e)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/davidwalker2235\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/14020687?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edavidwalker2235\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/ERNI-Academy/guideline-react-project-example/commits?author=davidwalker2235\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#content-davidwalker2235\" title=\"Content\"\u003e🖋\u003c/a\u003e \u003ca href=\"https://github.com/ERNI-Academy/guideline-react-project-example/commits?author=davidwalker2235\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#design-davidwalker2235\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#ideas-davidwalker2235\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-davidwalker2235\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/ERNI-Academy/guideline-react-project-example/commits?author=davidwalker2235\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#example-davidwalker2235\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/ERNI-Academy/guideline-react-project-example/pulls?q=is%3Apr+reviewed-by%3Adavidwalker2235\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FERNI-Academy%2Fguideline-react-project-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FERNI-Academy%2Fguideline-react-project-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FERNI-Academy%2Fguideline-react-project-example/lists"}