Skip to content

Commit 60bfbd5

Browse files
antho31antho31
authored
Merge pull request #2 from okp4/feat/vite-step-by-step-tuto
First OKP4 boilerplate, with Vite
2 parents d61183a + ab8e533 commit 60bfbd5

37 files changed

+9025
-3
lines changed

‎.gitignore‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
.vscode/
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.gitpod.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
image: gitpod/workspace-full
2+
3+
tasks:
4+
- init: curl https://i.jpillora.com/okp4/[email protected]! | bash
5+
name: Install OKP4 CLI

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
# Template project
1+
# Web UI Boilerplates
22

3-
> Template for opensource projects [@okp4](https://okp4.network).
3+
> Boilerplates to build UIs interacting with the [@okp4](https://okp4.network) protocol.
44
55
[![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)
66
[![conventional commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=for-the-badge&logo=conventionalcommits)](https://conventionalcommits.org)
77
[![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)
88
[![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg?style=for-the-badge)](https://opensource.org/licenses/BSD-3-Clause)
99

10+
## Frameworks
11+
12+
- [Vite](./vite)
13+
1014
## You want to get involved? 😍
1115

1216
Please check out OKP4 health files :

‎vite/.eslintrc.cjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: ["@okp4"],
5+
ignorePatterns: ["dist", ".eslintrc.cjs"],
6+
parser: "@typescript-eslint/parser",
7+
plugins: ["react-refresh"],
8+
rules: {
9+
"react-refresh/only-export-components": [
10+
"warn",
11+
{ allowConstantExport: true },
12+
],
13+
},
14+
};

‎vite/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# OKP4 Boilerplate with React + TypeScript + Vite
2+
3+
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.
4+
5+
![Preview](./src/assets/global-preview.png)
6+
7+
---
8+
9+
## 🌟 Features
10+
11+
- Pre-configured setup to connect to OKP4 testnet
12+
- Utility functions and [Graz](https://graz.sh/docs/) hooks to call, deploy, and interact with [OKP4 smart contracts](https://github.com/okp4/contracts)
13+
- Decode transactions to analyze onchain Prolog programs and more
14+
15+
## 🛠 Prerequisites
16+
17+
- Node.js >=18.x
18+
19+
## 🖥 Get started
20+
21+
To set up and run the project locally, follow the following steps:
22+
23+
```bash
24+
npm i
25+
npm run dev
26+
```
27+
28+
## 🆘 Support
29+
30+
For bugs 🐛, feature requests 🌈, or other queries ❓, open an issue in the GitHub repository.
31+
32+
## 📜 License
33+
34+
This project is licensed under the BSD-3-Clause License. See LICENSE file for more details.

‎vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)