{"id":19961713,"url":"https://github.com/doiim/cartesi-ts-react-sqlite","last_synced_at":"2025-03-01T16:41:41.259Z","repository":{"id":217727017,"uuid":"744675781","full_name":"doiim/cartesi-ts-react-sqlite","owner":"doiim","description":"The project is a React application built with Create React App and utilizes TypeScript for type safety.","archived":false,"fork":false,"pushed_at":"2024-06-10T19:09:08.000Z","size":12237,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-12T07:45:16.837Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doiim.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}},"created_at":"2024-01-17T19:30:48.000Z","updated_at":"2024-05-21T17:55:33.000Z","dependencies_parsed_at":"2024-01-23T18:53:04.960Z","dependency_job_id":"9a5c12d7-bd85-4cf9-8625-3956a780779c","html_url":"https://github.com/doiim/cartesi-ts-react-sqlite","commit_stats":null,"previous_names":["doiim/cartesi-ts-react-sqlite"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fcartesi-ts-react-sqlite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fcartesi-ts-react-sqlite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fcartesi-ts-react-sqlite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doiim%2Fcartesi-ts-react-sqlite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doiim","download_url":"https://codeload.github.com/doiim/cartesi-ts-react-sqlite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396739,"owners_count":19956404,"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":[],"created_at":"2024-11-13T02:08:16.242Z","updated_at":"2025-03-01T16:41:41.233Z","avatar_url":"https://github.com/doiim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cartesi Typescript React SQLite\n\nThe project is a React application built with Create React App and utilizes TypeScript for type safety. It is managed using npm as the package manager. The goal of the project is to create a template that streamlines the process of kickstarting new projects. The template incorporates the latest version of React and integrates with Ethers, allowing for seamless interaction with the underlying blockchain. For testing purposes, a pre-deployed demo on the Sepolia Network is available for users to explore before starting their own development.\n\n[Live Demo](https://doiim.github.io/cartesi-ts-react-sqlite/)\n\n## Installation\n\nIn case you do not reach here via create-react-app, you will be required to install the dependencies and make a copy of the example environment variables.\n\n```sh\nnpm install\ncp .env.example .env.development.local\n```\n\nBefore run this app it would be required to run the backend service for it. To run a local backend service for this app it is required [Cartesi CLI](https://docs.cartesi.io/cartesi-rollups/1.3/quickstart/).\n\n1. [Install Cartesi CLI](https://docs.cartesi.io/cartesi-rollups/1.3/quickstart/)\n2. Clone the backend repo and install it\n\n```sh\ngit clone https://github.com/doiim/cartesi-ts-sqlite\ncd path\ncartesi build\n```\n\n## Running Locally\n\nTo run a local back end service, in a separate terminal window, just access the backend folder and run:\n\n```sh\ncartesi run\n```\n\nRuns the front end app in the development mode.\n\n```sh\nnpm start\n```\n\n## How this project is structure\n\n![Cartesi project structure](https://github.com/doiim/cartesi-react-bootstrap/assets/13040410/2ab19829-997b-4964-82ca-b038f3fe2dd2)\n\n### Front End [(github)](https://github.com/doiim/cartesi-ts-react-sqlite)\n\nA `Create React App` template that runs a `Typescript` supported app with `CSS Modules`. This app uses `Apollo Client` to update `Notices` from backend services and normal requests to call `Inspect` endpoint for fetch current state of the database. To call `Advance` inputs, the app uses `Ethers V5` to communicate with Backend EVM.\n\n#### How does CreateProducForm works\n\n![Cartesi Create Product Sequence](https://github.com/doiim/cartesi-react-sqlite-boilerplate/assets/13040410/c47fe872-d2ea-417f-8cf9-1ab82ee12ee3)\n\n1. **User** send a Input(Advance) transaction to add a new product to the database.\n2. Once transaction is confirmed by the **EVM**, user receive back the confirmation.\n3. The **Cartesi Machine** than grab the Input from the **EVM** and send to the **Validator** backend service.\n4. **Validator** process the Input(Advance) adding the data to the database.\n5. **Validator** then sends a Notice to the **Cartesi Machine** with the confirming the Payload.\n6. That Notice is then Cached on the **GraphQL** service that runs on **Validator** machine.\n\n#### How does ListNotices works\n\n![Cartesi List Notices Sequence](https://github.com/doiim/cartesi-react-sqlite-boilerplate/assets/13040410/6a134172-ab9c-4c04-9cc1-8f3f352d96ad)\n\n1. Once **Frontend** is started it creates a Apollo Client service to listen for the **GraphQL service** running on the **Validator** machine.\n2. Every time that a new Notice appears on **GraphQL service** it is added to the list on front-end and reported back to the **User**.\n\n#### How does ListProducts works\n\n![Cartesi List Products Sequence](https://github.com/doiim/cartesi-react-sqlite-boilerplate/assets/13040410/89d7c1a1-a90c-410d-a561-302da05f5e67)\n\n1. Once **Frontend** is started it creates a Apollo Client service to listen for the **GraphQL service** running on the **Validator** machine.\n2. Every time that a new Notice appears on **GraphQL service** it is added to the list.\n3. Then **Frontend** then make a Inspect call to grab the current status of database from **Validator** service.\n4. Once data is returned, it automatically updated the Products table.\n\n### Back End [(github)](https://github.com/doiim/cartesi-ts-sqlite)\n\nA `Cartesi` template machine that runs a `Typescript` node service along with `viem` to convert values from/to Hex strings. We could have switched to `Ethers` but the idea was to reduce the amount to code, and the `Cartesi` template used already have support to `viem`. The database runs `SQLite` with WASM support due to the nature of the Risc-V Node has no native support to `SQLite` bindings.\n\nThis will run an [anvil](https://book.getfoundry.sh/reference/anvil/) node as a local blockchain, and the GraphQL service and Inspect Service.\n\nThe Database consists in a simple SQLite database with a table called PRODUCTS, each product has an ID and a NAME. IDs are unique so in case user tries to register PRODUCT with same ID the backend will reject the attempt.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nThis project is meant to run on [Cartesi Machine](https://docs.cartesi.io/), the tool used to run and deploy the backend to public networks was [Cartesi](https://docs.cartesi.io/cartesi-rollups/1.3/quickstart/).\n\nThis project is based on the following repositories from Cartesi team:\n\n- [Sunodo Typescript template project](https://github.com/sunodo/sunodo-templates/tree/main/typescript)\n- [Backend SQLite Image](https://github.com/cartesi/rollups-examples/tree/main/sqlite)\n- [Front-end Echo Example](https://github.com/cartesi/rollups-examples/tree/main/frontend-echo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoiim%2Fcartesi-ts-react-sqlite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoiim%2Fcartesi-ts-react-sqlite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoiim%2Fcartesi-ts-react-sqlite/lists"}