{"id":25223099,"url":"https://github.com/razee4315/nutech-tour","last_synced_at":"2025-08-11T05:14:59.079Z","repository":{"id":275679948,"uuid":"926839100","full_name":"Razee4315/nutech-tour","owner":"Razee4315","description":"This is a React-based 360° Virtual Tour application that allows users to explore different locations through interactive panoramic images with customizable hotspots.","archived":false,"fork":false,"pushed_at":"2025-07-14T18:57:46.000Z","size":47073,"stargazers_count":6,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-14T23:34:08.851Z","etag":null,"topics":["360-photo","360-video","campus-project","project","university-project","virtual","virtual-reality","visit"],"latest_commit_sha":null,"homepage":"https://razee4315.github.io/nutech-tour/","language":"JavaScript","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/Razee4315.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-02-04T00:09:03.000Z","updated_at":"2025-07-14T18:57:03.000Z","dependencies_parsed_at":"2025-03-22T21:29:43.514Z","dependency_job_id":"6cd4dd14-b38a-434a-9306-9f61934d6746","html_url":"https://github.com/Razee4315/nutech-tour","commit_stats":null,"previous_names":["razee4315/nutech-tour"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Razee4315/nutech-tour","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Razee4315%2Fnutech-tour","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Razee4315%2Fnutech-tour/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Razee4315%2Fnutech-tour/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Razee4315%2Fnutech-tour/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Razee4315","download_url":"https://codeload.github.com/Razee4315/nutech-tour/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Razee4315%2Fnutech-tour/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269833145,"owners_count":24482390,"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-11T02:00:10.019Z","response_time":75,"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":["360-photo","360-video","campus-project","project","university-project","virtual","virtual-reality","visit"],"created_at":"2025-02-10T23:59:35.726Z","updated_at":"2025-08-11T05:14:59.042Z","avatar_url":"https://github.com/Razee4315.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NuTech 360° Virtual Tour\n\n## Project Overview\n\nThis is a React-based 360° Virtual Tour application that allows users to explore different locations through interactive panoramic images with customizable hotspots .\n\n## Features\n\n- 360° Panoramic Image Viewing\n- Interactive Hotspots\n- Multiple Location Navigation\n- Responsive Design\n\n## Prerequisites\n\nBefore you begin, ensure you have met the following requirements:\n\n- Node.js (v14.0.0 or later)\n- npm (v6.0.0 or later)\n\n## Installation\n\n1. Clone the repository\n```bash\ngit clone https://github.com/Razee4315/nutech-tour.git\ncd nutech-tour\n```\n\n2. Install dependencies\n```bash\nnpm install\n```\n\n**Note**: Dependency conflicts have been resolved! The `--legacy-peer-deps` flag is no longer required.\n\n## Running the Project\n\nTo run the project locally:\n\n```bash\nnpm start\n```\n\nThe application will open in your default browser at `http://localhost:3000`\n\n## Understanding Hotspots\n\n### What are Hotspots?\n\nHotspots are interactive points on a 360° panoramic image that users can click to:\n- Navigate between scenes\n- Display information\n- Trigger custom actions\n\n### Hotspot Types in This Project\n\n1. **Custom Hotspots**\n   - Allow custom interactions\n   - Can navigate between images\n   - Defined with `type: \"custom\"`\n\n2. **Info Hotspots**\n   - Display informational alerts\n   - Defined with `type: \"info\"`\n\n### Hotspot Configuration Example\n\n```javascript\n{\n  pitch: -10,  // Vertical position\n  yaw: 0,      // Horizontal position\n  type: \"custom\",\n  text: \"Go to Second Image\",\n  handleClick: (setCurrentLocation) =\u003e {\n    setCurrentLocation(1);  // Change to the second location\n  }\n}\n```\n\n## Project Structure\n\n- `src/components/TourView.js`: Main component for 360° tour\n- `public/images/`: Store your 360° panoramic images here\n- `src/styles/`: Additional styling (if needed)\n\n\n## Recent Updates\n\n### Dependency Conflicts Resolved ✅\n- **React 19 Compatibility**: Updated all dependencies to support React 19\n- **No More Legacy Peer Deps**: Removed the need for `--legacy-peer-deps` flag\n- **Updated Dependencies**:\n  - `@testing-library/react` → v15.0.0 (React 19 compatible)\n  - `@types/react` → v19.0.0\n  - `@types/react-dom` → v19.0.0\n  - `react-i18next` → v15.0.0\n  - `typescript` → v4.9.5 (compatible with react-scripts)\n\n## Troubleshooting\n\n- Ensure all images are in the correct format (jpg/png)\n- Check browser console for any errors\n- Verify Node.js and npm versions\n- If you encounter dependency issues, try deleting `node_modules` and `package-lock.json`, then run `npm install`\n\n## Technologies Used\n\n- React\n- Pannellum React\n- Styled Components\n\n## Contact\n\nOur Team members:\n- Saqlain Abbas (saqlainrazee@gmail.com)\n- Aleena Tahir (aleenatahirf23@nutech.edu.pk)\n- Aena Habib (aenahabibf23@nutech.edu.pk)\n- Sadia Mazhar (saidamazharf23@nutech.edu.pk)\n- Malaika Akhtar (malaikaakhtarf23@nutech.edu.pk)\n  \n\nProject Link: [https://razee4315.github.io/nutech-tour/](https://razee4315.github.io/nutech-tour/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazee4315%2Fnutech-tour","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frazee4315%2Fnutech-tour","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frazee4315%2Fnutech-tour/lists"}