React Native .cursorrules Strategies & Prompt Files

NEW

React Native Firebase .cursorrules prompt file

1. Project Initialization

1.1. Set Up Development Environment
Install Node.js and npm.
Install React Native CLI.
Set up Android Studio and Xcode for mobile development.
Install Firebase CLI.
1.2. Initialize React Native Project
Configure project directories following the proposed structure:
```
OneSong/
├── android/
├── ios/
├── src/
│ ├── components/
│ ├── screens/
│ ├── navigation/
│ ├── services/
│ ├── utils/
│ └── App.js
├── assets/
├── .gitignore
├── package.json
└── README.md
```
1.3. Set Up Firebase Project
Create a new Firebase project in the Firebase Console.
Enable Firebase Authentication (Email/Password, Google, etc.).
Set up Firestore Database.
Configure Firebase Storage.
Enable Firebase Cloud Messaging.
Initialize Firebase in the React Native project:
```javascript
// src/firebaseConfig.js
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/messaging';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const storage = firebase.storage();
export const messaging = firebase.messaging();
```
1.4. Initialize Version Control
Initialize a Git repository.
Set up .gitignore to exclude node_modules, ios/, android/, and other sensitive files.
Make the initial commit.

2. Authentication & Onboarding

2.1. Design Authentication Screens
Sign-Up Screen
- Fields: Email, Password, Confirm Password.
- Buttons: Sign Up, Navigate to Login.
Login Screen
- Fields: Email, Password.
- Buttons: Login, Navigate to Sign-Up, Forgot Password.
Password Recovery Screen
- Field: Email.
- Button: Send Recovery Email.
2.2. Implement Authentication Logic
Sign-Up Functionality
- Validate input fields.
- Create user with Firebase Authentication.
- Store additional user info in Firestore (users collection).
Login Functionality
- Authenticate user with Firebase.
- Handle authentication errors.
Password Recovery
- Send password reset email via Firebase.
2.3. Onboarding Process
MEPs:
- Receive unique QR code.
- Initial profile setup (Bio, Video Clips, Short Mixes).
Consumers:
- Receive unique QR code.
- Initial profile setup with social media integration.
2.4. Example Code Snippet: Authentication Service
```javascript
// src/services/authService.js
import { auth, firestore } from '../firebaseConfig';
export const registerUser = async (email, password, userType) => {
try {
const userCredential = await auth.createUserWithEmailAndPassword(email, password);
const userId = userCredential.user.uid;
await firestore.collection('users').doc(userId).set({
email,
userType,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
});
return userCredential.user;
} catch (error) {
console.error('Error registering user:', error);
throw error;
}
};
export const loginUser = async (email, password) => {
try {
const userCredential = await auth.signInWithEmailAndPassword(email, password);
return userCredential.user;
} catch (error) {
console.error('Error logging in:', error);
throw error;
}
};
export const resetPassword = async (email) => {
try {
await auth.sendPasswordResetEmail(email);
} catch (error) {
console.error('Error sending password reset email:', error);
throw error;
}
};
```

3. Event Management

3.1. Develop Event Creation Interface for MEPs
Fields: Event Name, Date, Location, Flyer Upload, Short Bio, Video Clips, Short Mixes.
Buttons: Create Event, Upload Flyer, Upload Media.
3.2. Implement Event Storage in Firestore
Structure for events collection:
```
events/
├── eventId1/
│ ├── name
│ ├── date
│ ├── location
│ ├── flyerUrl
│ ├── bio
│ ├── videoClips
│ ├── shortMixes
│ ├── songRequests/
│ └── attendees/
```
3.3. Create Event Management Dashboard for MEPs
View active events.
Edit or delete events.
Access event-specific data (song requests, attendees).
3.4. Implement Flyer and Media Uploads
Use Firebase Storage for uploading flyers, videos, and audio clips.
Ensure proper handling of file types and sizes.
3.5. Example Code Snippet: Event Service
```javascript
// src/services/eventService.js
import { firestore, storage } from '../firebaseConfig';
export const createEvent = async (eventData, flyerFile) => {
try {
// Upload flyer to Firebase Storage
const flyerRef = storage.ref().child(flyers/${flyerFile.name});
await flyerRef.put(flyerFile);
const flyerUrl = await flyerRef.getDownloadURL();
```
  // Add event to Firestore  const eventRef = await firestore.collection('events').add({    ...eventData,    flyerUrl,    createdAt: firebase.firestore.FieldValue.serverTimestamp(),  });  return eventRef.id;} catch (error) {  console.error('Error creating event:', error);  throw error;}
```
};
export const getActiveEvents = async () => {
try {
const snapshot = await firestore.collection('events').where('status', '==', 'active').get();
const events = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
return events;
} catch (error) {
console.error('Error fetching active events:', error);
return [];
}
};
```

4. Real-Time Interaction Features

4.1. Implement Song Request System
Consumers:
- Input field to request songs.
- Option to submit requests in real-time or in advance.
MEPs:
- View incoming song requests.
- Accept, prioritize, and integrate requests into setlist.
4.2. Develop AI-Assisted DJ Functionality
Analyze song requests based on:
- Musical chords compatibility.
- Previous popular mixes.
- Release dates.
Generate mixed playlists adhering to event constraints.
4.3. Enable Shout-Outs Feature
Allow MEPs to send personalized messages to consumers.
Trigger shout-outs based on special moments (e.g., birthdays).

4.4. Example Code Snippet: Handling Song Requests

```javascript
// functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.handleSongRequest = functions.firestore
.document('events/{eventId}/songRequests/{requestId}')
.onCreate(async (snap, context) => {
const request = snap.data();
const eventId = context.params.eventId;

  // Prioritize and add to setlist  const setlistRef = admin.firestore().collection('events').doc(eventId).collection('setlist');  await setlistRef.add({    songId: request.songId,    requestedBy: request.userId,    timestamp: admin.firestore.FieldValue.serverTimestamp(),  });  // Notify MEP  const mepId = request.mepId;  const mepToken = await getUserToken(mepId); // Implement getUserToken  await admin.messaging().sendToDevice(mepToken, {    notification: {      title: 'New Song Request',      body: `${request.songName} has been requested by a consumer.`,    },  });});

```

4.5. Integrate AI DJ Service
Develop backend AI algorithms for song mixing.
Ensure AI avoids offensive content and adheres to set constraints.
Provide API endpoints for frontend to interact with AI DJ.

5. Digital Transactions and Tipping

5.1. Integrate Digital Cash Applications
Supported Platforms: Money Pull Up, others as needed.
5.2. Implement Tipping Functionality
Enable consumers to tip MEPs during events.
Securely handle transactions via Firebase.
5.3. Develop "Money Pull Up" Integration
API integration for seamless tipping experience.
Ensure compliance with payment processing standards.
5.4. Example Code Snippet: Tipping Service
```javascript
// src/services/tippingService.js
import { firestore } from '../firebaseConfig';
export const sendTip = async (mepId, amount, userId) => {
try {
await firestore.collection('transactions').add({
mepId,
userId,
amount,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
type: 'tip',
});
// Optionally integrate with payment API here
} catch (error) {
console.error('Error sending tip:', error);
throw error;
}
};
```

6.1. Implement Social Sharing
Allow consumers to share event details on platforms like Facebook, Twitter, Instagram.
6.2. Develop Live Video Posting
Enable consumers to post live videos from events.
Store videos in Firebase Storage and link in Firestore.
6.3. Enable Event Reviews and Ratings
Allow consumers to leave reviews and ratings for events and MEPs.
6.4. Develop Follow and Notification System
Allow consumers to follow DJs.
Send notifications for DJ schedules and updates.
6.5. Example Code Snippet: Social Sharing Component
```javascript
// src/components/SocialShare.js
import React from 'react';
import { View, Button, Share } from 'react-native';
const SocialShare = ({ event }) => {
const onShare = async () => {
try {
await Share.share({
message: Join me at ${event.name} on ${event.date}! Download OneSong to participate.,
url: event.flyerUrl,
});
} catch (error) {
alert(error.message);
}
};
```
return (  `<View>`    `<Button onPress={onShare} title="Share Event" />`  `</View>`);
```
};
export default SocialShare;
```

7. Backend Development with Firebase

7.1. Configure Firestore Database
Define collections: users, events, songRequests, transactions, setlist, attendees.
7.2. Develop Firebase Cloud Functions
Song Request Handling: As shown in section 4.4.
AI DJ Processing: Trigger AI mixing upon setlist updates.
Notification Services: Send push notifications for various events.
7.3. Set Up Firestore Security Rules
Protect data access based on user roles (MEP vs. Consumer).
Ensure only authorized users can write to specific collections.
7.4. Implement Data Validation
Validate inputs on both frontend and backend.
Use Firebase Functions to enforce data integrity.

7.5. Example Firestore Security Rules

```javascript
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Users can read their own profile
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}

  // MEPs can manage their own events  match /events/{eventId} {    allow read: if true;    allow write: if request.auth != null && request.auth.uid == resource.data.mepId;  }  // Consumers can create song requests  match /events/{eventId}/songRequests/{requestId} {    allow create: if request.auth != null;    allow read: if request.auth != null;    allow update, delete: if false;  }  // Transactions are secure  match /transactions/{transactionId} {    allow read, write: if request.auth != null;  }}

}
```

8. Frontend Development with React Native

8.1. Develop Reusable Components
EventCard: Display event details.
SongRequest: Interface for submitting song requests.
Profile: User profile display and editing.
Tipping: Tipping interface for consumers.
8.2. Implement Navigation
Set up React Navigation with stack navigators for different screens:
- Home
- Event Details
- Profile
- Create Event (MEP)
- Song Requests
- Tipping
- Settings
8.3. Develop Screens
Home Screen:
- Display list of active events.
- Search and filter functionality.
Event Details Screen:
- Show event information.
- Display song request countdown.
- Provide options for song requests and interactions.
Profile Screen:
- Display user information.
- Edit profile options.
Create Event Screen (MEP):
- Form to create new events.
- Upload flyer and media.
Song Requests Screen:
- Display current song requests.
- Allow MEPs to manage requests.
Tipping Screen:
- Interface to send tips to MEPs.
8.4. Implement State Management
Use Context API or Redux for managing global state.
Manage user authentication state, event data, song requests, etc.
8.5. Example Code Snippet: EventListScreen
```javascript
// src/screens/EventListScreen.js
import React, { useEffect, useState } from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import EventCard from '../components/EventCard';
import { getActiveEvents } from '../services/eventService';
const EventListScreen = () => {
const [events, setEvents] = useState([]);
```
useEffect(() => {  const fetchEvents = async () => {    const activeEvents = await getActiveEvents();    setEvents(activeEvents);  };  fetchEvents();}, []);return (  `<View style={styles.container}>`    \`<FlatList      data={events}      renderItem={({ item }) =>` `<EventCard event={item} />\`}      keyExtractor={(item) => item.id}    />  `</View>`);
```
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
});
export default EventListScreen;
```

9. AI-Assisted DJ Development

9.1. Design AI Mixing Algorithms
Analyze musical chords for seamless transitions.
Incorporate historical data on popular mixes.
Consider release dates and current trends.
9.2. Integrate AI with Backend
Develop API endpoints for AI to receive song requests and deliver mixed playlists.
Ensure AI processes requests in real-time or as per event scheduling.
9.3. Implement Offensive Content Filtering
Use content analysis to detect and exclude offensive music.
Allow MEPs to set parameters for acceptable content.
9.4. Example Workflow: AI DJ Integration

Receive Song Requests:
- AI fetches new song requests from Firestore.
Analyze and Prioritize:
- Assess song compatibility and prioritize based on predefined criteria.
Generate Mixed Playlist:
- Create a seamless mix adhering to musical and event constraints.
Update Setlist:
- Push the mixed playlist back to Firestore for MEPs to access.
Notify MEPs:
- Send notifications about the updated setlist.

10. Testing and Quality Assurance

10.1. Unit Testing
Tools: Jest, React Native Testing Library.
Tasks:
- Write tests for individual components (e.g., EventCard, SongRequest).
- Test utility functions and services (e.g., authService, eventService).
Example Test: EventCard Component
```javascript
// tests/EventCard.test.js
import React from 'react';
import { render } from '@testing-library/react-native';
import EventCard from '../src/components/EventCard';
test('renders event details correctly', () => {
const event = {
name: 'Live Concert',
date: '2024-12-25',
flyerUrl: 'https://example.com/flyer.jpg',
};
const { getByText } = render(<EventCard event={event} />);
expect(getByText('Live Concert')).toBeTruthy();
expect(getByText('2024-12-25')).toBeTruthy();
});
```
10.2. Integration Testing
Tools: Firebase Emulator Suite, Detox.
Tasks:
- Test interactions between frontend and backend (e.g., song request flow).
- Verify data synchronization and real-time updates.
10.3. User Acceptance Testing (UAT)
Tasks:
- Conduct testing sessions with actual MEPs and consumers.
- Gather feedback on usability and feature functionality.
- Iterate based on feedback to enhance user experience.
10.4. Performance Testing
Tasks:
- Ensure the app performs well under high load (e.g., multiple song requests).
- Optimize AI DJ processing for real-time performance.
10.5. Security Testing
Tasks:
- Verify Firestore security rules.
- Test authentication flows for vulnerabilities.
- Ensure data encryption and secure transactions.

11. Deployment Strategy

11.1. Prepare for Firebase Hosting
Configure Firebase Hosting for backend services.
Deploy Firebase Functions and Firestore rules.
11.2. Deploy Frontend to App Stores
iOS Deployment:
- Configure App Store Connect with app details, screenshots, and descriptions.
- Archive and upload the app using Xcode.
- Submit for App Store review.
Android Deployment:
- Configure Google Play Console with app details, screenshots, and descriptions.
- Generate signed APK/AAB.
- Upload and submit for Play Store review.
11.3. Continuous Integration and Deployment (CI/CD)
Set up CI/CD pipelines using tools like GitHub Actions or Bitrise.
Automate testing, building, and deployment processes.
11.4. Example Deployment Commands
```bash
Deploy Firebase Functions, Firestore rules, and Hosting
firebase deploy --only functions,firestore,hosting
```

12. Maintenance and Support

12.1. Monitoring and Analytics
Tools: Firebase Crashlytics, Google Analytics.
Tasks:
- Monitor app stability and crash reports.
- Track user engagement and feature usage.
12.2. Regular Updates
Schedule periodic updates for:
- Feature enhancements.
- Security patches.
- Performance optimizations.
12.3. User Support
In-App Support:
- Implement chat or email support channels.
Knowledge Base:
- Create FAQs and tutorials for users.
12.4. Feedback Mechanism
Allow users to submit feedback directly within the app.
Use feedback to prioritize future developments.

13. Documentation and Best Practices

13.1. Code Documentation
Comment complex code sections.
Maintain comprehensive README with setup instructions.
13.2. Maintain Coding Standards
Tools: ESLint, Prettier.
Tasks:
- Configure ESLint for linting.
- Set up Prettier for consistent code formatting.
Example ESLint Configuration:
```json
// .eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
"react/prop-types": "off"
}
}
```
Example Prettier Configuration:
```json
// .prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"tabWidth": 2
}
```
13.3. Maintain Modular Code Structure
Break down the application into reusable components and services.
Ensure separation of concerns for better maintainability.
13.4. Example: Service File with Comments
```javascript
// src/services/userService.js
import { firestore } from '../firebaseConfig';
/**
- Fetches user profile by user ID.
- @param {string} userId - The ID of the user.
- @returns {Promise<Object>} - User profile data.
  */
  export const getUserProfile = async (userId) => {
  try {
  const userDoc = await firestore.collection('users').doc(userId).get();
  if (userDoc.exists) {
  return { id: userDoc.id, ...userDoc.data() };
  } else {
  throw new Error('User not found');
  }
  } catch (error) {
  console.error('Error fetching user profile:', error);
  throw error;
  }
  };
```

14. Example Task Breakdown

Task: Develop Event Creation Interface for MEPs
Subtasks:
- Design UI mockups for event creation screen.
- Implement form fields (Event Name, Date, Location).
- Integrate flyer upload functionality using Firebase Storage.
- Add sections for Bio, Video Clips, and Short Mixes.
- Validate form inputs before submission.
- Connect frontend form to backend Firestore service.
- Test event creation flow for MEPs.
Task: Implement Song Request System
Subtasks:
- Design UI for song request input on consumer side.
- Create backend Firestore structure for song requests.
- Develop frontend component for submitting requests.
- Implement Firebase Cloud Function to handle new requests.
- Notify MEPs of new song requests via push notifications.
- Allow MEPs to manage and prioritize requests in dashboard.
- Test end-to-end song request functionality.

15. Security Considerations

15.1. Secure Authentication
Enforce strong password policies.
Implement multi-factor authentication if necessary.
15.2. Firestore Security Rules
Restrict data access based on user roles.
Validate data types and formats.
15.3. Data Encryption
Ensure all data transmitted is encrypted via HTTPS.
Use Firebase's built-in encryption for data at rest.
15.4. Regular Security Audits
Schedule periodic reviews of security rules.
Update dependencies to patch vulnerabilities.
15.5. Example Security Rule for Song Requests
```javascript
match /events/{eventId}/songRequests/{requestId} {
allow create: if request.auth != null && request.resource.data.songName is string && request.resource.data.userId == request.auth.uid;
allow read: if request.auth != null;
allow update, delete: if false;
}
```

16. Example Code Formatting and Best Practices

16.1. Use Modular Code Structure
Organize code into components, services, and utilities.
Example:
```
src/
├── components/
│ ├── EventCard.js
│ ├── SongRequest.js
│ └── SocialShare.js
├── services/
│ ├── authService.js
│ ├── eventService.js
│ └── tippingService.js
├── screens/
│ ├── HomeScreen.js
│ ├── EventListScreen.js
│ └── ProfileScreen.js
├── navigation/
│ └── AppNavigator.js
└── utils/
└── helpers.js
```
16.2. Consistent Naming Conventions
Use camelCase for variables and functions.
Use PascalCase for component names.
Example:
```javascript
// Correct Naming
const userProfile = {};
function fetchUserData() {}
const EventCard = () => {};
```
16.3. Commenting and Documentation
Provide clear comments for complex logic.
Maintain a comprehensive README with setup and usage instructions.
16.4. Example: Using Async/Await for Asynchronous Operations
```javascript
// src/services/eventService.js
import { firestore } from '../firebaseConfig';
/**
- Fetches active events from Firestore.
- @returns {Promise<Array>} - List of active events.
  */
  export const getActiveEvents = async () => {
  try {
  const snapshot = await firestore.collection('events').where('status', '==', 'active').get();
  const events = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  return events;
  } catch (error) {
  console.error('Error fetching active events:', error);
  return [];
  }
  };
```

17. Final Review and Launch Preparation

17.1. Conduct Final Code Review
Ensure all features are implemented as per specifications.
Verify code quality and adherence to best practices.
17.2. Prepare Marketing Materials
Design app icons and promotional graphics.
Create app store listings with descriptions and screenshots.
17.3. Final Testing
Perform a last round of testing to catch any remaining issues.
Ensure all integrations (e.g., AI DJ, tipping) function seamlessly.
17.4. Launch Strategy
Plan a launch date and coordinate marketing efforts.
Prepare for initial user onboarding and support.

18. Post-Launch Activities

18.1. Monitor App Performance
Use analytics to track user behavior and app usage.
Identify and address any performance bottlenecks.
18.2. Gather User Feedback
Encourage users to provide feedback and reviews.
Use feedback to prioritize feature updates and bug fixes.
18.3. Plan for Feature Enhancements
Based on user feedback, plan and implement new features.
Continuously innovate to keep the app relevant and engaging.

Conclusion

This comprehensive task list provides a detailed roadmap for developing the OneSong application using React Native for the frontend and Firebase for the backend.

Follow these structured tasks and adhere to best practices. Build a robust, secure, and user-friendly platform that bridges the gap between musical entertainment providers and consumers, enhancing the overall event experience.

stack: