antho31 · antho31 · Sep 25, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/.gitignore b/.gitignore
@@ -1 +1,24 @@
-.vscode/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,5 @@
+image: gitpod/workspace-full
+
+tasks:
+  - init: curl https://i.jpillora.com/okp4/[email protected]! | bash
+    name: Install OKP4 CLI
diff --git a/README.md b/README.md
@@ -1,12 +1,16 @@
-# Template project
+# Web UI Boilerplates
 
-> Template for opensource projects [@okp4](https://okp4.network).
+> Boilerplates to build UIs interacting with the [@okp4](https://okp4.network) protocol.
 
 [![lint](https://img.shields.io/github/actions/workflow/status/okp4/template-oss/lint.yml?branch=main&label=lint&style=for-the-badge&logo=github)](https://github.com/okp4/template-oss/actions/workflows/lint.yml)
 [![conventional commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=for-the-badge&logo=conventionalcommits)](https://conventionalcommits.org)
 [![contributor covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=for-the-badge)](https://github.com/okp4/.github/blob/main/CODE_OF_CONDUCT.md)
 [![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg?style=for-the-badge)](https://opensource.org/licenses/BSD-3-Clause)
 
+## Frameworks
+
+- [Vite](./vite)
+
 ## You want to get involved? 😍
 
 Please check out OKP4 health files :

diff --git a/vite/.eslintrc.cjs b/vite/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: ["@okp4"],
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": [
+            "warn",
+            { allowConstantExport: true },
+        ],
+    },
+};
diff --git a/vite/README.md b/vite/README.md
@@ -0,0 +1,34 @@
+# OKP4 Boilerplate with React + TypeScript + Vite
+
+Front-end boilerplate to rapidly develop UIs for interacting with the OKP4 blockchain. Utilizing Vite, it shows how to handle the connection, the interaction with smart contracts, and the decoding of transactions.
+
+![Preview](./src/assets/global-preview.png)
+
+---
+
+## 🌟 Features
+
+- Pre-configured setup to connect to OKP4 testnet
+- Utility functions and [Graz](https://graz.sh/docs/) hooks to call, deploy, and interact with [OKP4 smart contracts](https://github.com/okp4/contracts)
+- Decode transactions to analyze onchain Prolog programs and more
+
+## 🛠 Prerequisites
+
+- Node.js >=18.x
+
+## 🖥 Get started
+
+To set up and run the project locally, follow the following steps:
+
+```bash
+npm i
+npm run dev
+```
+
+## 🆘 Support
+
+For bugs 🐛, feature requests 🌈, or other queries ❓, open an issue in the GitHub repository.
+
+## 📜 License
+
+This project is licensed under the BSD-3-Clause License. See LICENSE file for more details.
diff --git a/vite/index.html b/vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>