{"id":15131299,"url":"https://github.com/tiagom13/challenge-tractian","last_synced_at":"2026-01-28T18:04:22.355Z","repository":{"id":256500655,"uuid":"855220329","full_name":"TiagoM13/challenge-tractian","owner":"TiagoM13","description":"Challenge TRACTIAN","archived":false,"fork":false,"pushed_at":"2024-09-12T16:30:41.000Z","size":8117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T15:35:40.748Z","etag":null,"topics":["axios","react","react-hooks","react-router-dom","reactjs","styled-components","typecript","vite"],"latest_commit_sha":null,"homepage":"","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/TiagoM13.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":"2024-09-10T14:16:42.000Z","updated_at":"2024-09-13T11:44:54.000Z","dependencies_parsed_at":"2024-09-11T05:46:52.361Z","dependency_job_id":"ad3d91e0-5c5e-469e-b87b-bf53b52c9ae0","html_url":"https://github.com/TiagoM13/challenge-tractian","commit_stats":null,"previous_names":["tiagom13/challenge-tractian"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/TiagoM13/challenge-tractian","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiagoM13%2Fchallenge-tractian","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiagoM13%2Fchallenge-tractian/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiagoM13%2Fchallenge-tractian/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiagoM13%2Fchallenge-tractian/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TiagoM13","download_url":"https://codeload.github.com/TiagoM13/challenge-tractian/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TiagoM13%2Fchallenge-tractian/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28848367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["axios","react","react-hooks","react-router-dom","reactjs","styled-components","typecript","vite"],"created_at":"2024-09-26T03:40:32.829Z","updated_at":"2026-01-28T18:04:22.336Z","avatar_url":"https://github.com/TiagoM13.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Challenge TRACTIAN\n\n### Screenshot / Layout\n\n![Screenshot](./src/assets/screenshots/Challenge%20TRACTIAN%20-%20Google%20Chrome%2012_09_2024%2011_31_01.png)\n\n### Demo Video\n\n![Screenshot](./src/assets/gif/Challenge-TRACTIAN-Google-Chrome-2024-09-12-11-40-00.gif)\n\n## Developed Features\n- **Hierarchical Listing of Locations, Sublocations, Assets and Components:** I structured the visualization to show the locations and their sublocations, allowing the user to have a clear view of the assets and their respective components.\n\n- **Filter System:** I created a filter system that allows you to search by asset, component and location name, while always maintaining the original hierarchy, which I consider essential for clear navigation.\n\n- **Dynamic Sidebar:** The sidebar offers a complete hierarchical view, where assets, sub-assets, locations and sub-locations can be navigated quickly and efficiently.\n\n## Technologies Used\n#### Frontend:\n- **React:** I used React because of its ability to create interactive and scalable interfaces.\n- **Vite:** I chose to use Vite as a build tool because of its speed and efficiency during development. It offers a significantly more agile development experience compared to other tools such as Webpack, especially in React projects.\n- **TypeScript:** Static typing helped me avoid several errors during development time, in addition to making the code more readable.\n- **Styled Components:** For styling the components, I used styled-components to keep the CSS organized and encapsulated.\n- **React Router DOM:** I implemented route management with React Router to facilitate navigation between different sections of the application.\n- **Axios:** I used Axios to make HTTP requests, as it offers a simpler and more intuitive API for working with promises and makes error handling easier, when compared to fetch.\n\n#### Backend\nThe API used was made available by the company to access company, location and asset data. It only works for GET type requests, with the following endpoints:\n\n1. **/companies:** Returns all registered companies.\n2. **/companies/:companieId/locations:** Returns all locations associated with a specific company.\n3. **/companies/:companieId/assets:** Returns all assets of a specific company.\n\n**API Base URL:** https://fake-api.tractian.com\n\n### Proposed Improvements\n\n#### 1. Implementation of Automated Tests:\n- **Motivation:** During development, the lack of tests was a limitation. I believe that adding automated tests (unit and integration) would be crucial to ensure the robustness of the system, especially in future evolutions.\n- **Next Step:** Use Jest and React Testing Library to cover the main functionalities, ensuring that the search, hierarchical listing and rendering of the components are correct.\n#### 2. State Management with Zustand:\n- **Motivation:** The state is currently being managed with native React hooks. Although it works, when dealing with data from multiple companies and their hierarchies, a solution like Zustand could provide better organization and performance.\n- **Next Step:** Integrate Zustand to manage the global state of the application, especially to optimize filter control and persistence of company, location and asset data. #### 3. Filter System Optimization:\n- **Motivation:** The filter system works correctly, but could be optimized to apply more complex filters (e.g. by operational status, asset category, and location).\n- **Next Step:** Create an advanced filter interface where the user can select multiple criteria, improving usability.\n#### 4. Performance Optimization:\n- **Motivation:** In large data sets, performance can be an issue. Tools like React.memo and lazy loading could be applied to improve the fluidity of the interface.\n- **Next Step:** Implement memoization in heavy components and optimize data loading with caching and lazy loading of components when necessary.\n#### 5. Responsive Design and Accessibility:\n- **Motivation:** Although the design is adapted for large screens, mobile devices may offer a limited experience.\n- **Next Step:** Improve responsive design, ensuring that the application is fully accessible and usable on smartphones and tablets.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiagom13%2Fchallenge-tractian","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiagom13%2Fchallenge-tractian","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiagom13%2Fchallenge-tractian/lists"}