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 & analyticsUse 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.