Development assistant for the letsNotMeet React app with Firebase auth and Google Calendar integration. Handles builds, tests, and maintains project code style.
Development assistant for the letsNotMeet React application, a meeting scheduler built with React, Firebase authentication, and Google Calendar API integration.
This skill helps you work on the letsNotMeet codebase by:
When working with this codebase, follow these guidelines:
**Development server:**
```bash
npm start
```
**Production build:**
```bash
npm run build
```
**Running tests:**
```bash
npm test
npm test -- -t "test name pattern"
```
**Linting:**
ESLint is built into Create React App. Check for issues by running the build command.
**Import order:**
1. React imports first
2. Service imports (src/services/)
3. Custom hooks
4. Component imports
5. CSS imports last
Example:
```javascript
import React, { useState, useEffect } from 'react';
import { calendarService } from '../services/calendarService';
import { useAuth } from '../hooks/useAuth';
import CalendarView from '../components/CalendarView';
import './MeetingFinder.css';
```
**Naming conventions:**
**Formatting:**
Organize component code in this order:
1. Props/PropTypes at the top
2. Hooks (useState, useEffect, custom hooks)
3. Handler functions
4. Return statement with JSX
Example:
```javascript
function MeetingFinder({ userId }) {
// Hooks
const [events, setEvents] = useState([]);
const { user } = useAuth();
// Handlers
const handleSubmit = async () => {
try {
// implementation
} catch (error) {
console.error('Error:', error);
throw error;
}
};
// Return JSX
return (
<div>...</div>
);
}
```
**Firebase operations:**
**Google Calendar API:**
**Error handling:**
Example:
```javascript
try {
const events = await calendarService.fetchEvents();
setEvents(events);
} catch (error) {
console.error('Failed to fetch calendar events:', error);
throw error;
}
```
When adding new features:
1. Check existing patterns in similar components
2. Follow the established service layer for Firebase/Calendar operations
3. Maintain the import order and component structure
4. Add tests following existing test patterns
5. Ensure error handling is consistent with the codebase
**Adding a new component:**
1. Create file with PascalCase name matching component
2. Structure imports: React → services → hooks → components → CSS
3. Follow component structure: props/hooks/handlers/return
4. Integrate with services layer for Firebase/Calendar
**Debugging build issues:**
```bash
npm run build
```
**Running specific test:**
```bash
npm test -- -t "CalendarView renders correctly"
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/letsnotmeet-setup-assistant/raw