In this comprehensive guide, we’ll walk through building a high-performance full-stack application using Node.js for the backend, Next.js for the frontend, MySQL for data storage, and Nginx as a reverse proxy. We’ll also cover Dockerizing the application and setting up a CI/CD pipeline, with UpCloud for hosting and database management.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (v16 or higher)
• Docker and Docker Compose
• Git
• MySQL client
• An UpCloud account (Sign up with our special promo link for extended benefits!)

Project Setup

Let’s create our project structure:

mkdir fullstack-app
cd fullstack-app
mkdir backend frontend

Backend Development

Initialize the backend project:

cd backend
npm init -y
npm install express mysql2 dotenv cors helmet express-rate-limit
npm install --save-dev nodemon @types/node @types/express

Create the backend application:

// backend/src/app.js
const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
require('dotenv').config();

const app = express();
// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());
// Rate limiting
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000,
    max: 100
});
app.use(limiter);
// Database connection pool
const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});
// Health check endpoint
app.get('/health', (req, res) => {
    res.status(200).json({ status: 'healthy' });
});
// Sample API endpoint
app.get('/api/data', async (req, res) => {
    try {
        const [rows] = await pool.query('SELECT * FROM your_table LIMIT 10');
        res.json(rows);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Backend server running on port ${PORT}`);
});

Frontend Development

Initialize the Next.js frontend:

cd ../frontend
npx create-next-app@latest .
npm install axios @chakra-ui/react @emotion/react @emotion/styled framer-motion

Create a sample page:

// frontend/pages/index.js
import { Box, Container, Heading, Text } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Home() {
    const [data, setData] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/data');
                setData(response.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        fetchData();
    }, []);
    return (
        <Container maxW="container.xl">
            <Box py={10}>
                <Heading mb={4}>Welcome to Our Full-Stack App</Heading>
                <Text>Data from backend:</Text>
                <pre>{JSON.stringify(data, null, 2)}</pre>
            </Box>
        </Container>
    );
}

Database Setup

1. Log in to your UpCloud account
2. Navigate to the Managed Databases section
3. Click “Create Database”
4. Select MySQL as the database type
5. Choose your preferred region
6. Select the appropriate plan

Create a .env file for database configuration:

# backend/.env
DB_HOST=your-db-host.upclouddb.com
DB_PORT=3306
DB_NAME=your_database_name
DB_USER=your_username
DB_PASSWORD=your_password
NODE_ENV=development
PORT=3000

Create the database schema:

-- Create a sample table
CREATE TABLE your_table (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Add some indexes
CREATE INDEX idx_name ON your_table(name);

Nginx Configuration

Create an Nginx configuration file:

# nginx.conf
events {
    worker_connections 1024;
}http {
    upstream backend {
        server backend:3000;
    }
    upstream frontend {
        server frontend:3000;
    }
    server {
        listen 80;
        server_name your-domain.com;
        # Frontend
        location / {
            proxy_pass http://frontend;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        # Backend API
        location /api {
            proxy_pass http://backend;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

Docker Setup

Create a Dockerfile for the backend:

# backend/Dockerfile
FROM node:16-alpine

WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Create a Dockerfile for the frontend:

# frontend/Dockerfile
FROM node:16-alpine

WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

Create a docker-compose.yml file:

# docker-compose.yml
version: '3.8'

services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - backend
      - frontend
  backend:
    build: ./backend
    environment:
      - NODE_ENV=development
      - DB_HOST=${DB_HOST}
      - DB_PORT=${DB_PORT}
      - DB_NAME=${DB_NAME}
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
    volumes:
      - ./backend:/usr/src/app
      - /usr/src/app/node_modules
  frontend:
    build: ./frontend
    environment:
      - NODE_ENV=development
    volumes:
      - ./frontend:/usr/src/app
      - /usr/src/app/node_modules

CI/CD Pipeline

Create a GitHub Actions workflow:

# .github/workflows/main.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v1
    - name: Login to Docker Hub
      uses: docker/login-action@v1
      with:
        username: ${{ secrets.DOCKER_HUB_USERNAME }}
        password: ${{ secrets.DOCKER_HUB_TOKEN }}
    - name: Build and push backend
      uses: docker/build-push-action@v2
      with:
        context: ./backend
        push: true
        tags: your-docker-hub-username/backend:latest
    - name: Build and push frontend
      uses: docker/build-push-action@v2
      with:
        context: ./frontend
        push: true
        tags: your-docker-hub-username/frontend:latest
    - name: Deploy to UpCloud
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.UPCLOUD_HOST }}
        username: ${{ secrets.UPCLOUD_USERNAME }}
        key: ${{ secrets.UPCLOUD_SSH_KEY }}
        script: |
          cd /path/to/your/app
          docker-compose pull
          docker-compose up -d

Deployment

To deploy your application:

1. Push your code to a Git repository
2. Set up your environment variables in UpCloud
3. Deploy using Docker Compose:

docker-compose up -d

Best Practices

1. Database Optimization: Use proper indexing and query optimization.
2. Caching: Implement Redis for caching frequently accessed data.
3. Security: Use HTTPS, implement proper authentication, and follow security best practices.
4. Monitoring: Set up proper monitoring and logging solutions.
5. Backup: Regularly backup your database and application data.
6. Load Balancing: Use Nginx for load balancing and SSL termination.

Special Offer

Ready to deploy your high-performance full-stack application? Get started with UpCloud today using our special promotion:

Extended Benefits:

• 30-day trial (instead of 7 days)
• 50€ in credits
• Full access to all features
• Managed MySQL database hosting

Click the link or copy and paste the link to your browser to get started

https://signup.upcloud.com/?promo=valblaze

Building a high-performance full-stack application with Node.js, MySQL, and Nginx doesn’t have to be complex. By following these best practices and using managed services like UpCloud, you can create a robust and scalable application that meets your needs.

Remember to:

• Optimize your database queries
• Implement proper caching
• Follow security best practices
• Set up monitoring and logging
• Use managed services for production deployments

Happy coding! 🚀

In this comprehensive guide, we’ll walk through the process of containerizing a Node.js application and deploying it on Kubernetes with auto-scaling capabilities. We’ll use managed Kubernetes service for a hassle-free cluster setup and deployment process.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (v14 or higher)
• Docker
• kubectl (Kubernetes CLI)
• An UpCloud account (Sign up with our special promo link for extended benefits!)

Project Setup

Let’s create a simple Node.js application that we’ll deploy:

mkdir k8s-nodejs-app
cd k8s-nodejs-app
npm init -y

Install the necessary dependencies:

npm install express dotenv cors helmet
npm install --save-dev nodemon

Create a basic Express application:

// src/app.js
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
require('dotenv').config();

const app = express();
// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());
// Health check endpoint
app.get('/health', (req, res) => {
    res.status(200).json({ status: 'healthy' });
});
// Sample endpoint
app.get('/', (req, res) => {
    res.json({
        message: 'Welcome to our Kubernetes-deployed Node.js app!',
        hostname: process.env.HOSTNAME,
        timestamp: new Date().toISOString()
    });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Containerizing the Application

Create a Dockerfile for our application:

# Dockerfile
FROM node:16-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Create a .dockerignore file:

node_modules
npm-debug.log
.env
.git
.gitignore

Build and test the Docker image locally:

docker build -t k8s-nodejs-app .
docker run -p 3000:3000 k8s-nodejs-app

Setting Up UpCloud Kubernetes

1. Log in to your UpCloud account
2. Navigate to the Kubernetes section
3. Click “Create Cluster”
4. Select your preferred region
5. Choose the appropriate node size and count
6. Configure your cluster settings

After cluster creation, download your kubeconfig file and set it up:

export KUBECONFIG=path/to/your/kubeconfig.yaml
kubectl get nodes

Kubernetes Deployment

Let’s create the necessary Kubernetes manifests. First, create a namespace:

# namespace.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: nodejs-app

Create a deployment configuration:

# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nodejs-app
  namespace: nodejs-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nodejs-app
  template:
    metadata:
      labels:
        app: nodejs-app
    spec:
      containers:
      - name: nodejs-app
        image: your-registry/k8s-nodejs-app:latest //get this from your dashboard
        ports:
        - containerPort: 3000
        resources:
          requests:
            cpu: "100m"
            memory: "128Mi"
          limits:
            cpu: "500m"
            memory: "256Mi"
        livenessProbe:
          httpGet:
            path: /health
            port: 3000
          initialDelaySeconds: 5
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /health
            port: 3000
          initialDelaySeconds: 5
          periodSeconds: 10

Create a service to expose the application:

# service.yaml
apiVersion: v1
kind: Service
metadata:
  name: nodejs-app-service
  namespace: nodejs-app
spec:
  selector:
    app: nodejs-app
  ports:
  - port: 80
    targetPort: 3000
  type: LoadBalancer

Create an Ingress resource for routing:

# ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: nodejs-app-ingress
  namespace: nodejs-app
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: your-domain.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: nodejs-app-service
            port:
              number: 80

Apply the configurations:

kubectl apply -f namespace.yaml
kubectl apply -f deployment.yaml
kubectl apply -f service.yaml
kubectl apply -f ingress.yaml

Auto-Scaling Configuration

Create a HorizontalPodAutoscaler (HPA) for automatic scaling:

# hpa.yaml
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: nodejs-app-hpa
  namespace: nodejs-app
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: nodejs-app
  minReplicas: 2
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 70

Apply the HPA configuration:

kubectl apply -f hpa.yaml

Monitoring and Maintenance

Monitor your deployment:

# Check pods status
kubectl get pods -n nodejs-app

# Check HPA status
kubectl get hpa -n nodejs-app
# View logs
kubectl logs -f deployment/nodejs-app -n nodejs-app

Best Practices

1. Resource Limits: Always set appropriate resource requests and limits for your containers.
2. Health Checks: Implement proper liveness and readiness probes.
3. Auto-scaling: Configure HPA based on your application’s needs.
4. Security: Use namespaces to isolate resources and implement network policies.
5. Monitoring: Set up proper monitoring and logging solutions.
6. Backup: Regularly backup your cluster configuration and data.

Special Offer

Ready to deploy your Node.js application on Kubernetes? Get started with UpCloud today using our special promotion:

Extended Benefits:

• 30-day trial (instead of 7 days)
• 50€ in credits
• Full access to all features
• Managed Kubernetes cluster hosting

Click the link or copy and paste the link to your browser to get started

https://signup.upcloud.com/?promo=valblaze

Conclusion

Deploying a Node.js application on Kubernetes with auto-scaling capabilities doesn’t have to be complex. By following these best practices and using managed services like UpCloud, you can create a robust and scalable deployment that grows with your needs.

Remember to:

• Always set appropriate resource limits
• Implement proper health checks
• Configure auto-scaling based on your needs
• Monitor your application’s performance
• Use managed services for production deployments

Happy deploying! 🚀

In today’s fast-paced digital world, building scalable and maintainable APIs is crucial for modern applications. In this comprehensive guide, we’ll walk through creating a robust Node.js API using Express, PostgreSQL, and Docker. We’ll also explore how to leverage UpCloud’s managed PostgreSQL service for production deployments.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (v14 or higher)
• Docker and Docker Compose
• Git

Project Setup

Let’s start by creating our project structure:

mkdir scalable-nodejs-api
cd scalable-nodejs-api
npm init -y

Install the necessary dependencies:

npm install express pg dotenv cors helmet express-rate-limit
npm install --save-dev nodemon @types/node @types/express

Database Design

Let’s create a simple but scalable database schema for our API. We’ll create a basic user management system:

-- Create users table
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    full_name VARCHAR(255) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create profiles table
CREATE TABLE profiles (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    bio TEXT,
    avatar_url VARCHAR(255),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create an index for faster email lookups
CREATE INDEX idx_users_email ON users(email);

Setting Up Managed PostgreSQL Database(Using UpCloud)

1. Log in to your UpCloud account
2. Navigate to the Managed Databases section
3. Click “Create Database”
4. Select PostgreSQL as the database type
5. Choose your preferred region
6. Select the appropriate plan based on your needs

After creating the database, UpCloud will provide you with connection details. Let’s create a .env file to store these credentials:

DB_HOST=your-db-host.upclouddb.com
DB_PORT=5432
DB_NAME=your_database_name
DB_USER=your_username
DB_PASSWORD=your_password
NODE_ENV=development
PORT=3000

Implementing the API

Let’s create the core API structure. First, let’s set up our database connection with connection pooling:

// src/config/database.js
const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    database: process.env.DB_NAME,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    max: 20, // Maximum number of clients in the pool
    idleTimeoutMillis: 30000,
    connectionTimeoutMillis: 2000,
});
module.exports = pool;

Now, let’s create our main application file:

// src/app.js
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
require('dotenv').config();

const app = express();
// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());
// Rate limiting
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100 // limit each IP to 100 requests per windowMs
});
app.use(limiter);
// Routes
app.use('/api/users', require('./routes/users'));
app.use('/api/profiles', require('./routes/profiles'));
// Error handling middleware
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).json({ error: 'Something went wrong!' });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Let’s create a sample route handler:

// src/routes/users.js
const express = require('express');
const router = express.Router();
const pool = require('../config/database');
const bcrypt = require('bcrypt');

// Get all users
router.get('/', async (req, res) => {
    try {
        const result = await pool.query('SELECT id, email, full_name, created_at FROM users');
        res.json(result.rows);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});
// Create new user
router.post('/', async (req, res) => {
    const { email, password, full_name } = req.body;
    try {
        const password_hash = await bcrypt.hash(password, 10);
        const result = await pool.query(
            'INSERT INTO users (email, password_hash, full_name) VALUES ($1, $2, $3) RETURNING id, email, full_name, created_at',
            [email, password_hash, full_name]
        );
        res.status(201).json(result.rows[0]);
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});
module.exports = router;

Docker Configuration

Let’s create a Dockerfile for our application:

# Dockerfile
FROM node:16-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

And a docker-compose.yml file for local development:

# docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
      - DB_HOST=${DB_HOST}
      - DB_PORT=${DB_PORT}
      - DB_NAME=${DB_NAME}
      - DB_USER=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

Best Practices

1. Connection Pooling: We’re using connection pooling to efficiently manage database connections.
2. Security: Implemented helmet for security headers and rate limiting for API protection.
3. Error Handling: Proper error handling middleware for consistent error responses.
4. Environment Variables: Using dotenv for configuration management.
5. Input Validation: Always validate user input before processing.
6. Indexing: Created appropriate indexes for frequently queried columns.

Deployment

To deploy your application:

1. Push your code to a Git repository
2. Set up your environment variables in UpCloud
3. Deploy using Docker:

docker build -t your-app-name .
docker run -d -p 3000:3000 your-app-name

Special Offer

Ready to deploy your scalable Node.js API? Get started with UpCloud today using special promotion:

Extended Benefits:

• 30-day trial (instead of 7 days)
• 50€ in credits
• Full access to all features
• Managed PostgreSQL database hosting

Click the link or copy and paste the link to your browser to get started

https://signup.upcloud.com/?promo=valblaze

Conclusion

Building a scalable Node.js API with PostgreSQL and Docker doesn’t have to be complicated. By following these best practices and using managed services like UpCloud, you can create robust and maintainable applications that scale with your needs.

Asset Chain provides a scalable blockchain platform, and its Telegram SDK simplifies building interactive mini apps. In this tutorial, we’ll create a Decentralized Voting System

Decentralized voting systems offer transparency and trustless mechanisms for decision-making in organizations, communities, or governance. Leveraging the Asset Chain Telegram Starter Kit, developers can build a user-friendly, decentralized voting app integrated with Telegram. This article demonstrates how to create such an application, from setup to deployment.

Step 1: Setting Up the Asset Chain Starter Kit

1. Clone the Starter Kit Repository:

git clone https://github.com/xendfinance/assetchain-telegram-starterkit-demo-app.git
cd assetchain-telegram-starterkit-demo-app

2. Install Dependencies:

npm install

3. Configure Environment Variables: Create a .env.local file and set up your environment variables:

INFURA_KEY=your_infura_api_key
PROJECT_ID=your_project_id

4. Start the Development Server:

npm run dev

Access the app at http://localhost:3000.

Step 2: Create a Voting Smart Contract

1. Write the Voting Contract: Save the following Solidity code in a file named Voting.sol:

pragma solidity ^0.8.0;

contract Voting {
    mapping(string => uint256) public votes;
    string[] public options;

    constructor(string[] memory _options) {
        options = _options;
    }

    function vote(string memory option) public {
        require(validOption(option), "Invalid voting option");
        votes[option]++;
    }

    function getVotes(string memory option) public view returns (uint256) {
        return votes[option];
    }

    function validOption(string memory option) internal view returns (bool) {
        for (uint i = 0; i < options.length; i++) {
            if (keccak256(abi.encodePacked(options[i])) == keccak256(abi.encodePacked(option))) {
                return true;
            }
        }
        return false;
    }
}

2. Deploy the Contract: Use Remix IDE to deploy the contract on Asset Chain. Provide the voting options (e.g., ["Option A", "Option B"]) during deployment.

Step 3: Define the Voting Logic

In src/components/VotingSystem.js, define the voting contract and integrate it with Asset Chain's EVM-compatible features.

"use client";
import React, { useState, useEffect } from "react";
import {
  useEvmWallet,
  configs,
} from "assetchain-telegram-app-starter-kit";

const VotingSystem = () => {
  const [candidates, setCandidates] = useState(["Alice", "Bob", "Charlie"]);
  const [votes, setVotes] = useState({});
  const [selectedCandidate, setSelectedCandidate] = useState("");

  const { connectEvmWallet, evmAddress, sendTransactionEvm } = useEvmWallet({
    network: configs.AssetChainTestnet,
  });

  useEffect(() => {
    if (candidates.length > 0) {
      const initialVotes = {};
      candidates.forEach((candidate) => {
        initialVotes[candidate] = 0;
      });
      setVotes(initialVotes);
    }
  }, [candidates]);

  const castVote = async () => {
    if (!selectedCandidate || !evmAddress) return;

    const transaction = {
      to: "0xVotingContractAddress", // Replace with your smart contract address
      data: `voteFor(${selectedCandidate})`, // Replace with your contract's method call
    };

    try {
      const result = await sendTransactionEvm(transaction);
      console.log("Vote cast successfully:", result);
      setVotes((prev) => ({
        ...prev,
        [selectedCandidate]: prev[selectedCandidate] + 1,
      }));
    } catch (error) {
      console.error("Error casting vote:", error);
    }
  };

  return (
    <div>
      <h1>Decentralized Voting System</h1>
      <button onClick={connectEvmWallet}>
        {evmAddress ? "Connected" : "Connect Wallet"}
      </button>
      {evmAddress && (
        <div>
          <h2>Candidates</h2>
          <ul>
            {candidates.map((candidate) => (
              <li key={candidate}>
                <label>
                  <input
                    type="radio"
                    name="candidate"
                    value={candidate}
                    onChange={() => setSelectedCandidate(candidate)}
                  />
                  {candidate} ({votes[candidate]} votes)
                </label>
              </li>
            ))}
          </ul>
          <button onClick={castVote}>Vote</button>
        </div>
      )}
    </div>
  );
};

export default VotingSystem;

Step 4: Integrate with the App

Include VotingSystem in your app’s main entry point:

import VotingSystem from "./components/VotingSystem";

export default function App() {
  return (
    <div>
      <VotingSystem />
    </div>
  );
}

Deploy it to a hosting platform of your choice (e.g., Vercel or Netlify).

This tutorial demonstrates how to build a decentralized voting system using Asset Chain’s starter kit. Such applications enable transparent and tamper-proof voting, showcasing blockchain’s transformative potential for governance. Stay tuned for more examples leveraging Asset Chain’s SDK!

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

Introduction

In this guide, we’ll build a Crypto Price Tracker Telegram Mini App using the Asset Chain Telegram Starter Kit. This app fetches real-time cryptocurrency prices and displays them in an interactive user interface, accessible directly within Telegram.

Step 1: Setting Up the Starter Kit

1. Clone the Repository:

git clone https://github.com/xendfinance/assetchain-telegram-demo-app.git
cd assetchain-telegram-demo-app

2. Install Dependencies:

npm install

3. Configure Environment Variables: Rename .env.example to .env.local and configure the following:

NEXT_PUBLIC_PROJECT_ID="<Your Project ID from Reown>"
NEXT_PUBLIC_INFURA_KEY="<Your Infura API Key>"
NEXT_PUBLIC_MANIFEST_URL="https://your-app-url/manifest.json"

4. Run the App:

npm run dev

5. Open the local server URL in your browser.

Step 2: Fetching Crypto Data

1. Set Up API Integration: Sign up for a free API key at CoinGecko or CoinMarketCap.
2. Create a Fetch Function: Add a new function in src/utils/fetchCrypto.js:

export async function fetchCryptoPrices() {
    const response = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd");
    const data = await response.json();
    return data;
}

3. Update the Component: In src/pages/index.tsx, fetch and display the data:

import { useEffect, useState } from "react";
import { fetchCryptoPrices } from "../utils/fetchCrypto";

export default function Home() {
    const [prices, setPrices] = useState({});

    useEffect(() => {
        async function getData() {
            const data = await fetchCryptoPrices();
            setPrices(data);
        }
        getData();
    }, []);

    return (
        <div className="crypto-tracker">
            <h1>Crypto Prices</h1>
            {Object.entries(prices).map(([key, value]) => (
                <div key={key}>
                    <h2>{key.toUpperCase()}</h2>
                    <p>${value.usd}</p>
                </div>
            ))}
        </div>
    );
}

Step 3: Style the UI

1. Add Tailwind CSS for styling:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Update tailwind.config.ts:

module.exports = {
    content: ["./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

3. Style the components in styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.crypto-tracker {
    text-align: center;
    font-family: Arial, sans-serif;
}

Step 4: Deploy to Telegram

1. Build the App:

npm run build

2. Deploy Using Reown:

• Upload your app files to a hosting service like Vercel.
• Configure the Telegram manifest URL in the Telegram developer dashboard.

Result

You now have a functional Telegram Mini App that tracks crypto prices in real time! Share it with your friends and crypto communities.

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

The Asset Chain Telegram Demo App enables developers to build blockchain-enabled Telegram Mini Apps that connect seamlessly with Ethereum wallets. Built using Next.js and Wagmi for Ethereum wallet integration, the app is designed for developers to incorporate cryptocurrency and decentralized applications directly within Telegram.

Prerequisites

To get started, ensure the following tools are installed:

• Node.js (version 16 or higher)
• NPM
• Git
• Infura Account: Sign up here and create a project to obtain an API key.
• Telegram Developer Account: You’ll need this for testing the app on Telegram.
• Wallet Connect Cloud Account: To obtain your Wallet Connect Project ID, sign up and create a project on the Wallet Connect Cloud Dashboard.

Step-by-Step Setup Guide

1. Cloning the Repository

First, clone the repository from GitHub to create a local copy and navigate into the project folder:

git clone https://github.com/xendfinance/assetchain-telegram-demo-app.git
cd assetchain-telegram-demo-app

2. Configuring Environment Variables

To set up your environment, you’ll need to configure the .env file.

1. Create a Local Environment File:

• Rename the .env.example file to .env.local. This file will store your sensitive data, like API keys and project IDs.

2. Add Required Variables:

• Open .env.local and add the following details:
• NEXT_PUBLIC_PROJECT_ID: This is your project ID from the Reown platform.
• NEXT_PUBLIC_INFURA_KEY: Add the API key you obtained from Infura.
• NEXT_PUBLIC_MANIFEST_URL: Set this to a manifest URL. For a demo, you can use:
  "https://ton-connect.github.io/demo-dapp-with-react-ui/tonconnect-manifest.json".

Example .env.local:

NEXT_PUBLIC_PROJECT_ID="your_project_id"
NEXT_PUBLIC_INFURA_KEY="your_infura_api_key"
NEXT_PUBLIC_MANIFEST_URL="https://ton-connect.github.io/demo-dapp-with-react-ui/tonconnect-manifest.json"

3. Installing Dependencies

Install the necessary packages and dependencies to run the app:

npm install

This will download and set up everything required for the app to run smoothly.

4. Starting the Development Server

To preview and interact with the app locally, start the development server:

npm run dev

You should see a local development server URL in the terminal. Open this URL in your browser to view the app.

Connecting Wallet Providers

This demo app supports multiple wallet providers. Here’s a quick overview of how to set up each:

1. Injected Provider (default)

The injected provider uses any wallet extensions present in the browser, such as MetaMask. It’s set as the default option, meaning users can easily connect via any supported wallet that’s already installed in their browser.

To set up:

In the src/hooks/useEvmWallet.tsx file:

import { injected } from "@wagmi/core";
const defaultConnector = injected();

2. Coinbase Wallet Provider

If you want to prioritize Coinbase Wallet for users:

Update the configuration in src/hooks/useEvmWallet.tsx as follows:

import { coinbaseConfig } from "../configs/wagmiConfig";
const defaultConnector = coinbaseConfig;

3. MetaMask Provider

For dedicated MetaMask support:

In src/hooks/useEvmWallet.tsx, configure as follows:

import { metaMaskConfig } from "../configs/wagmiConfig";
const defaultConnector = metaMaskConfig;

4. WalletConnect Provider

For mobile users who want to connect via WalletConnect, set up as follows:

import { walletConnectConfig } from "../configs/wagmiConfig";
const defaultConnector = walletConnectConfig;

Each configuration provides users with flexibility in wallet options, making it easier to interact with blockchain features from within Telegram.

Building and Testing Telegram Mini Apps

1. Telegram Mini App Setup:

• Register your mini app on Telegram’s Mini Apps Platform. This allows your app to run within Telegram.
• Follow Telegram’s documentation for setting up web apps as mini apps, particularly ensuring you have the required URLs and settings.

2. Testing on Telegram:

• Once the mini app is configured, use Telegram’s bot interface to test it. Your bot will act as the entry point for users, launching the app with the blockchain integration.

3. Connecting the App:

• When users start the mini app, they’ll be prompted to connect their Ethereum wallet via the injected provider you’ve configured.

Deploying the App

When you’re ready to launch, deploy your app on a Next.js-compatible hosting platform, like Vercel:

1. Build the Project:

• Run the build command:

npm run build

2. Deploy on Vercel:

• Connect your GitHub repository to Vercel and follow the deployment steps. Once deployed, the app URL can be used in Telegram as the mini app entry point.

With this guide, you should have a comprehensive setup of the Asset Chain Telegram Demo App, ready for development and deployment as a blockchain-enabled Telegram Mini App. Enjoy building!

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

The Asset Chain React Native Starter Kit helps developers build blockchain-based mobile applications on the Asset Chain network using Expo and Wallet Connect.

Requirements

Before starting, ensure you have:

• Node (>= v18.17)
• Yarn
• Git
• MetaMask app for iOS/Android
• Expo Go app for iOS/Android (for testing the app on a physical device)

You’ll also need a Wallet Connect project ID, which we’ll set up later.

Step 1: Start a New Project

You can create a new project directly or clone the AssetChain starter kit repository.

Option 1: Create with create-expo-app

Run the following command to create your project using the starter kit:

npx create-expo-app project-name --template assetchain-react-native-starterkit

Option 2: Clone the GitHub Repository

Alternatively, clone the starter kit repository:

git clone https://github.com/xendfinance/assetchain-react-native-starterkit.git
cd assetchain-react-native-starterkit
yarn

This will create a local copy of the starter kit on your system and install necessary dependencies with yarn.

Step 2: Set Up Environment Variables

1. Copy the .env Template:
2. From your project root, create an environment file based on the example:

cp .env.example .env

1. Obtain a Wallet Connect Project ID:
2. Go to the Wallet Connect Cloud Dashboard to create a new project. Once created, you’ll receive a unique projectId to connect your app to Wallet Connect.
3. Add the Project ID: Open the .env file and set the WALLET_CONNECT_PROJECTID with the value of your projectId:

WALLET_CONNECT_PROJECTID=your_project_id_here

Step 3: Choose Your Development Template

The starter kit comes with two different templates in separate branches. Here’s how to choose the one that fits your preference:

• Main Branch (Default): Uses Wagmi for connecting to AssetChain.
• Ethers Branch: Uses Ethers.js v6.

To switch to the ethers branch, run:

git checkout ethers

If you’re using the main branch, you don’t need to switch branches.

Step 4: Run the Application

With everything configured, you’re ready to start the application and connect it to Wallet Connect. To do this:

1. Start the Expo Dev Server:

yarn start

2. Run the Application on Your Device:

• Once Expo Go starts, it will display a QR code in your terminal or browser.
• Open the Expo Go app on your iOS or Android device and scan the QR code.
• The app will load, connecting to Wallet Connect and enabling blockchain-based functionality.

3. Connect MetaMask (Optional):

To use the Wallet Connect feature fully, open MetaMask and link it through Wallet Connect in the Expo app to test wallet integration.

Step 5: Customize Your Application

From here, you can customize the app’s screens and functionality. Explore indexScreen.tsx and other key files to implement your features or modify the Wallet Connect logic.

Conclusion

You’ve successfully set up and launched the AssetChain React Native Starter Kit! Now, you’re ready to explore the AssetChain network and Wallet Connect integrations on your custom mobile app. Happy building!

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

This tutorial will guide you through setting up a web application on Asset Chain using the Web Starter Kit. We’ll start by installing dependencies, deploying a sample smart contract, and finally interacting with it through a frontend.

Step 1: Prerequisites

Ensure you have the following installed:

• Node.js (>= v18.17)
• Yarn (version 1 or 2+)
• Git
• NPM

Step 2: Clone the Web Starter Kit Repository

Clone the Web Starter Kit to get started:

git clone https://github.com/xendfinance/assetchain-web-starterkit
cd assetchain-web-starterkit

`yarn install` or `npm install`

Alternatively, you can use the command below to create a Next.js project with the Asset Chain Starter Kit template:

npx create-next-app@latest --example "https://github.com/xendfinance/assetchain-web-starterkit" my-asset-chain-project

Step 3: Explore the Project Structure

After cloning, familiarize yourself with the files and folders in the project. Key folders include:

• packages/hardhat: Contains the Solidity contracts and deployment scripts.
• packages/nextjs: Contains frontend code with Next.js components and configurations.

Step 4: Configure Network Settings

Open hardhat.config.ts in packages/hardhat. This is where you’ll set network configurations for deploying to Asset Chain's testnet or mainnet.

To deploy to Asset Chain, configure the assetchain_testnet section in hardhat.config.ts:

networks: {
  assetchain_testnet: {
    url: "https://enugu-rpc.assetchain.org/",
    accounts: ["0xYourPrivateKey"],
  },
},

Step 5: Deploy the Contract to Asset Chain

Inside the hardhat directory, use the following command to deploy the sample contract to the testnet:

cd hardhat
yarn deploy --network assetchain_testnet

This deploys the YourContract.sol contract to Asset Chain. You can modify this contract or add new ones in the contracts folder.

Step 6: Start the Frontend Application

In a new terminal window, start the frontend with the following command:

cd packages/nextjs
`yarn start` or `npm run start`

Your frontend should now be running on http://localhost:3000, displaying a UI that interacts with the deployed contract.

Step 7: Interact with the Contract on the Debug Page

The starter kit includes a Debug Contracts page where you can interact with your smart contract. Here, test functions or values defined in your contract to see them reflected in the UI.

Step 8: Customize Your Application

You can now start editing the frontend and smart contract files to suit your dApp’s needs:

• Smart Contract: Modify YourContract.sol in packages/hardhat/contracts.
• Frontend: Edit components and pages in packages/nextjs, such as app/page.tsx.

Step 9: Testing and Deployment

To test your smart contracts, add tests in packages/hardhat/test and run them with:

yarn hardhat test

When you’re ready to deploy your project to mainnet, update the assetchain_mainnet configurations in hardhat.config.ts and redeploy.

Conclusion

This setup tutorial introduces Asset Chain’s Web Starter Kit and shows how developers can quickly start building and deploying dApps. The starter kit includes essential tools and configurations, making it easier for developers of all levels to build on Asset Chain.

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

Tokenizing carbon credits represents a step forward for both environmental sustainability and blockchain innovation. By leveraging Asset Chain’s features, developers can create secure, transparent digital assets that encourage sustainable investments while bringing the benefits of blockchain to environmental finance.

What are Carbon Credits, and Why Tokenize Them?

Carbon credits are permits allowing companies to emit a certain amount of CO₂, with unused portions tradable to support companies with higher emissions. Tokenizing these credits on the blockchain allows for efficient, transparent trading and encourages a larger community to participate in environmental efforts.

How Asset Chain Powers Sustainable Tokenization

1. Security and Transparency
Asset Chain’s secure, decentralized infrastructure ensures that each tokenized carbon credit remains verifiable, with immutable records of each transaction, including issuances, trades, and retirements. By keeping a public, transparent ledger, Asset Chain addresses common concerns around the legitimacy and use of carbon credits.

2. Scalability for Large-Scale Adoption
The scalability of Asset Chain enables rapid transaction processing and low fees, encouraging greater market participation. Developers can implement trading platforms where users can trade, sell, or retire credits without prohibitive costs.

3. Integration with Decentralized Oracles
By using decentralized oracles, developers can feed real-time carbon credit prices and market data into their dApps, creating dynamic pricing models. This integration ensures that trading reflects current market conditions, adding a new level of usability to the platform.

Steps for Developers to Tokenize Carbon Credits on Asset Chain

1. Define the Tokenized Asset Standards:
   Set parameters around the carbon credits, ensuring compliance with standards for tokenization. Developers might employ Asset Chain’s smart contracts for structuring these assets as NFTs or fungible tokens, depending on the use case.
2. Integrate Decentralized Storage
   To verify carbon credit origin, projects can use decentralized storage solutions (e.g., IPFS or Filecoin) to store documentation and certifications, linking these to each token on Asset Chain.
3. Set Up Carbon Credit Trading dApp
   Design a marketplace or exchange where users can buy, sell, or retire tokenized credits, with smart contract automation enabling secure, permissionless trades.
4. Deploy to Testnet
   Prior to launch, developers can deploy their dApps on Asset Chain’s testnet, optimizing performance and security. They can gather data on transaction speeds and costs, refining the user experience accordingly.
5. Activate Oracle and Chainlink Feeds for Dynamic Pricing
   With live price feeds from oracles, developers can enable real-time updates, giving users accurate trading information and ensuring an interactive, data-driven experience.

Real-World Impact: The Benefits of Carbon Credit Tokenization

Tokenized carbon credits increase accessibility, transparency, and accountability, encouraging organizations of all sizes to participate. These credits represent fractional ownership of a carbon-reducing asset, democratizing the path to sustainability by involving individuals who otherwise might not engage in carbon offset markets.

Conclusion

Asset Chain is ideal for developing sustainable, blockchain-based solutions that drive both environmental impact and market transparency. By building applications that tokenize carbon credits, developers can bridge the gap between environmental finance and everyday users, fostering broader market participation and contributing to the global effort to curb emissions.

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google

As decentralized applications (dApps) grow more data-intensive, developers on Asset Chain can leverage decentralized storage solutions, like IPFS or Filecoin, to store off-chain data securely. This approach not only enhances scalability and optimizes storage but also reduces costs for applications handling large datasets, such as real-world asset (RWA) metadata or personal information.

Why Decentralized Storage Matters

Blockchain alone isn’t optimized for storing large data volumes due to high costs and scalability limitations. Instead, a decentralized storage system can handle the bulk of data while Asset Chain maintains a transparent, secure record of transactions, leveraging on-chain data pointers to access off-chain data efficiently.

Key Integration Benefits

1. Enhanced Security: Storing data off-chain minimizes the risk of on-chain data overload and secures sensitive information using encryption techniques.
2. Optimized Storage Costs: Decentralized storage costs less than traditional on-chain storage.
3. Scalability: Asset Chain dApps can scale as more data is stored without congestion issues, making them ideal for projects requiring data-intensive operations.

How to Link Asset Chain with Decentralized Storage

To integrate decentralized storage into Asset Chain, use a hybrid model where critical transaction data remains on-chain, and bulk or sensitive data is stored off-chain. Here’s a breakdown of steps and code examples to get started.

Step 1: Upload Data to IPFS or Filecoin

Using IPFS, data is stored off-chain and assigned a unique Content Identifier (CID). For sensitive data, encrypt before uploading:

const IPFS = require('ipfs-http-client');
const ipfs = IPFS.create({ url: 'https://ipfs.infura.io:5001' });

// Encrypt data (example with AES)
const encryptedData = encryptDataFunction(sensitiveData); // your encryption logic here

async function uploadToIPFS(data) {
  const { path } = await ipfs.add(data);
  return path; // returns the CID for the data on IPFS
}

Step 2: Store the CID on Asset Chain

Link the CID to an Asset Chain smart contract, allowing your dApp to access the data when needed.

pragma solidity ^0.8.0;

contract DataStorage {
    mapping(address => string) public userToDataCID;

    function storeDataCID(string memory cid) public {
        userToDataCID[msg.sender] = cid;
    }

    function retrieveDataCID(address user) public view returns (string memory) {
        return userToDataCID[user];
    }
}

Step 3: Retrieve Data from IPFS via CID

On-chain transactions can access data off-chain by retrieving the CID from the smart contract and using it to fetch data from IPFS or Filecoin.

async function fetchFromIPFS(cid) {
  const file = await ipfs.cat(cid);
  const data = decryptDataFunction(file); // decrypt data if encrypted
  return data;
}

Use Cases for Decentralized Storage on Asset Chain

1. Real-World Asset Metadata: Store asset details off-chain (e.g., property documents) while the Asset Chain smart contract records ownership and metadata pointers, reducing storage costs.
2. Encrypted Personal Information: Sensitive user data, like KYC information, can be stored securely off-chain while on-chain records ensure verifiable access.

Conclusion

Integrating decentralized storage with Asset Chain provides a practical, secure way to manage large datasets and sensitive information, supporting a new generation of scalable and cost-effective dApps. This approach not only expands Asset Chain’s potential but also fosters more secure, efficient blockchain applications.

https://linktr.ee/assetchain

#Blockchain #AssetChain #RWA #Crypto #DeFi #EVM #Lachesis #Fintech #Binance #Google