Loading...
Loading...
Guide feature development for full-stack applications with architecture focus. Covers Next.js App Router patterns, NestJS backend services, database models, data workflows, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.
npx skill4agent add travisjneuman/.claude generic-fullstack-feature-developerUser Action → Event Handler → API Call → NestJS Controller
↓
UI Update ← Response ← Service ← Prisma ← Database// Frontend: Call API
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(userData),
});
// Backend: Handle request
@Post()
@UseGuards(JwtAuthGuard)
async createUser(@Body() dto: CreateUserDto) {
return this.userService.create(dto);
}| File | Purpose |
|---|---|
| Route UI (server component by default) |
| Shared UI wrapper |
| Suspense loading UI |
| Error boundary |
| API endpoint |
// Server Component (default) - can fetch data
export default async function Page() {
const data = await getData(); // Direct DB/API call
return <div>{data.title}</div>;
}
// Client Component - needs 'use client'
'use client';
export default function Interactive() {
const [state, setState] = useState();
return <button onClick={() => setState(...)}>Click</button>;
}Module → Controller → Service → Prisma// 1. Module definition
@Module({
controllers: [UsersController],
providers: [UsersService],
exports: [UsersService],
})
export class UsersModule {}
// 2. Controller with guards
@Controller("users")
@UseGuards(JwtAuthGuard)
export class UsersController {
@Post()
create(@Body() dto: CreateUserDto) {
return this.usersService.create(dto);
}
}
// 3. Service with Prisma
@Injectable()
export class UsersService {
constructor(private prisma: PrismaService) {}
create(dto: CreateUserDto) {
return this.prisma.user.create({ data: dto });
}
}# 1. Edit schema.prisma
# 2. Create migration
npx prisma migrate dev --name add_user_role
# 3. Regenerate client
npx prisma generate
# 4. Update services to use new fields// ✓ Type-safe with generated types
const user = await this.prisma.user.findUnique({
where: { id },
include: { posts: true },
});
// ✗ Avoid raw SQL
await this.prisma.$queryRaw`SELECT * FROM users`; // No type safetyLogin Request → Validate Credentials → Generate JWT → Set Cookie
↓
Protected Route → JwtAuthGuard → Extract User → Inject to Controller// Frontend: Include credentials
fetch('/api/protected', { credentials: 'include' });
// Backend: Guard + decorator
@UseGuards(JwtAuthGuard)
@Get('profile')
getProfile(@CurrentUser() user: User) {
return user;
}