{"id":18961018,"url":"https://github.com/itwin/synchronization-api-sample-app","last_synced_at":"2025-08-20T02:10:11.945Z","repository":{"id":38457993,"uuid":"391859992","full_name":"iTwin/synchronization-api-sample-app","owner":"iTwin","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-05T10:39:11.000Z","size":1112,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T16:11:23.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/iTwin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-02T07:54:12.000Z","updated_at":"2025-04-13T07:50:32.000Z","dependencies_parsed_at":"2024-08-05T12:09:55.823Z","dependency_job_id":null,"html_url":"https://github.com/iTwin/synchronization-api-sample-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iTwin/synchronization-api-sample-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2Fsynchronization-api-sample-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2Fsynchronization-api-sample-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2Fsynchronization-api-sample-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2Fsynchronization-api-sample-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iTwin","download_url":"https://codeload.github.com/iTwin/synchronization-api-sample-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iTwin%2Fsynchronization-api-sample-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271252993,"owners_count":24726918,"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-20T02:00:09.606Z","response_time":69,"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":[],"created_at":"2024-11-08T14:11:12.408Z","updated_at":"2025-08-20T02:10:11.901Z","avatar_url":"https://github.com/iTwin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Synchronization Storage API Sample\n\nThis is a code sample application that demonstrates usage of [Synchronization](https://developer.bentley.com/api-groups/synchronization/) API at [Bentley iTwin developer platform](https://developer.bentley.com).\n\nFor better understanding of Synchronization and Storage APIs, please refer to this [tutorial](https://developer.bentley.com/tutorials/synchronization-storage-tutorial/).\n\n## Prerequisites\n\n- [Git](https://git-scm.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Node](https://nodejs.org/en/): an installation of the latest security patch of Node 22. The Node installation also includes the **npm** package manager.\n- [Visual Studio Code](https://code.visualstudio.com/): an optional dependency, but the repository structure is optimized for its use.\n\n## Setup\n\nPlease make sure to follow these steps for running this code sample application:\n\n1.  Clone this repository.\n1.  Make sure npm or yarn is installed on your machine.\n1.  Register a new SPA at [My Apps](https://developer.bentley.com/my-apps/) with:\n\n    - Scopes: `itwin-platform`.\n    - Redirect Urls: `http://localhost:3000/signin-oidc`.\n\n1.  Create an [empty iModel](https://developer.bentley.com/my-imodels/). Note down context and iModel IDs.\n1.  `.env` file is required for setting up enviromental variables used by application. Create `.env` file at application root and fill out required environmental variables.\n\n    REACT_APP_ITWIN_ID=contextID (`REACT_APP_ITWIN_ID` is your created iTwin ID)\n\n    REACT_APP_IMODEL_ID=iModelID (`REACT_APP_IMODEL_ID` is your created iModel ID)\n\n    REACT_APP_CLIENT_ID=clientID (`REACT_APP_CLIENT_ID` is your [`registered application's`](https://developer.bentley.com/my-apps/) Client ID)\n\n    If you already have a Project pass Project ID in place of the iTwin ID, please refer to this [FAQ](https://developer.bentley.com/apis/itwins/#faq).\n\n1.  Run `yarn` in command line to install required packages.\n1.  Run `yarn run start` to run the application. Navigate to localhost:3000 in your browser.\n\n## Code overview\n\nCode is documented to help user understand how data is being used from each API call, how authorization workflow is implemented, what is the purpose of each component and some other minor details.\n\nWe encourage user to understand how OAuth2 authorization workflow is implemented. In this code sample, authentication flow implementation details can be found at `src/auth` files.\n\n`src/components` is where most of the application logic is written. Component namings are self-explanatory, refer to each for further explanations of each API call and how the data is used.\n\n## Application overview\n\n### Starting state\n\nIf the iModel from `.env` file is empty, the page displays a gray drop area. When the user drags and drops some file(s), the area will change depending on the file type: either turn red and show a message with allowed file types or turn green and notify that the files are being uploaded to storage.\n![Starting state](img/Starting_state.png)\n\n### Synchronization in progress state\n\nWhen files are uploaded to storage, the synchronization process begins. A table containing information about each file is displayed with constant updates until the synchronization process is finished.\n![Synchronization in progress state](img/Sync_in_progress_state.png)\n\nDuring the synchronization process the user is not allowed to drop files in the area. Dragging a file over the drop area will show a warning. If a file is dropped despite the warning, nothing will happen.\n![Synchronization warning state](img/Sync_warning_state.png)\n\n### Synchronization done state\n\nWhen every file is synchronized and the process is fully finished, the page will display the table and will allow to drop more files in the drop area (the area overlay will only be shown when a file is dragged over it).\n![Synchronization done state](img/Sync_done_state.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitwin%2Fsynchronization-api-sample-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitwin%2Fsynchronization-api-sample-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitwin%2Fsynchronization-api-sample-app/lists"}