RISE Logo-Light

Setup

Project setup, backend and frontend initialization

Project Setup

Create Project Structure

This project uses a monorepo structure with two apps:

mkdir risex-tg-bot
cd risex-tg-bot
npm init -y

Create the following folder structure:

risex-tg-bot/
├── apps/
│   ├── tg-bot/          # Telegram bot backend
│   └── frontend/        # Registration UI
├── package.json
└── .gitignore

Update your root package.json:

package.json
{
  "name": "risex-tg-bot",
  "version": "1.0.0",
  "scripts": {
    "dev:tg-bot": "cd apps/tg-bot && npm run dev",
    "dev:frontend": "cd apps/frontend && npm run dev",
    "dev": "concurrently \"npm run dev:tg-bot\" \"npm run dev:frontend\"",
    "build": "npm run build:tg-bot && npm run build:frontend",
    "build:tg-bot": "cd apps/tg-bot && npm run build",
    "build:frontend": "cd apps/frontend && npm run build"
  },
  "devDependencies": {
    "concurrently": "^9.1.0"
  }
}

Install the root dependency:

npm install
yarn install
pnpm install
bun install

Set Up the Telegram Bot

First, create a Telegram bot through BotFather:

Create the Bot

  1. Open Telegram and search for @BotFather
  2. Send /newbot and follow the prompts
  3. Choose a name (e.g., "RISEx Trader")
  4. Choose a username (must end in "bot", e.g., "risex_trader_bot")
  5. Copy the bot token as you'll need it later

RISEx Telegram Bot Profile


Initialize the Backend

Create the Backend App

Create the Telegram bot app:

cd apps
mkdir tg-bot
cd tg-bot
npm init -y

Install Dependencies

npm install telegraf axios openai viem zod express cors dotenv
npm install -D typescript @types/node tsx
yarn add telegraf axios openai viem zod express cors dotenv
yarn add -D typescript @types/node tsx
pnpm add telegraf axios openai viem zod express cors dotenv
pnpm add -D typescript @types/node tsx
bun add telegraf axios openai viem zod express cors dotenv
bun add -D typescript @types/node tsx

Key packages:

  • telegraf - Telegram bot framework
  • axios - HTTP client for RISEx API calls
  • openai - OpenRouter/OpenAI SDK for GPT integration
  • viem - EIP-712 signing and cryptography
  • zod - Runtime type validation
  • express - HTTP server for frontend API routes

Configure TypeScript

Create tsconfig.json:

apps/tg-bot/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2021",
    "module": "commonjs",
    "lib": ["ES2021"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Update package.json scripts:

apps/tg-bot/package.json
{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Create Data Storage

Create a data directory for JSON storage:

mkdir -p src/data

Create empty JSON files:

apps/tg-bot/src/data/signers.json
{}
apps/tg-bot/src/data/verified-links.json
{}

These files will store encrypted signer keys and Telegram-to-wallet mappings.


Initialize the Frontend

Navigate back to apps directory and create the frontend:

cd ..
npx create-next-app@latest frontend

Select these options:

  • Use recommended Next.js defaults: No, customize settings
  • TypeScript: Yes
  • Linter: None
  • React Compiler: Yes
  • Tailwind CSS: Yes
  • src/ directory: Yes
  • App Router: Yes
  • Customize import alias: No

If you've completed another tutorial, you can select No, reuse previous settings to skip configuration.

Install Frontend Dependencies

cd frontend
npm install rise-wallet wagmi viem ox @tanstack/react-query
yarn add rise-wallet wagmi viem ox @tanstack/react-query
pnpm add rise-wallet wagmi viem ox @tanstack/react-query
bun add rise-wallet wagmi viem ox @tanstack/react-query

Environment Variables

Create environment files for both apps.

Backend Environment

Create apps/tg-bot/.env:

apps/tg-bot/.env
# Telegram
TELEGRAM_BOT_TOKEN=your_bot_token_from_botfather

# RISEx
RISEX_API_URL=https://api.testnet.rise.trade

# Security
ENCRYPTION_SECRET=generate_with_node_command_below

# Server
PORT=8008
FRONTEND_URL=http://localhost:3000

# LLM
OPENROUTER_API_KEY=sk-or-v1-your_key_from_openrouter

Generate encryption secret:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Frontend Environment

Create apps/frontend/.env.local:

apps/frontend/.env.local
NEXT_PUBLIC_TELEGRAM_BOT_NAME=your_bot_username
NEXT_PUBLIC_API_URL=http://localhost:8008

Your project structure is now ready! In the next section, we'll build the backend services.