{"id":26218098,"url":"https://github.com/arnobt78/tours--react-fundamental-project-2","last_synced_at":"2025-03-12T13:15:30.021Z","repository":{"id":276531631,"uuid":"929548172","full_name":"arnobt78/Tours--React-Fundamental-Project-2","owner":"arnobt78","description":"This project is a React application that fetches and displays a list of tours from an external API. Users can view tour details, remove tours from the list, and re-fetch the tours.","archived":false,"fork":false,"pushed_at":"2025-02-08T20:06:58.000Z","size":2631,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T21:18:35.030Z","etag":null,"topics":["html-css-javascript","react","react-components","react-fundamentals","react-vite","reactjs","tour-guide-app"],"latest_commit_sha":null,"homepage":"https://tour-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-08T19:56:06.000Z","updated_at":"2025-02-08T20:07:01.000Z","dependencies_parsed_at":"2025-02-08T21:28:37.628Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Tours--React-Fundamental-Project-2","commit_stats":null,"previous_names":["arnobt78/tours--react-fundamental-project-2"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTours--React-Fundamental-Project-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTours--React-Fundamental-Project-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTours--React-Fundamental-Project-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FTours--React-Fundamental-Project-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Tours--React-Fundamental-Project-2/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","react","react-components","react-fundamentals","react-vite","reactjs","tour-guide-app"],"created_at":"2025-03-12T13:15:29.363Z","updated_at":"2025-03-12T13:15:30.012Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1153\" alt=\"Screenshot 2025-02-09 at 01 48 04\" src=\"https://github.com/user-attachments/assets/6a741f3f-b8c8-45f1-9a38-97f30cb9b8f9\" /\u003e\u003cimg width=\"1139\" alt=\"Screenshot 2025-02-09 at 01 48 41\" src=\"https://github.com/user-attachments/assets/db897677-0e6f-456d-b90f-eaf8c2fbba07\" /\u003e\n\n## Tours Project - React Fundamental Project 2\n\nThis project is a React application that fetches and displays a list of tours from an external API. Users can view tour details, remove tours from the list, and re-fetch the tours.\n\n**Online Live:** https://tour-arnob.netlify.app/\n\n## Setup\n\n1. Clone the repository.\n\n2. Install dependencies:\n\n```sh\nnpm install\n```\n\n## Project Details and Steps\n\n### Setup\n\nFirst create - three components (Tours, Tour, and Loading), you can create three separate files in your project directory: Tours.jsx, Tour.jsx, and Loading.jsx. In each of these files, you will define a React functional component that returns JSX code for rendering the respective component.\n\n### Fetch Tours\n\nThe Tours component will be responsible for rendering a list of Tour components. In App.jsx, you will fetch the tours data from a URL using the fetch API. Before the data is loaded, you should show a loading spinner or message, which can be implemented using the Loading component.\n\n### Render Tours\n\nOnce the data is loaded, you can set the state of your component to store the tours data. You can then map over the tours array and render a Tour component for each tour. Each Tour component will receive the tour data as props, including the tour's id, image, info, name, and price.\n\n### Remove Tour\n\nTo implement the \"remove tour\" functionality, you can add a button to each Tour component that, when clicked, removes the tour from the list of tours. You can achieve this by updating the state of the Tours component to remove the tour from the tours array.\n\n### Read More\n\nTo implement the \"read more\" functionality, you can add a button to each Tour component that, when clicked, expands the description of the tour. You can achieve this by updating the state of the Tour component to toggle a \"read more\" flag, and conditionally rendering the full description based on the flag.\n\n### Re-fetch Tours\n\nFinally, you can implement a \"re-fetch\" functionality by adding a button or other user interface element that, when clicked, re-fetches the tours data from the URL and updates the state of the Tours component. You may also want to add a loading state again during the re-fetching process.\n\nOverall, the flow of the application should look something like this:\n\n- App.jsx fetches tours data from a URL and sets the state of the Tours component to store the data.\n- The Tours component maps over the tours array and renders a Tour component for each tour.\n- Each Tour component has a \"remove tour\" button and a \"read more\" button.When the \"remove tour\" button is clicked, the Tours component updates its state to remove the tour from the tours array.\n\n- When the \"read more\" button is clicked, the Tour component updates its state to toggle a \"read more\" flag and conditionally renders the full description.\n\n- When the \"re-fetch\" button is clicked, the Tours component re-fetches the tours data from the URL and updates its state.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ftours--react-fundamental-project-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Ftours--react-fundamental-project-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ftours--react-fundamental-project-2/lists"}