YouCra v03 Development Assistant

An expert AI assistant for developing and maintaining YouCra v03 (유크라), a React-based real-time chat and YouTube integration social platform for creator-fan communities.

What This Skill Does

This skill provides specialized assistance for the YouCra v03 project, including:

Project Context

**Project**: YouCra v03 (유크라)

Technical Stack

**Frontend**:

**Backend**:

**Deployment**: Vercel

Core Features

1. **User Authentication**: Dual authentication with Firebase Auth + Google OAuth 2.0

2. **Real-time Chat**: Firestore real-time listeners, image uploads, emoji support

3. **YouTube Integration**: Video sharing/playback/likes/subscriptions, fan verification system

4. **Social Features**: Profile management, My Channel, 1:1 DM, popularity reports

Key Components

Service Layer

Firebase Structure

```

Firestore Collections:

├── chatRooms/

│ ├── {roomId}/

│ │ ├── messages/

│ │ ├── participants/

│ │ └── videos/

├── users/

└── reports/

```

Routing Structure

Environment Variables

```

REACT_APP_GOOGLE_CLIENT_ID=234134940808-jtnudlrb28o2hheq2ppmfr4rocgn09pj.apps.googleusercontent.com

REACT_APP_YOUTUBE_API_KEY=[YouTube API Key]

```

Instructions for AI Agent

When assisting with YouCra v03 development, follow these guidelines:

1. Code Style and Conventions

2. Authentication Handling

3. Real-time Features

4. YouTube Integration

5. File Organization

6. Testing

7. Deployment

8. Known Issues to Watch For

9. Development Commands

```bash

npm start # Development server (localhost:3000)

npm run build # Production build

npm test # Run tests

```

10. Important Files

Examples

Adding a New Firebase Service Function

```javascript

// In src/services/userService.js

import { db } from '../firebase';

import { collection, doc, getDoc, setDoc } from 'firebase/firestore';

export const updateUserPoints = async (uid, points) => {

const userRef = doc(db, 'users', uid);

const userDoc = await getDoc(userRef);

if (userDoc.exists()) {

const currentPoints = userDoc.data().points || 0;

await setDoc(userRef, {

points: currentPoints + points

}, { merge: true });

}

};

```

Creating a Real-time Chat Component

```javascript

// In src/components/ChatMessages.js

import { useEffect, useState } from 'react';

import { collection, query, orderBy, onSnapshot } from 'firebase/firestore';

import { db } from '../firebase';

function ChatMessages({ roomId }) {

const [messages, setMessages] = useState([]);

useEffect(() => {

const messagesRef = collection(db, 'chatRooms', roomId, 'messages');

const q = query(messagesRef, orderBy('createdAt', 'desc'));

const unsubscribe = onSnapshot(q, (snapshot) => {

const newMessages = snapshot.docs.map(doc => ({

id: doc.id,

...doc.data()

}));

setMessages(newMessages);

});

return () => unsubscribe(); // Cleanup

}, [roomId]);

return (

<div className="space-y-4">

{messages.map(msg => (

<div key={msg.id} className="p-3 bg-white rounded-lg shadow">

{msg.text}

</div>

))}

</div>

);

}

```

Constraints