Prompt
Here’s your **comprehensive development prompt** incorporating dark mode, admin role assignment, and all previous requirements:
---
### **App Development Prompt**
**Project Name**: "SoundSphere" - Social Music Platform with Monetization & Admin Controls
#### **Core Features**
**1. Dynamic UI System**
- **YouTube-Activated Header**
- Header glows/pulses when YouTube links are detected (CSS animation + Firestore listener)
```javascript
// Header animation trigger
useEffect(() => {
const hasYouTube = posts.some(post => post.content.match(/youtu\.?be/));
setHeaderActive(hasYouTube);
}, [posts]);
```
- **Dark Mode**
- Toggle button (persisted via Firestore user preferences)
```javascript
// Firestore: users/{uid}/preferences
{
darkMode: true,
accentColor: "#FF5733"
}
```
- CSS Variables implementation:
```css
:root {
--bg-primary: #fff;
--text-primary: #000;
}
[data-theme="dark"] {
--bg-primary: #121212;
--text-primary: #f5f5f5;
}
```
**2. Admin Management System**
- **Role Assignment**
- Cloud Function to assign admin roles:
```javascript
exports.makeAdmin = functions.https.onCall(async (data, context) => {
if (!context.auth.token.isSuperAdmin) throw new Error('Unauthorized');
await admin.auth().setCustomUserClaims(data.uid, { isAdmin: true });
await firestore.doc(`users/${data.uid}`).update({ role: 'admin' });
});
```
- **Admin Dashboard Features**
- Toggle user roles
- Remove posts
- View analytics (top songs, active users)
**3. AdMob Integration**
- **Strategic Ad Placement**
| Ad Type | Trigger | Frequency |
|----------------|----------------------------|-------------------------|
| Banner | Feed bottom | Persistent |
| Interstitial | Every 3rd post navigation | Max 1 per 2 mins |
| Rewarded | "Unlock Skip" button | User-initiated |
**4. Follow System with Enhanced Features**
- **Smart Feed Sorting**
```javascript
// Firestore query for personalized feed
const feedQuery = query(
collection(db, "posts"),
where("userId", "in", currentUser.following),
orderBy("likes", "desc"),
limit(20)
);
```
- **Follower Notifications**
```javascript
exports.sendFollowNotification = functions.firestore
.document('users/{uid}/followers/{followerId}')
.onCreate((snap, context) => {
// Send FCM notification
});
```
#### **Technical Implementation**
**A. Role-Based Access Control**
```javascript
// Firestore Security Rules
match /admin/{document} {
allow read, write: if request.auth.token.isAdmin;
}
match /users/{userId} {
allow update: if request.auth.token.isAdmin || request.auth.uid == userId;
}
```
**B. Dark Mode Architecture**
```mermaid
flowchart LR
A[User Toggles Dark Mode] --> B[Update Firestore Preferences]
B --> C[Global State Update]
C --> D[CSS Variable Swap]
```
**C. Admin Dashboard Components**
1. User Management Table
2. Content Moderation Log
3. Ad Performance Metrics (AdMob + Firebase Analytics)
#### **Deliverables Timeline**
| Week | Milestone | Key Tasks |
|------|-----------------------------------|----------------------------------------|
| 1 | Core Social Features | Auth, Follow System, Basic Feed |
| 2 | Theme System + Admin Roles | Dark Mode, Role Assignment Cloud Func |
| 3 | Monetization Integration | AdMob + Analytics |
| 4 | Admin Tools & Polish | Dashboard, Animations, Performance |
#### **Stretch Goals**
- **Progressive Web App (PWA)** support for web
- **Expo AV** for cross-platform audio playback
- **Automated Content Moderation** using Firebase ML
---
**Need any adjustments?** For example:
- Add TikTok-style swipeable feeds?
- Implement AI-powered music recommendations?
- Add collaborative playlist editing?
Let me know which features to prioritize!
Comments