---
title: "Quick Start"
description: "Quick Start documentation for Ring Platform"
locale: "ru"
---
# Примеры быстрого старта

Запустите Ring Platform за минуты.

## Клон и установка (v1.6.0)

```bash
git clone https://github.com/connectplatform/ring.git
cd ring
./install.sh
```

**Ring CLI** (`ring`) не в публичном репозитории. См. [Community tooling](/docs/development/community-tooling.md).

## 🚀 5-минутная настройка

### Basic Ring Platform Integration

// app/page.tsx

{`import { auth } from '@/auth'
import { redirect } from 'next/navigation'

export default async function HomePage() {
  const session = await auth()
  
  if (!session) {
    redirect('/login')
  }

  return (
    
      Welcome to Ring Platform
      Hello, {session.user?.name}!
    
  )
}`}

### Environment Setup

.env.local Firebase Configuration OAuth Providers

{`NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret`}

## 📱 Basic Components

### User Profile Component

// components/UserProfile.tsx

{`import { useSession } from 'next-auth/react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function UserProfile() {
  const { data: session } = useSession()
  
  if (!session) return null

  return (
    
      
        
        
          {session.user?.name?.charAt(0) || 'U'}
        
      
      
        {session.user?.name}
        {session.user?.email}
      
    
  )
}`}

### Entity List Component

// components/EntityList.tsx

{`'use client'

import { useEffect, useState } from 'react'

interface Entity {
  id: string
  name: string
  type: string
  description: string
}

export function EntityList() {
  const [entities, setEntities] = useState<Entity[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchEntities() {
      try {
        const response = await fetch('/api/entities')
        const data = await response.json()
        setEntities(data.entities || [])
      } catch (error) {
        console.error('Failed to fetch entities:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchEntities()
  }, [])

  if (loading) {
    return Loading entities...
  }

  return (
    
      {entities.map((entity) => (
        
          {entity.name}
          {entity.type}
          {entity.description}
        
      ))}
    
  )
}`}

## 🔐 Authentication Examples

### Magic Link Authentication

// app/(public)/[locale]/login/page.tsx

{`'use client'

import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function SignIn() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)

  const handleMagicLink = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    try {
      await signIn('email', { 
        email,
        callbackUrl: '/dashboard'
      })
    } catch (error) {
      console.error('Sign in failed:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    
      
         setEmail(e.target.value)}
          className="w-full p-3 border rounded-lg"
          required
        />
        
          {loading ? 'Sending...' : 'Send Magic Link'}
        
      
    
  )
}`}

## 🌐 API Integration

### Basic API Call

// lib/api.ts

{`export async function createEntity(data: {
  name: string
  type: string
  description: string
}) {
  const response = await fetch('/api/entities', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })

  if (!response.ok) {
    throw new Error('Failed to create entity')
  }

  return response.json()
}

// Usage in component
const handleCreateEntity = async () => {
  try {
    const entity = await createEntity({
      name: 'My Company',
      type: 'technology',
      description: 'Building the future'
    })
    console.log('Entity created:', entity)
  } catch (error) {
    console.error('Error:', error)
  }
}`}

## 💰 Web3 Integration

### Wallet Connection

// components/WalletConnect.tsx

{`'use client'

import { useEffect, useState } from 'react'

export function WalletConnect() {
  const [wallet, setWallet] = useState(null)
  const [loading, setLoading] = useState(false)

  const connectWallet = async () => {
    setLoading(true)
    try {
      const response = await fetch('/api/wallet/create', {
        method: 'POST',
      })
      const data = await response.json()
      setWallet(data.address)
    } catch (error) {
      console.error('Failed to connect wallet:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    
      {wallet ? (
        
          Wallet Connected:
          {wallet}
        
      ) : (
        
          {loading ? 'Connecting...' : 'Connect Wallet'}
        
      )}
    
  )
}`}

## 🎯 Next Steps

1. **[Authentication Examples](/ru/docs/examples/authentication)** - Explore advanced auth patterns
2. **[API Integration](/ru/docs/examples/api-integration)** - Deep dive into API usage
3. **[Web3 Integration](/ru/docs/examples/web3-integration)** - Advanced blockchain features
4. **[Real World Apps](/ru/docs/examples/real-world)** - Complete application examples

---

*Need help? Join our [Discord Community](https://discord.gg/ring-platform) or check the [API Documentation](/ru/docs/api).*