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.