Підготовка контенту платформи Ring
Підготовка контенту платформи Ring
Підготовка контенту платформи Ring
Розуміння архітектури та організації кодової бази платформи Ring.
Платформа Ring дотримується архітектури на основі функцій з чітким розділенням обов'язків:
ring/
├── app/ # Next.js 15 App Router
├── components/ # Багаторазові React компоненти
├── features/ # Модулі функцій (керовані доменом)
├── lib/ # Спільні утиліти та конфігурації
├── @actions/ # Серверні дії (Next.js 15)
├── public/ # Статичні ресурси
└── AI-CONTEXT/ # Система AI документації
app/
├── (auth)/ # Групи маршрутів для сторінок автентифікації
│ ├── login/
│ └── register/
├── (dashboard)/ # Захищені маршрути панелі керування
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── api/ # API маршрути
│ ├── auth/
│ ├── entities/
│ └── opportunities/
├── globals.css # Глобальні стилі
├── layout.tsx # Кореневий макет
└── page.tsx # Головна сторінка
(auth) - Сторінки, пов'язані з автентифікацією(dashboard) - Захищена панель користувача(public) - Публічні маркетингові сторінкиcomponents/
├── ui/ # Базові UI компоненти (shadcn/ui)
│ ├── button.tsx
│ ├── input.tsx
│ └── dialog.tsx
├── features/ # Компоненти функцій
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── layout/ # Компоненти макету
│ ├── navbar.tsx
│ ├── sidebar.tsx
│ └── footer.tsx
└── shared/ # Спільні бізнес-компоненти
├── user-avatar.tsx
└── loading-spinner.tsx
// components/ui/button.tsx
import { cn } from '@/lib/utils'
interface ButtonProps {
variant?: 'default' | 'destructive' | 'outline'
size?: 'default' | 'sm' | 'lg'
children: React.ReactNode
}
export function Button({ variant = 'default', size = 'default', children, ...props }: ButtonProps) {
return (
<button
className={cn(
'inline-flex items-center justify-center rounded-md font-medium',
variants[variant],
sizes[size]
)}
{...props}
>
{children}
</button>
)
}// components/features/entities/entity-card.tsx
import { Entity } from '@/types/entities'
import { Button } from '@/components/ui/button'
interface EntityCardProps {
entity: Entity
onEdit?: (entity: Entity) => void
}
export function EntityCard({ entity, onEdit }: EntityCardProps) {
return (
<div className="border rounded-lg p-4">
<h3 className="font-semibold">{entity.name}</h3>
<p className="text-gray-600">{entity.description}</p>
{onEdit && (
<Button onClick={() => onEdit(entity)}>
Edit
</Button>
)}
</div>
)
}features/
├── entities/ # Функція управління сутностями
│ ├── components/ # Компоненти специфічні для функції
│ ├── hooks/ # Користувацькі хуки
│ ├── types/ # TypeScript типи
│ ├── utils/ # Утиліти функції
│ └── index.ts # Публічний API
├── opportunities/ # Функція можливостей
├── wallet/ # Функція Web3 гаманця
└── messaging/ # Обмін повідомленнями в реальному часі
// features/entities/index.ts - Public API
export { EntityCard } from './components/entity-card'
export { useEntities } from './hooks/use-entities'
export type { Entity, EntityType } from './types'
export { createEntity, updateEntity } from './utils/entity-operations'// features/entities/hooks/use-entities.ts
import { useQuery } from '@tanstack/react-query'
import { getEntities } from '../utils/entity-operations'
export function useEntities(userId?: string) {
return useQuery({
queryKey: ['entities', userId],
queryFn: () => getEntities(userId),
enabled: !!userId
})
}lib/
├── auth.ts # Конфігурація Auth.js
├── firebase.ts # Налаштування Firebase
├── db.ts # Утиліти бази даних
├── utils.ts # Загальні утиліти
├── validations.ts # Zod схеми
├── constants.ts # Константи додатку
└── types.ts # Глобальні типи
// lib/auth.ts
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
// ... configuration
})// lib/db.ts
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)@actions/
├── entities/
│ ├── create-entity.ts
│ ├── update-entity.ts
│ └── delete-entity.ts
├── opportunities/
└── auth/
// @actions/entities/create-entity.ts
'use server'
import { auth } from '@/lib/auth'
import { createEntitySchema } from '@/lib/validations'
import { redirect } from 'next/navigation'
export async function createEntity(formData: FormData) {
const session = await auth()
if (!session?.user) {
redirect('/login')
}
const validatedFields = createEntitySchema.safeParse({
name: formData.get('name'),
type: formData.get('type'),
description: formData.get('description'),
})
if (!validatedFields.success) {
return { error: 'Invalid fields' }
}
// Create entity logic...
redirect('/dashboard/entities')
}// types/entities.ts
export interface Entity {
id: string
name: string
type: EntityType
description: string
createdAt: Date
updatedAt: Date
}
export type EntityType =
| 'technology'
| 'healthcare'
| 'finance'
// ... other types
export interface CreateEntityRequest {
name: string
type: EntityType
description: string
}// types/api.ts
export interface ApiResponse<T = any> {
data?: T
error?: string
message?: string
}
export interface PaginatedResponse<T> {
data: T[]
pagination: {
page: number
limit: number
total: number
totalPages: number
}
}app/globals.css
├── @tailwind base;
├── @tailwind components;
├── @tailwind utilities;
└── /* Custom component styles */
// Using cn utility for conditional classes
import { cn } from '@/lib/utils'
function Component({ variant, className }: Props) {
return (
<div
className={cn(
'base-styles',
{
'variant-styles': variant === 'special',
},
className
)}
>
Content
</div>
)
}// External imports first
import React from 'react'
import { NextPage } from 'next'
// Internal imports
import { Button } from '@/components/ui/button'
import { useEntities } from '@/features/entities'
import { cn } from '@/lib/utils'
// Type imports last
import type { Entity } from '@/types/entities'// 1. Imports
// 2. Types/Interfaces
// 3. Component implementation
// 4. Default export
// 5. Named exports (if any)Далі: Робочий процес розробки - Дізнайтеся про наш Git робочий процес та процес розробки.
Розуміння архітектури та організації кодової бази платформи Ring.
Платформа Ring дотримується архітектури на основі функцій з чітким розділенням обов'язків:
ring/
├── app/ # Next.js 15 App Router
├── components/ # Багаторазові React компоненти
├── features/ # Модулі функцій (керовані доменом)
├── lib/ # Спільні утиліти та конфігурації
├── @actions/ # Серверні дії (Next.js 15)
├── public/ # Статичні ресурси
└── AI-CONTEXT/ # Система AI документації
app/
├── (auth)/ # Групи маршрутів для сторінок автентифікації
│ ├── login/
│ └── register/
├── (dashboard)/ # Захищені маршрути панелі керування
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── api/ # API маршрути
│ ├── auth/
│ ├── entities/
│ └── opportunities/
├── globals.css # Глобальні стилі
├── layout.tsx # Кореневий макет
└── page.tsx # Головна сторінка
(auth) - Сторінки, пов'язані з автентифікацією(dashboard) - Захищена панель користувача(public) - Публічні маркетингові сторінкиcomponents/
├── ui/ # Базові UI компоненти (shadcn/ui)
│ ├── button.tsx
│ ├── input.tsx
│ └── dialog.tsx
├── features/ # Компоненти функцій
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── layout/ # Компоненти макету
│ ├── navbar.tsx
│ ├── sidebar.tsx
│ └── footer.tsx
└── shared/ # Спільні бізнес-компоненти
├── user-avatar.tsx
└── loading-spinner.tsx
// components/ui/button.tsx
import { cn } from '@/lib/utils'
interface ButtonProps {
variant?: 'default' | 'destructive' | 'outline'
size?: 'default' | 'sm' | 'lg'
children: React.ReactNode
}
export function Button({ variant = 'default', size = 'default', children, ...props }: ButtonProps) {
return (
<button
className={cn(
'inline-flex items-center justify-center rounded-md font-medium',
variants[variant],
sizes[size]
)}
{...props}
>
{children}
</button>
)
}// components/features/entities/entity-card.tsx
import { Entity } from '@/types/entities'
import { Button } from '@/components/ui/button'
interface EntityCardProps {
entity: Entity
onEdit?: (entity: Entity) => void
}
export function EntityCard({ entity, onEdit }: EntityCardProps) {
return (
<div className="border rounded-lg p-4">
<h3 className="font-semibold">{entity.name}</h3>
<p className="text-gray-600">{entity.description}</p>
{onEdit && (
<Button onClick={() => onEdit(entity)}>
Edit
</Button>
)}
</div>
)
}features/
├── entities/ # Функція управління сутностями
│ ├── components/ # Компоненти специфічні для функції
│ ├── hooks/ # Користувацькі хуки
│ ├── types/ # TypeScript типи
│ ├── utils/ # Утиліти функції
│ └── index.ts # Публічний API
├── opportunities/ # Функція можливостей
├── wallet/ # Функція Web3 гаманця
└── messaging/ # Обмін повідомленнями в реальному часі
// features/entities/index.ts - Public API
export { EntityCard } from './components/entity-card'
export { useEntities } from './hooks/use-entities'
export type { Entity, EntityType } from './types'
export { createEntity, updateEntity } from './utils/entity-operations'// features/entities/hooks/use-entities.ts
import { useQuery } from '@tanstack/react-query'
import { getEntities } from '../utils/entity-operations'
export function useEntities(userId?: string) {
return useQuery({
queryKey: ['entities', userId],
queryFn: () => getEntities(userId),
enabled: !!userId
})
}lib/
├── auth.ts # Конфігурація Auth.js
├── firebase.ts # Налаштування Firebase
├── db.ts # Утиліти бази даних
├── utils.ts # Загальні утиліти
├── validations.ts # Zod схеми
├── constants.ts # Константи додатку
└── types.ts # Глобальні типи
// lib/auth.ts
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
// ... configuration
})// lib/db.ts
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)@actions/
├── entities/
│ ├── create-entity.ts
│ ├── update-entity.ts
│ └── delete-entity.ts
├── opportunities/
└── auth/
// @actions/entities/create-entity.ts
'use server'
import { auth } from '@/lib/auth'
import { createEntitySchema } from '@/lib/validations'
import { redirect } from 'next/navigation'
export async function createEntity(formData: FormData) {
const session = await auth()
if (!session?.user) {
redirect('/login')
}
const validatedFields = createEntitySchema.safeParse({
name: formData.get('name'),
type: formData.get('type'),
description: formData.get('description'),
})
if (!validatedFields.success) {
return { error: 'Invalid fields' }
}
// Create entity logic...
redirect('/dashboard/entities')
}// types/entities.ts
export interface Entity {
id: string
name: string
type: EntityType
description: string
createdAt: Date
updatedAt: Date
}
export type EntityType =
| 'technology'
| 'healthcare'
| 'finance'
// ... other types
export interface CreateEntityRequest {
name: string
type: EntityType
description: string
}// types/api.ts
export interface ApiResponse<T = any> {
data?: T
error?: string
message?: string
}
export interface PaginatedResponse<T> {
data: T[]
pagination: {
page: number
limit: number
total: number
totalPages: number
}
}app/globals.css
├── @tailwind base;
├── @tailwind components;
├── @tailwind utilities;
└── /* Custom component styles */
// Using cn utility for conditional classes
import { cn } from '@/lib/utils'
function Component({ variant, className }: Props) {
return (
<div
className={cn(
'base-styles',
{
'variant-styles': variant === 'special',
},
className
)}
>
Content
</div>
)
}// External imports first
import React from 'react'
import { NextPage } from 'next'
// Internal imports
import { Button } from '@/components/ui/button'
import { useEntities } from '@/features/entities'
import { cn } from '@/lib/utils'
// Type imports last
import type { Entity } from '@/types/entities'// 1. Imports
// 2. Types/Interfaces
// 3. Component implementation
// 4. Default export
// 5. Named exports (if any)Далі: Робочий процес розробки - Дізнайтеся про наш Git робочий процес та процес розробки.
Розуміння архітектури та організації кодової бази платформи Ring.
Платформа Ring дотримується архітектури на основі функцій з чітким розділенням обов'язків:
ring/
├── app/ # Next.js 15 App Router
├── components/ # Багаторазові React компоненти
├── features/ # Модулі функцій (керовані доменом)
├── lib/ # Спільні утиліти та конфігурації
├── @actions/ # Серверні дії (Next.js 15)
├── public/ # Статичні ресурси
└── AI-CONTEXT/ # Система AI документації
app/
├── (auth)/ # Групи маршрутів для сторінок автентифікації
│ ├── login/
│ └── register/
├── (dashboard)/ # Захищені маршрути панелі керування
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── api/ # API маршрути
│ ├── auth/
│ ├── entities/
│ └── opportunities/
├── globals.css # Глобальні стилі
├── layout.tsx # Кореневий макет
└── page.tsx # Головна сторінка
(auth) - Сторінки, пов'язані з автентифікацією(dashboard) - Захищена панель користувача(public) - Публічні маркетингові сторінкиcomponents/
├── ui/ # Базові UI компоненти (shadcn/ui)
│ ├── button.tsx
│ ├── input.tsx
│ └── dialog.tsx
├── features/ # Компоненти функцій
│ ├── entities/
│ ├── opportunities/
│ └── wallet/
├── layout/ # Компоненти макету
│ ├── navbar.tsx
│ ├── sidebar.tsx
│ └── footer.tsx
└── shared/ # Спільні бізнес-компоненти
├── user-avatar.tsx
└── loading-spinner.tsx
// components/ui/button.tsx
import { cn } from '@/lib/utils'
interface ButtonProps {
variant?: 'default' | 'destructive' | 'outline'
size?: 'default' | 'sm' | 'lg'
children: React.ReactNode
}
export function Button({ variant = 'default', size = 'default', children, ...props }: ButtonProps) {
return (
<button
className={cn(
'inline-flex items-center justify-center rounded-md font-medium',
variants[variant],
sizes[size]
)}
{...props}
>
{children}
</button>
)
}// components/features/entities/entity-card.tsx
import { Entity } from '@/types/entities'
import { Button } from '@/components/ui/button'
interface EntityCardProps {
entity: Entity
onEdit?: (entity: Entity) => void
}
export function EntityCard({ entity, onEdit }: EntityCardProps) {
return (
<div className="border rounded-lg p-4">
<h3 className="font-semibold">{entity.name}</h3>
<p className="text-gray-600">{entity.description}</p>
{onEdit && (
<Button onClick={() => onEdit(entity)}>
Edit
</Button>
)}
</div>
)
}features/
├── entities/ # Функція управління сутностями
│ ├── components/ # Компоненти специфічні для функції
│ ├── hooks/ # Користувацькі хуки
│ ├── types/ # TypeScript типи
│ ├── utils/ # Утиліти функції
│ └── index.ts # Публічний API
├── opportunities/ # Функція можливостей
├── wallet/ # Функція Web3 гаманця
└── messaging/ # Обмін повідомленнями в реальному часі
// features/entities/index.ts - Public API
export { EntityCard } from './components/entity-card'
export { useEntities } from './hooks/use-entities'
export type { Entity, EntityType } from './types'
export { createEntity, updateEntity } from './utils/entity-operations'// features/entities/hooks/use-entities.ts
import { useQuery } from '@tanstack/react-query'
import { getEntities } from '../utils/entity-operations'
export function useEntities(userId?: string) {
return useQuery({
queryKey: ['entities', userId],
queryFn: () => getEntities(userId),
enabled: !!userId
})
}lib/
├── auth.ts # Конфігурація Auth.js
├── firebase.ts # Налаштування Firebase
├── db.ts # Утиліти бази даних
├── utils.ts # Загальні утиліти
├── validations.ts # Zod схеми
├── constants.ts # Константи додатку
└── types.ts # Глобальні типи
// lib/auth.ts
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
// ... configuration
})// lib/db.ts
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)@actions/
├── entities/
│ ├── create-entity.ts
│ ├── update-entity.ts
│ └── delete-entity.ts
├── opportunities/
└── auth/
// @actions/entities/create-entity.ts
'use server'
import { auth } from '@/lib/auth'
import { createEntitySchema } from '@/lib/validations'
import { redirect } from 'next/navigation'
export async function createEntity(formData: FormData) {
const session = await auth()
if (!session?.user) {
redirect('/login')
}
const validatedFields = createEntitySchema.safeParse({
name: formData.get('name'),
type: formData.get('type'),
description: formData.get('description'),
})
if (!validatedFields.success) {
return { error: 'Invalid fields' }
}
// Create entity logic...
redirect('/dashboard/entities')
}// types/entities.ts
export interface Entity {
id: string
name: string
type: EntityType
description: string
createdAt: Date
updatedAt: Date
}
export type EntityType =
| 'technology'
| 'healthcare'
| 'finance'
// ... other types
export interface CreateEntityRequest {
name: string
type: EntityType
description: string
}// types/api.ts
export interface ApiResponse<T = any> {
data?: T
error?: string
message?: string
}
export interface PaginatedResponse<T> {
data: T[]
pagination: {
page: number
limit: number
total: number
totalPages: number
}
}app/globals.css
├── @tailwind base;
├── @tailwind components;
├── @tailwind utilities;
└── /* Custom component styles */
// Using cn utility for conditional classes
import { cn } from '@/lib/utils'
function Component({ variant, className }: Props) {
return (
<div
className={cn(
'base-styles',
{
'variant-styles': variant === 'special',
},
className
)}
>
Content
</div>
)
}// External imports first
import React from 'react'
import { NextPage } from 'next'
// Internal imports
import { Button } from '@/components/ui/button'
import { useEntities } from '@/features/entities'
import { cn } from '@/lib/utils'
// Type imports last
import type { Entity } from '@/types/entities'// 1. Imports
// 2. Types/Interfaces
// 3. Component implementation
// 4. Default export
// 5. Named exports (if any)Далі: Робочий процес розробки - Дізнайтеся про наш Git робочий процес та процес розробки.