Senior Full-Stack Developer

Expert-level full-stack development for modern web applications.

Core Competencies

Frontend frameworks (React, Vue, Next.js)
Backend services (Node.js, Python, Go)
Database design (SQL, NoSQL)
API development (REST, GraphQL)
Authentication and authorization
Performance optimization
Testing strategies
Deployment and DevOps

Tech Stack Recommendations

Modern Full-Stack (2024+)

Frontend:

Framework: Next.js 14+ (App Router)
Styling: Tailwind CSS
State: Zustand or Jotai
Forms: React Hook Form + Zod
Data Fetching: TanStack Query

Backend:

Runtime: Node.js or Bun
Framework: Next.js API Routes or Hono
ORM: Prisma or Drizzle
Validation: Zod

Database:

Primary: PostgreSQL
Cache: Redis
Search: Elasticsearch or Typesense

Infrastructure:

Hosting: Vercel, Railway, or AWS
CDN: Cloudflare
Storage: S3-compatible

Project Structure

Next.js App Router Structure

project/
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   │   ├── login/
│   │   │   └── register/
│   │   ├── (dashboard)/
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── api/
│   │   │   └── [...route]/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/
│   │   └── features/
│   ├── lib/
│   │   ├── db.ts
│   │   ├── auth.ts
│   │   └── utils.ts
│   ├── hooks/
│   ├── types/
│   └── styles/
├── prisma/
│   └── schema.prisma
├── public/
├── tests/
└── config files

Frontend Patterns

Component Architecture

Atomic Design:

components/
├── atoms/        # Button, Input, Label
├── molecules/    # FormField, SearchBar
├── organisms/    # Header, ProductCard
├── templates/    # PageLayout, DashboardLayout
└── pages/        # Assembled pages

Feature-Based:

features/
├── auth/
│   ├── components/
│   ├── hooks/
│   ├── api/
│   └── types/
├── products/
│   ├── components/
│   ├── hooks/
│   ├── api/
│   └── types/

React Patterns

Custom Hook Pattern:

typescript

function useUser(userId: string) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 5 * 60 * 1000,
  });

  return { user: data, isLoading, error };
}

Compound Component Pattern:

typescript

const Card = ({ children }: Props) => (
  <div className="card">{children}</div>
);
Card.Header = ({ children }: Props) => (
  <div className="card-header">{children}</div>
);
Card.Body = ({ children }: Props) => (
  <div className="card-body">{children}</div>
);
Card.Footer = ({ children }: Props) => (
  <div className="card-footer">{children}</div>
);

// Usage
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>

State Management

Zustand Store:

typescript

interface Store {
  user: User | null;
  setUser: (user: User) => void;
  logout: () => void;
}

const useStore = create<Store>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

Backend Patterns

API Design

RESTful Endpoints:

GET    /api/users          # List users
POST   /api/users          # Create user
GET    /api/users/:id      # Get user
PUT    /api/users/:id      # Update user
DELETE /api/users/:id      # Delete user
GET    /api/users/:id/posts # User's posts

Response Format:

typescript

// Success
{
  "data": { ... },
  "meta": {
    "page": 1,
    "limit": 20,
    "total": 100
  }
}

// Error
{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid input",
    "details": [
      { "field": "email", "message": "Invalid email format" }
    ]
  }
}

Request Validation

typescript

import { z } from 'zod';

const CreateUserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2).max(100),
  role: z.enum(['user', 'admin']).default('user'),
});

async function createUser(req: Request) {
  const body = await req.json();
  const result = CreateUserSchema.safeParse(body);

  if (!result.success) {
    return Response.json(
      { error: { code: 'VALIDATION_ERROR', details: result.error.issues } },
      { status: 400 }
    );
  }

  const user = await db.user.create({ data: result.data });
  return Response.json({ data: user }, { status: 201 });
}

Error Handling

typescript

class AppError extends Error {
  constructor(
    public code: string,
    public message: string,
    public statusCode: number = 400,
    public details?: unknown
  ) {
    super(message);
  }
}

// Middleware
function errorHandler(error: Error) {
  if (error instanceof AppError) {
    return Response.json(
      { error: { code: error.code, message: error.message, details: error.details } },
      { status: error.statusCode }
    );
  }

  console.error(error);
  return Response.json(
    { error: { code: 'INTERNAL_ERROR', message: 'Something went wrong' } },
    { status: 500 }
  );
}

Database Patterns

Prisma Schema Example

prisma

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  role      Role     @default(USER)
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
  tags      Tag[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([authorId])
}

enum Role {
  USER
  ADMIN
}

Query Optimization

typescript

// Bad: N+1 query
const users = await db.user.findMany();
for (const user of users) {
  const posts = await db.post.findMany({ where: { authorId: user.id } });
}

// Good: Include relation
const users = await db.user.findMany({
  include: {
    posts: {
      where: { published: true },
      take: 5,
      orderBy: { createdAt: 'desc' },
    },
  },
});

// Pagination
const posts = await db.post.findMany({
  skip: (page - 1) * limit,
  take: limit,
  where: { published: true },
  orderBy: { createdAt: 'desc' },
});

Authentication

JWT Authentication Flow

typescript

// Login
async function login(email: string, password: string) {
  const user = await db.user.findUnique({ where: { email } });
  if (!user || !await verifyPassword(password, user.passwordHash)) {
    throw new AppError('INVALID_CREDENTIALS', 'Invalid email or password', 401);
  }

  const token = jwt.sign(
    { userId: user.id, role: user.role },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }
  );

  return { token, user: sanitizeUser(user) };
}

// Middleware
async function authenticate(req: Request) {
  const header = req.headers.get('authorization');
  if (!header?.startsWith('Bearer ')) {
    throw new AppError('UNAUTHORIZED', 'Missing token', 401);
  }

  const token = header.slice(7);
  try {
    const payload = jwt.verify(token, process.env.JWT_SECRET);
    return payload;
  } catch {
    throw new AppError('UNAUTHORIZED', 'Invalid token', 401);
  }
}

Session-Based Auth (Next.js)

typescript

// Using NextAuth.js
import NextAuth from 'next-auth';
import { PrismaAdapter } from '@auth/prisma-adapter';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Credentials({
      credentials: {
        email: { type: 'email' },
        password: { type: 'password' },
      },
      authorize: async (credentials) => {
        // Validate credentials
      },
    }),
  ],
  session: { strategy: 'jwt' },
});

Testing Strategy

Testing Pyramid

         /\
        /  \     E2E (Playwright)
       /----\    - Critical user flows
      /      \   - 10% of tests
     /--------\  Integration
    /          \ - API endpoints
   /------------\- 30% of tests
  /    Unit      \
 /----------------\
 - Components, Utils
 - 60% of tests

Test Examples

Unit Test:

typescript

describe('formatCurrency', () => {
  it('formats USD correctly', () => {
    expect(formatCurrency(1234.56, 'USD')).toBe('$1,234.56');
  });

  it('handles zero', () => {
    expect(formatCurrency(0, 'USD')).toBe('$0.00');
  });
});

API Integration Test:

typescript

describe('POST /api/users', () => {
  it('creates user with valid data', async () => {
    const response = await app.request('/api/users', {
      method: 'POST',
      body: JSON.stringify({ email: 'test@example.com', name: 'Test' }),
    });

    expect(response.status).toBe(201);
    const data = await response.json();
    expect(data.data.email).toBe('test@example.com');
  });

  it('rejects invalid email', async () => {
    const response = await app.request('/api/users', {
      method: 'POST',
      body: JSON.stringify({ email: 'invalid', name: 'Test' }),
    });

    expect(response.status).toBe(400);
  });
});

Performance Optimization

Frontend Performance

Code Splitting:

typescript

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  );
}

Image Optimization:

typescript

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
/>

Backend Performance

Caching:

typescript

import { Redis } from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

async function getUser(id: string) {
  const cached = await redis.get(`user:${id}`);
  if (cached) return JSON.parse(cached);

  const user = await db.user.findUnique({ where: { id } });
  await redis.set(`user:${id}`, JSON.stringify(user), 'EX', 3600);
  return user;
}

Reference Materials

```
references/react_patterns.md
```
- React best practices
```
references/api_design.md
```
- API design guidelines
```
references/database_patterns.md
```
- Database optimization
```
references/security_checklist.md
```
- Security best practices

Scripts

bash

# Project scaffolder
python scripts/scaffold.py --name my-app --stack nextjs

# Code quality analyzer
python scripts/code_quality.py --path ./src

# Database migration helper
python scripts/db_migrate.py --action generate

# Performance audit
python scripts/perf_audit.py --url https://localhost:3000

senior-fullstack

NPX Install

Tags

SKILL.md Content

Senior Full-Stack Developer

Core Competencies

Tech Stack Recommendations

Modern Full-Stack (2024+)

Project Structure

Next.js App Router Structure

Frontend Patterns

Component Architecture

React Patterns

State Management

Backend Patterns

API Design

Request Validation

Error Handling

Database Patterns

Prisma Schema Example

Query Optimization

Authentication

JWT Authentication Flow

Session-Based Auth (Next.js)

Testing Strategy

Testing Pyramid

Test Examples

Performance Optimization

Frontend Performance

Backend Performance

Reference Materials

Scripts