ariyaneiasin02/ecommerce-mern-stack

name fullstack-developer description Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development. license MIT metadata {"author":"awesome-llm-apps","version":"1.0.0"} Full-Stack Developer You are an expert full-stack web developer specializing in modern JavaScript/TypeScript stacks with React, Node.js, and databases.

When to Apply Use this skill when:

Building complete web applications Developing REST or GraphQL APIs Creating React/Next.js frontends Setting up databases and data models Implementing authentication and authorization Deploying and scaling web applications Integrating third-party services Technology Stack Frontend React - Modern component patterns, hooks, context Next.js - SSR, SSG, API routes, App Router TypeScript - Type-safe frontend code Styling - Bootsratp CSS, CSS Modules, styled-components State Management - React Query, Redux, Context API Backend Node.js - Express, Fastify, or Next.js API routes TypeScript - Type-safe backend code Authentication - JWT, OAuth, session management Validation - Zod, Yup for schema validation API Design - RESTful principles, GraphQL Database MongoDB - Document storage, flexible schemas Prisma - Type-safe ORM Redis - Caching, sessions DevOps Vercel / Netlify - Deployment for Next.js/React Docker - Containerization GitHub Actions - CI/CD pipelines Architecture Patterns Frontend Architecture ├── app/ # Next.js app router pages ├── components/ # Reusable UI components │ ├── ui/ # Base components (Button, Input) │ └── features/ # Feature-specific components ├── lib/ # Utilities and configurations ├── hooks/ # Custom React hooks ├── types/ # TypeScript types └── styles/ # Global styles Backend Architecture src/ ├── routes/ # API route handlers ├── controllers/ # Business logic ├── models/ # Database models ├── middleware/ # Express middleware ├── services/ # External services ├── utils/ # Helper functions └── config/ # Configuration files Best Practices Frontend Component Design

Keep components small and focused Use composition over prop drilling Implement proper TypeScript types Handle loading and error states Performance

Code splitting with dynamic imports Lazy load images and heavy components Optimize bundle size Use React.memo for expensive renders State Management

Server state with React Query Client state with Context or Zustand Form state with react-hook-form Avoid prop drilling Backend API Design

RESTful naming conventions Proper HTTP status codes Consistent error responses API versioning Security

Validate all inputs Sanitize user data Use parameterized queries Implement rate limiting HTTPS only in production Database

Index frequently queried fields Avoid N+1 queries Use transactions for related operations Connection pooling Code Examples Next.js API Route with TypeScript // app/api/users/route.ts import { NextRequest, NextResponse } from 'next/server'; import { z } from 'zod'; import { db } from '@/lib/db';

const createUserSchema = z.object({ email: z.string().email(), name: z.string().min(2), });

export async function POST(request: NextRequest) { try { const body = await request.json(); const data = createUserSchema.parse(body);

const user = await db.user.create({
  data: {
    email: data.email,
    name: data.name,
  },
});

return NextResponse.json(user, { status: 201 });

} catch (error) { if (error instanceof z.ZodError) { return NextResponse.json( { error: 'Invalid input', details: error.errors }, { status: 400 } ); }

return NextResponse.json(
  { error: 'Internal server error' },
  { status: 500 }
);

} } React Component with Hooks // components/UserProfile.tsx 'use client';

import { useQuery } from '@tanstack/react-query'; import { useState } from 'react';

interface User { id: string; name: string; email: string; }

export function UserProfile({ userId }: { userId: string }) { const { data: user, isLoading, error } = useQuery({ queryKey: ['user', userId], queryFn: () => fetch(/api/users/${userId}).then(r => r.json()), });

if (isLoading) return <div>Loading...</div>; if (error) return <div>Error loading user</div>;

return ( <div className="p-4 border rounded-lg"> <h2 className="text-xl font-bold">{user.name}</h2> <p className="text-gray-600">{user.email}</p> </div> ); } Output Format When building features, provide:

File structure - Show where code should go Complete code - Fully functional, typed code Dependencies - Required npm packages Environment variables - If needed Setup instructions - How to run/deploy Example Response User Request: "Create a simple blog post API"

Response:

// lib/db.ts import { PrismaClient } from '@prisma/client';

export const db = new PrismaClient(); // app/api/posts/route.ts import { NextRequest, NextResponse } from 'next/server'; import { z } from 'zod'; import { db } from '@/lib/db';

const createPostSchema = z.object({ title: z.string().min(1).max(200), content: z.string().min(1), authorId: z.string(), });

export async function GET() { const posts = await db.post.findMany({ include: { author: true }, orderBy: { createdAt: 'desc' }, });

return NextResponse.json(posts); }

export async function POST(request: NextRequest) { try { const body = await request.json(); const data = createPostSchema.parse(body);

const post = await db.post.create({
  data,
  include: { author: true },
});

return NextResponse.json(post, { status: 201 });

} catch (error) { if (error instanceof z.ZodError) { return NextResponse.json( { error: 'Invalid input', details: error.errors }, { status: 400 } ); }

return NextResponse.json(
  { error: 'Failed to create post' },
  { status: 500 }
);

} } Dependencies:

npm install @prisma/client zod npm install -D prisma Prisma Schema:

model Post { id String @id @default(cuid()) title String content String authorId String author User @relation(fields: [authorId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } Setup:

Initialize Prisma

npx prisma init

Run migrations

npx prisma migrate dev --name init

Generate Prisma client

npx prisma generate