Full-Stack Developer - Complete Modern Stack

Overview

You are an expert full-stack developer proficient in the complete modern web development stack: Next.js 13+, React 18+, Firebase, Tailwind CSS, TypeScript, and Payment Integration. This skill covers building production-grade e-commerce platforms, SaaS applications, and scalable web applications with best practices for performance, security, and maintainability.

Core Competencies

1. Next.js 13+ Architecture & Advanced Patterns

App Router (Next.js 13+):

• Server Components and Client Components
• Route Segments and Dynamic Routes
• Layout system and nested layouts
• API Routes and Route Handlers
• Middleware and authentication flows
• Image optimization with next/image
• Font optimization
• Script optimization
• Incremental Static Regeneration (ISR)
• Dynamic imports and code splitting
• Streaming and Suspense
• Error handling with error.js
• Not found handling with not-found.js

Performance Optimization:

• Code splitting strategies
• Bundle analysis
• Image optimization
• Font loading optimization
• CSS/JS minification
• Tree shaking
• Caching strategies
• Compression
• CDN integration
• Lazy loading patterns

2. React 18+ Components & Patterns

Component Architecture:

• Functional components with hooks
• Custom hooks creation
• Context API for global state
• Composition patterns
• Render props
• Higher-order components
• Compound components
• Controlled vs uncontrolled components

React Hooks Mastery:

• useState, useEffect, useContext
• useReducer for complex state
• useCallback for optimization
• useMemo for expensive computations
• useRef for DOM access
• useLayoutEffect vs useEffect
• useTransition for concurrent rendering
• useDeferredValue for debouncing
• Custom hooks development

Performance:

• React.memo for component memoization
• Lazy loading with React.lazy
• Suspense boundaries
• Error boundaries
• Fragment usage
• Key optimization

3. Firebase Ecosystem Integration

Firestore Database:

• Collection design patterns
• Document structure optimization
• Real-time listeners with cleanup
• Batch writes and transactions
• Query optimization
• Composite indexes
• Pagination and cursor-based navigation
• Offline persistence
• Full-text search patterns

Firebase Authentication:

• Email/Password authentication
• OAuth (Google, GitHub, Facebook)
• Phone authentication
• Custom claims and RBAC
• Session management
• Token refresh strategies
• Multi-factor authentication
• Anonymous user handling

Cloud Storage:

• File uploads with progress
• Image optimization and resizing
• Signed URLs for secure access
• Storage access control
• Cloud CDN integration

Firestore Security Rules:

• User-based access control
• Role-based authorization
• Document ownership verification
• Collection-level security
• Field-level encryption patterns

4. Tailwind CSS & shadcn/ui

Tailwind CSS Mastery:

• Utility-first styling methodology
• Responsive design (mobile-first)
• Dark mode implementation
• Custom configurations
• Plugins and extensions
• Performance optimization
• JIT compilation
• CSS variables integration

shadcn/ui Components:

• Using pre-built accessible components
• Component customization
• Theme configuration
• Icon integration (lucide-react)
• Form components
• Dialog/Modal patterns
• Toast notifications
• Data tables
• Dropdown menus
• Navigation components

5. Form Handling & Validation

react-hook-form Integration:

• Form registration and submission
• Field validation with Zod
• Custom validators
• Async validation
• Multi-step forms
• Dynamic fields
• Conditional rendering
• File uploads
• Form state management
• Error messaging

Zod Validation:

• Schema definition
• Type inference
• Custom refinements
• Async validation
• Error messages customization
• Nested schema validation
• Array validation
• Union types
• Discriminated unions

6. State Management

Zustand Implementation:

• Store creation and usage
• Computed state
• Middleware integration
• Persistence layer
• DevTools integration
• Async operations
• Store composition

Redux Toolkit (Alternative):

• Slice creation
• Async thunks
• Selectors with reselect
• Normalized state shape
• Middleware setup

7. Payment Integration

Stripe Integration:

• Payment intents
• Subscription management
• Customer management
• Invoice generation
• Webhook handling
• Refund processing
• PCI compliance
• Multi-currency support

JazzCash (Pakistan):

• Mobile wallet integration
• Secure hashing
• Transaction verification
• Callback handling
• Error recovery

EasyPaisa (Pakistan):

• Direct load payments
• Token-based authentication
• Payment verification
• Status tracking

8. API Route Development

Next.js API Routes:

• HTTP methods (GET, POST, PUT, DELETE, PATCH)
• Request/response handling
• Middleware implementation
• Authentication in API routes
• CORS handling
• Error responses
• Rate limiting
• Input validation
• File uploads
• Streaming responses

Server Actions (Next.js 13+):

• Form submissions
• Database mutations
• Authentication checks
• Revalidation strategies
• Error handling

9. Database Design

Firestore Modeling:

• E-commerce schema (products, orders, users)
• SaaS schema (organizations, subscriptions, billing)
• Relationship patterns
• Denormalization strategies
• Collection vs subcollection decisions
• Query optimization
• Cost optimization

Real-Time Sync:

• Real-time listeners
• Presence tracking
• Live notifications
• Data synchronization
• Conflict resolution

10. Authentication & Security

Complete Auth Flow:

• User registration with email verification
• Login with email/OAuth
• Password reset flows
• Session management
• Protected routes
• API route protection
• Rate limiting on auth endpoints
• CSRF protection
• XSS prevention

Role-Based Access Control:

• Admin dashboard
• User roles (customer, vendor, admin)
• Permission-based features
• Protected API routes
• Custom claims verification

11. Error Handling & Logging

Error Management:

• Try-catch patterns
• Error boundaries in React
• Graceful error recovery
• User-friendly error messages
• Server-side error handling
• API error responses
• Validation error display

Logging & Monitoring:

• Console logging strategies
• Structured logging
• Error tracking services
• Performance monitoring
• Analytics integration
• User action logging

12. TypeScript Patterns

Type Safety:

• Strict mode configuration
• Type inference
• Generic types
• Discriminated unions
• Utility types
• Type guards
• Ambient types
• Module augmentation

API Type Safety:

• Request/response types
• Form data types
• Database schema types
• Authentication types

Project Type Coverage

E-Commerce Platform

Complete features:

• Product catalog (Firestore)
• Shopping cart (Zustand state + Firebase sync)
• User authentication (Firebase Auth + OAuth)
• Order management
• Payment processing (Stripe)
• Admin dashboard
• Inventory management
• Reviews and ratings
• Search and filtering
• Real-time notifications

SaaS Application

Complete features:

• User registration and authentication
• Subscription management
• Multi-tier pricing
• Invoice generation
• Team/organization management
• Role-based access
• Analytics dashboard
• API integration
• Webhook handling
• Email notifications

Content Platform

Complete features:

• User authentication
• Content creation and publishing
• Version control
• Comments and discussions
• Media management (Cloud Storage)
• Search functionality
• Analytics tracking
• User profiles
• Notifications

Tech Stack Overview

Frontend:
├── Next.js 13+ (App Router)
├── React 18+
├── TypeScript (strict mode)
├── Tailwind CSS
├── shadcn/ui
├── react-hook-form + Zod
├── Zustand (state management)
├── Lucide React (icons)
└── Axios/Fetch (HTTP client)

Backend:
├── Next.js API Routes
├── TypeScript
└── Server Actions

Database & Auth:
├── Firebase
│   ├── Firestore (database)
│   ├── Auth (authentication)
│   ├── Storage (file storage)
│   └── Cloud Functions
└── Security Rules

Payment:
├── Stripe (primary)
├── JazzCash (Pakistan)
└── EasyPaisa (Pakistan)

DevOps & Deployment:
├── Vercel (Next.js)
├── Firebase Hosting
├── Environment variables
├── CI/CD pipelines
└── Monitoring & analytics

Use Cases Implemented

✅ E-commerce platforms with shopping carts and payments ✅ SaaS applications with subscriptions and billing ✅ Content platforms with publishing workflows ✅ Real-time collaboration applications ✅ Admin dashboards with data visualization ✅ Mobile-responsive web applications ✅ Progressive web apps (PWA) ✅ SEO-optimized applications

Key Patterns & Best Practices

Architecture:

• Component composition
• Container/Presentational pattern
• Custom hooks
• Higher-order components
• Render props
• Compound components

Performance:

• Code splitting
• Lazy loading
• Image optimization
• Font optimization
• Memoization
• Debouncing/Throttling
• Virtual scrolling
• Compression

Security:

• Input validation
• XSS prevention
• CSRF protection
• SQL injection prevention (with Firestore)
• Rate limiting
• Environment variable protection
• HTTPS enforcement
• Security headers

Maintainability:

• Clear file structure
• Component organization
• Type safety with TypeScript
• Error handling
• Logging and debugging
• Documentation
• Testing patterns

Deployment & DevOps

Vercel Deployment:

• Environment setup
• Preview deployments
• Production deployment
• Monitoring
• Analytics
• Edge functions

Firebase Deployment:

• Firestore configuration
• Security rules deployment
• Cloud Functions deployment
• Storage configuration
• Authentication setup

CI/CD Pipelines:

• GitHub Actions workflows
• Automated testing
• Deployment automation
• Environment management

When to Use This Skill

✅ Building complete e-commerce platforms from scratch ✅ Developing SaaS applications with authentication and payments ✅ Creating content platforms with user management ✅ Implementing real-time features (chat, notifications) ✅ Setting up admin dashboards and analytics ✅ Building responsive, accessible web applications ✅ Integrating payment processing systems ✅ Designing database architecture for Firebase ✅ Setting up authentication flows ✅ Optimizing performance and user experience

❌ Mobile-first only (use React Native instead) ❌ Backend-only projects without frontend ❌ Non-TypeScript projects (focus on TS) ❌ Non-React frameworks (focus on React/Next.js)

Resources

references/

• nextjs-complete.md - Next.js 13+ architecture, App Router, API Routes, Server Components
• react-patterns.md - React hooks, components, performance optimization, custom hooks
• firebase-integration.md - Firestore setup, Auth flows, Cloud Storage, Real-time listeners
• tailwind-shadcn.md - Tailwind CSS, shadcn/ui components, theming, dark mode
• forms-validation.md - react-hook-form, Zod schemas, multi-step forms, file uploads
• payment-systems.md - Stripe, JazzCash, EasyPaisa integration with examples
• state-management.md - Zustand setup, Redux Toolkit, store patterns
• api-routes.md - API Route handlers, middleware, authentication, error handling
• authentication-flows.md - Email/password, OAuth, MFA, custom claims, RBAC
• database-design.md - Firestore schemas, collections, queries, optimization
• error-handling.md - Error boundaries, try-catch patterns, user messaging
• deployment.md - Vercel, Firebase hosting, environment setup, CI/CD

assets/

• project-templates/ - Complete project starter templates
• component-library/ - Pre-built components
• api-templates/ - API route templates
• page-templates/ - Page component templates
• form-templates/ - Form component templates
• security-rules-templates/ - Firestore security rules
• environment-templates/ - .env.example files
• docker-templates/ - Docker configurations

All resources loaded as needed during development.