{"id":26218097,"url":"https://github.com/arnobt78/reviews--react-fundamental-project-3","last_synced_at":"2025-03-12T13:15:29.987Z","repository":{"id":276533915,"uuid":"929555705","full_name":"arnobt78/Reviews--React-Fundamental-Project-3","owner":"arnobt78","description":"This project is a simple React application that displays user reviews. Users can navigate through the reviews, view a random review, and see the details of each reviewer.","archived":false,"fork":false,"pushed_at":"2025-02-08T20:28:30.000Z","size":725,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T21:25:11.674Z","etag":null,"topics":["html-css-javascript","netlify-deployment","react","react-dom","react-fundamentals","react-icons","react-vite","reactjs","reactjs-components","reviews"],"latest_commit_sha":null,"homepage":"https://reviews-arnob.netlify.app/","language":"CSS","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/arnobt78.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":"2025-02-08T20:21:29.000Z","updated_at":"2025-02-08T20:28:34.000Z","dependencies_parsed_at":"2025-02-08T21:35:38.082Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Reviews--React-Fundamental-Project-3","commit_stats":null,"previous_names":["arnobt78/reviews--react-fundamental-project-3"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FReviews--React-Fundamental-Project-3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FReviews--React-Fundamental-Project-3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FReviews--React-Fundamental-Project-3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FReviews--React-Fundamental-Project-3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Reviews--React-Fundamental-Project-3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243222183,"owners_count":20256229,"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":["html-css-javascript","netlify-deployment","react","react-dom","react-fundamentals","react-icons","react-vite","reactjs","reactjs-components","reviews"],"created_at":"2025-03-12T13:15:29.292Z","updated_at":"2025-03-12T13:15:29.970Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cimg width=\"637\" alt=\"Screenshot 2025-02-09 at 02 12 20\" src=\"https://github.com/user-attachments/assets/510475f3-12ea-43bd-a611-35a1142d3ebf\" /\u003e\n\n## Reviews Project - React Fundamental Project 3\n\nThis project is a simple React application that displays user reviews. Users can navigate through the reviews, view a random review, and see the details of each reviewer.\n\n**Online Live:** https://reviews-arnob.netlify.app/\n\n## Setup\n\n1. **Clone the repository:**\n\n```sh\n   git clone \u003crepository-url\u003e\n   cd \u003crepository-directory\u003e\n```\n\n2. **Install dependencies:**\n\n```sh\n   npm install\n```\n\n3. **Run the development server:**\n\n```sh\n   npm run dev\n```\n\n## Project Details and Steps\n\n### Explore Data\n\nNavigate to data.js and take a look at the data structure\n\n### Import Reviews\n\nFirst, import the reviews data into your project. This data should be an array of objects, with each object representing a person's review and containing properties such as name, job, image URL, and text.\n\n### Setup State Value (Index)\n\nThen, set up a state value that controls which person from the list is displayed.\n\n### React Icons (Optional)\n\n[Docs](https://react-icons.github.io/react-icons/)\n\n```sh\nnpm install react-icons --save\n```\n\nApp.jsx\n\n```js\nimport { FaBeer } from \"react-icons/fa\";\nconst App = () =\u003e {\n  return;\n  \u003cdiv\u003e\n    \u003ch2\u003eReviews Starter\u003c/h2\u003e;\n    \u003cFaBeer className=\"beer\" /\u003e\n  \u003c/div\u003e;\n};\n```\n\n### Render First Person\n\nTo render the first person in the list, you can access the first item in the reviews array and use its properties to display the person's image (inline styles), name, job, and review text.\n\n### Prev and Next\n\nTo allow the user to cycle through the reviews, you can set up buttons to display the next and previous reviews in the list. You can do this by keeping track of the current index in the reviews array, and updating the index when the user clicks the next or previous button. You can then use the updated index to access the corresponding person's review from the reviews array.\n\n### Random\n\nTo allow the user to display a random person's review, you can set up a button with functionality to randomly select an index in the reviews array. You can then use the selected index to display the corresponding person's review.\n\n### Extra\n\nThe modulus operator in JavaScript is represented by the percent sign (%). It returns the remainder of a division operation between two numbers.\n\nOverall, the flow of the application should look something like this:\n\n- Import the reviews data into your project as an array of objects.\n- Set up the reviews data as a state variable using the useState hook.\n- Render the first person's review in the list using their image, name, job, and text properties.\n- Set up buttons to display the next and previous reviews in the list. Keep track of the current index in the reviews array and update it when the user clicks the next or previous button.\n- Set up a button to display a random person's review. This button should select a random index in the reviews array and use it to display the corresponding person's review.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Freviews--react-fundamental-project-3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Freviews--react-fundamental-project-3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Freviews--react-fundamental-project-3/lists"}