🖥️ Full Stack Developer SOP

Custom Websites, Web Apps & API Development

⚛️ React/Next.js 🟢 Node.js 🗄️ Databases 🔐 Authentication
❓

What This SOP Covers

🖥️ Custom Full Stack Projects

This SOP is for projects that go beyond Shopify — custom-built websites and web applications:

  • Custom business websites — Marketing sites, portfolios, landing pages
  • Web applications — Dashboards, admin panels, SaaS products
  • E-commerce (custom) — WooCommerce, custom carts, headless commerce
  • API integrations — Third-party services, payment gateways, CRMs
  • Database-driven apps — User systems, content management, data apps

⚠️ This is Different from Shopify Projects

Custom projects are more complex. No pre-built themes. Everything is coded from scratch. That means:

  • Longer timelines (4-8 weeks typical)
  • Higher prices ($3,000 - $15,000+)
  • More detailed planning required upfront
  • More can go wrong if not managed properly
📖

The $5 Lakh Project That Almost Failed

Why Planning Saves Projects

We took on a custom dashboard project. Client wanted a "simple admin panel" for their delivery business. $5 lakhs budget. Seemed straightforward.

Week 1-2: Started coding immediately. No detailed spec. "We'll figure it out as we go."

Week 3: Client says "Oh, we also need real-time GPS tracking." That changes everything.

Week 4: "Can drivers upload photos? And customers should get SMS updates." More scope creep.

Week 6: Project is 50% over budget. Team is frustrated. Client is unhappy. We're behind schedule.

What saved us: We stopped. Did a proper discovery session. Created a detailed technical specification. Got sign-off on exact features. Renegotiated timeline and budget.

🎯 The Lesson: Custom projects REQUIRE detailed planning upfront. Every hour spent in discovery saves 10 hours in development. Never skip the planning phase.

🚨 FULL STACK PROJECT PRINCIPLES

1. SPEC BEFORE CODE

Never write a single line of code without a signed-off technical specification. Discovery is not optional — it's mandatory.

2. SCOPE IS LOCKED AFTER APPROVAL

Once client signs off on spec, scope is frozen. New features = new quote. No exceptions. Scope creep kills projects.

3. MILESTONE-BASED DELIVERY

Large projects are delivered in phases. Each phase = client approval before proceeding. No surprises at the end.

4. CODE QUALITY IS NON-NEGOTIABLE

Clean code, proper comments, consistent formatting. If another developer can't understand your code, you've failed.

5. TEST BEFORE DEPLOY

Every feature is tested. Edge cases are considered. Security is checked. No "it works on my machine" excuses.

✅ SELF QA PROTOCOL — MANDATORY BEFORE DELIVERY

Review your work 3-5 times before ANY submission. No exceptions.

📋 Pre-Submission Checklist

☐ All features work as specified in TSD
☐ Mobile responsive on all breakpoints
☐ API endpoints return correct data/errors
☐ Authentication & authorization working
☐ Form validation on frontend AND backend
☐ Error handling shows user-friendly messages
☐ Database queries optimized (no N+1 problems)
☐ Environment variables documented
☐ Console has NO errors or warnings
☐ Tested in incognito mode

⚠️ CRITICAL WARNING

NEVER ask client to "check if it works."

If client finds bugs before you do, it's a failure. YOU are responsible for quality.

🎯

Quality Standards & Zero Tolerance

🚨 Zero Tolerance Policy

After 15 days of onboarding: ONE careless mistake on a live project = potential removal from client work.

  • Check your work 10x before client delivery
  • There are NO "small bugs" on production
  • Preventable mistakes are unacceptable

✅ Creative Ownership Principle

You are 100% responsible for the quality of your work.

  • Code architecture, security, and performance = YOUR responsibility
  • UI/UX polish = YOUR responsibility
  • Documentation = YOUR responsibility
  • Goal: Overdeliver — exceed expectations, not just meet them

👥 Peer Review Process

Before major deployments, get another developer to review your code:

  • Fresh eyes catch what you missed
  • Share knowledge across team
  • Two brains are better than one
1

Discovery Phase

💰 Discovery is a Paid Service

For complex projects, discovery is a separate paid engagement ($15,000 - $50,000). This ensures serious clients and protects your time. Deliverable: Technical Specification Document.

Discovery Meeting Agenda (60-90 minutes)

Topic Time What to Capture
Business Context 15 min What problem are we solving? Who are the users? What's the business goal?
Feature Walkthrough 30 min Every feature explained. Write it ALL down. Ask "what happens when..."
User Roles 10 min Who uses the system? Admin, user, guest? What can each role do?
Integrations 10 min Payment gateway? Email service? Third-party APIs? CRM?
Design Expectations 10 min Reference websites, color preferences, brand guidelines
Timeline & Budget 15 min Launch date? Budget range? Must-haves vs nice-to-haves?

Questions to Ask (Never Skip These)

  • "What does success look like?" — Understand the real goal
  • "Who will use this and how?" — Understand user flows
  • "What happens when [edge case]?" — Find hidden complexity
  • "What existing systems does this need to work with?" — Find integration needs
  • "What's the budget range?" — Ensure alignment before work
  • "When do you need this live?" — Set realistic expectations
  • "Who approves deliverables?" — Identify decision-maker
2

Technical Planning & Specification

Technical Specification Document (TSD)

📄 Every Custom Project Gets a TSD

The TSD is your contract. It defines exactly what will be built. Client signs off before development starts.

TSD Structure

Section Contents
1. Project Overview Business context, goals, success metrics
2. User Roles & Permissions Who can do what in the system
3. Feature List Every feature with detailed acceptance criteria
4. User Flows Step-by-step flow diagrams for key processes
5. Database Schema Tables, relationships, data types
6. API Endpoints All backend routes with request/response formats
7. Third-Party Integrations External services, APIs, credentials needed
8. Technology Stack Frontend, backend, database, hosting decisions
9. Timeline & Milestones Phase breakdown with delivery dates
10. Out of Scope What is NOT included (very important)

Technology Stack Selection

⚛️ Frontend

  • Next.js — Full-stack, SEO-friendly
  • React — Complex SPAs
  • Tailwind CSS — Rapid styling
  • TypeScript — Type safety

🟢 Backend

  • Next.js API Routes — Simple APIs
  • Node.js + Express — Complex backends
  • Prisma — Database ORM
  • NextAuth — Authentication

🗄️ Database

  • PostgreSQL — Relational data
  • MongoDB — Flexible schemas
  • Supabase — Backend-as-a-service
  • Firebase — Real-time apps

☁️ Hosting

  • Vercel — Next.js apps
  • Railway — Backend + DB
  • AWS — Enterprise scale
  • DigitalOcean — VPS hosting
3

Project Setup

Project Initialization Checklist

Task Details Done
Create GitHub Repository Private repo, proper naming (client-project-name) ☐
Initialize Project npx create-next-app@latest or appropriate starter ☐
Set Up Environment Variables .env.local, .env.example (without secrets) ☐
Configure ESLint & Prettier Consistent code formatting across team ☐
Set Up Database Create DB, configure connection, test ☐
Configure Hosting Connect to Vercel/Railway, set up preview deployments ☐
Set Up Branch Strategy main (production), develop (staging), feature branches ☐

Folder Structure (Next.js)

// Recommended folder structure /src /app // App router pages /api // API routes /(auth) // Auth pages (login, register) /(dashboard) // Protected pages layout.tsx page.tsx /components // Reusable UI components /ui // Base components (Button, Input) /forms // Form components /layout // Layout components (Header, Footer) /lib // Utilities, helpers db.ts // Database connection auth.ts // Auth configuration utils.ts // Helper functions /types // TypeScript types /hooks // Custom React hooks /services // API calls, external services /prisma schema.prisma // Database schema /public // Static assets
4

Development Phases

📅 Typical Timeline: 4-8 Weeks

Custom projects follow a phased approach. Each phase has clear deliverables and client approval before proceeding.

📋 Phase 1: Foundation Week 1-2

  • Project setup (repo, hosting, CI/CD)
  • Database schema implementation
  • Authentication system
  • Base layout and navigation
  • Core UI components

Deliverable: Working login/register, basic dashboard shell

⚙️ Phase 2: Core Features Week 2-4

  • Primary CRUD operations
  • Main user flows implemented
  • API endpoints for core features
  • Form validations
  • Error handling

Deliverable: All primary features functional

🔗 Phase 3: Integrations Week 4-5

  • Payment gateway integration
  • Email service setup
  • Third-party API connections
  • Notifications system

Deliverable: All integrations working in test mode

🎨 Phase 4: Polish & Testing Week 5-6

  • UI/UX refinement
  • Mobile responsiveness
  • Performance optimization
  • Bug fixes from testing
  • Security review

Deliverable: Production-ready application

🚀 Phase 5: Launch Week 6-7

  • Production deployment
  • DNS configuration
  • SSL setup
  • Final testing on live
  • Client training

Deliverable: Live website + documentation

5

Database Design

Database Design Principles

  • Normalize data — Avoid duplication, use relationships
  • Plan for scale — Index frequently queried columns
  • Use soft deletes — deletedAt timestamp, never hard delete
  • Timestamps on everything — createdAt, updatedAt on all tables
  • UUID over auto-increment — Better for distributed systems

Example Schema (Prisma)

// User model with common fields model User { id String @id @default(uuid()) email String @unique name String password String role Role @default(USER) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt deletedAt DateTime? // Relations orders Order[] profile Profile? } enum Role { USER ADMIN SUPER_ADMIN }
6

API Development

API Standards

Standard Implementation
RESTful naming /api/users (not /api/getUsers)
HTTP methods GET (read), POST (create), PUT (update), DELETE (remove)
Status codes 200 (success), 201 (created), 400 (bad request), 401 (unauthorized), 404 (not found), 500 (server error)
Response format { success: true, data: {...} } or { success: false, error: "message" }
Authentication JWT in Authorization header or secure HTTP-only cookies
Validation Validate ALL inputs. Use Zod or Yup schemas

Error Handling Template

// Consistent error handling try { // Your logic here const data = await doSomething(); return Response.json({ success: true, data }); } catch (error) { console.error('[API Error]', error); return Response.json( { success: false, error: 'Something went wrong' }, { status: 500 } ); }
7

Testing & QA

Testing Checklist

Category Items to Test
Functionality All features work as specified. Edge cases handled.
Authentication Login, logout, password reset, session handling, protected routes
Authorization Role-based access works. Users can't access admin features.
Forms Validation works, errors shown, success messages, loading states
Responsive Works on mobile, tablet, desktop. No horizontal scroll.
Performance Page load < 3s. No unnecessary re-renders. Images optimized.
Security SQL injection prevented, XSS prevented, CSRF tokens, HTTPS

🚨 Security Must-Checks

  • Never expose API keys in frontend code
  • Never trust client-side data — always validate server-side
  • Never store passwords in plain text
  • Never log sensitive data (passwords, tokens, PII)
  • Never disable CORS for production
8

Deployment

Pre-Deployment Checklist

Task Status
All environment variables set in production ☐
Database migrated to production ☐
SSL certificate configured ☐
Domain DNS configured correctly ☐
Payment gateway in live mode (not test) ☐
Email service configured with production domain ☐
Error monitoring set up (Sentry or similar) ☐
Analytics configured ☐
Backup strategy in place ☐
9

Client Handover

Handover Package Contents

  • Admin credentials — Login details for admin panel
  • Documentation — How to use the system (Notion/PDF)
  • Training video — Loom walkthrough of key features
  • Technical documentation — For future developers
  • Environment variables list — What's configured where
  • Hosting access — Vercel/Railway/hosting login
  • Domain registrar access — DNS management
  • GitHub repository — Transfer ownership or add as collaborator
  • Support period details — What's included, how to contact
📝 Handover Email Template

Hi [Client Name]!

🎉 Your application is now LIVE!

Live URL: [https://yoursite.com]

Admin Access:
URL: [admin URL]
Email: [admin email]
Password: [temporary password - change immediately]

Resources:
📹 Training Video: [Loom link]
📄 Documentation: [Notion/Doc link]

Support:
You have [30/60/90] days of support starting today. For any issues, reply to this email or message me directly.

Congratulations on your launch! 🚀

📊

Full Stack Project KPIs

On-Time Delivery
95%+
Bug-Free Launch
<5 bugs
Client Satisfaction
4.8★+
Code Review Pass
100%
🤖

ChatGPT Prompts for Full Stack Development

💡 Use AI to Accelerate Development

Use these prompts to debug code, plan architecture, write documentation, and solve complex problems.

Architecture & Planning

🤖 Prompt: Plan Database Schema

I'm building a [type of app] with these features:

- [Feature 1]
- [Feature 2]
- [Feature 3]

Tech stack: [e.g., PostgreSQL, MongoDB]

Design the database schema with:
1. Tables/collections needed
2. Fields and data types
3. Relationships (one-to-many, etc.)
4. Indexes for performance
5. Example SQL/query to create the schema

🤖 Prompt: API Endpoint Design

I'm building an API for: [Describe the app]

Key resources: [Users, Products, Orders, etc.]
Auth method: [JWT, Sessions, etc.]

Design the REST API with:
1. Endpoint structure (routes)
2. HTTP methods for each
3. Request/response JSON examples
4. Authentication requirements
5. Error response format
6. Rate limiting suggestions

Debugging & Problem Solving

🤖 Prompt: Debug API/Backend Error

I'm getting this error in my [Node/Python/etc.] backend:

Error: [Paste exact error message]
Happening when: [What triggers it]
My code: [Paste relevant code]
Environment: [Dev/Production, OS, versions]

Help me:
1. Understand what's causing this
2. Fix the code with explanation
3. Prevent this from happening again
4. Best practices I violated

🤖 Prompt: Performance Optimization

My app is slow. Here's the situation:

Slow operation: [What's taking long]
Current time: [How long it takes now]
Target time: [What it should be]
Tech: [Database, framework, hosting]
Current code/query: [Paste it]

Analyze and optimize:
1. What's causing the slowness?
2. Database query improvements
3. Caching strategies
4. Code refactoring suggestions
5. Infrastructure recommendations

Documentation & Handover

🤖 Prompt: Generate API Documentation

I need documentation for my API endpoints:

[Paste your routes or describe endpoints]

Create documentation that includes:
1. Endpoint URL and method
2. Description of what it does
3. Authentication required
4. Request parameters (query, body)
5. Success response example
6. Error response examples
7. Rate limits if any

✅ Pro Tips for Full Stack ChatGPT Use

  • Specify versions — Mention Node 18, React 18, etc. for accurate code
  • Test everything — AI code can have bugs, always test
  • Security review — Ask AI to check for vulnerabilities
  • Learn, don't just copy — Ask why the solution works
  • Break down problems — Complex issues work better in pieces
⚠️

Handling Difficult Situations

🔴 Production Server Down

🎯 Task Priority Order (What Comes First)

Handle in this order every day:

  1. 🔴 P0 - Production Outages → Site/app down = DROP EVERYTHING. Fix immediately.
  2. 🔴 P0 - Security Vulnerabilities → Any breach or vulnerability. Patch first.
  3. 🔴 P0 - Data Issues → Database problems, data loss, corruption. Critical.
  4. 🟡 P1 - Deadline-Day Deliveries → Features/fixes due TODAY must ship.
  5. 🟡 P1 - PM/Client Questions → Respond within 1 hour. Don't block decisions.
  6. 🟢 P2 - Active Development Work → Features with upcoming deadlines.
  7. 🟢 P2 - Code Reviews & Testing → Don't block teammates, test before merge.
  8. ⚪ P3 - Technical Debt & Optimization → Refactoring, performance improvements, learning.

Golden Rule: Production issues > Security > Data > Deadlines > Communication > Development.

🔴 Production Server Down

Situation: Client's application is completely inaccessible.

Response: 1) Check server status and logs immediately. 2) Communicate: "We're aware and investigating." 3) Roll back last deploy if it caused the issue. 4) Document root cause after resolution.

Rule: Availability first. Communicate early. Post-mortem after fire is out.

🔴 Database Corruption or Data Loss

Situation: Data is missing or corrupted.

Response: Stop all writes immediately. Check backups. Restore from last known good backup. Document what was lost. Implement better backup strategy after.

Rule: Backups save lives. Test restores regularly. Document everything.

🔴 Security Vulnerability Discovered

Situation: Found or reported security flaw in the application.

Response: Assess severity. If critical: Patch immediately or take affected feature offline. Inform client. Document the vulnerability and fix. Review for similar issues elsewhere.

Rule: Security issues are P0. Drop everything else. Fix first, explain later.

🔴 Third-Party API is Down

Situation: External service your app depends on is not responding.

Response: Check status page. Implement graceful degradation (fallback UX). Notify client: "We're experiencing issues with [service]. Working on a workaround."

Rule: Always plan for third-party failures. Never let one API kill the whole app.

🔴 Client Wants Feature in Unrealistic Timeline

Situation: Client expects complex feature in days, not weeks.

Response: "I understand the urgency. To deliver properly, this takes [X days]. I can deliver [smaller scope] by your deadline, then add the rest. Which approach works better?"

Rule: Don't promise impossible. Offer phased delivery options.

🔴 Inherited Codebase is a Disaster

Situation: Taking over project with poor code quality, no documentation.

Response: Document issues found. Estimate "technical debt" cleanup time. Advise PM: "Before adding features, we should refactor [X] to prevent future bugs." Get approval before major refactors.

Rule: Don't blame previous devs. Document risks. Recommend solutions.

🔴 Your Deployment Broke Something

Situation: New feature or fix caused unexpected issues.

Response: Roll back immediately if possible. Own it: "My recent deployment caused [issue]. Rolling back now." Then investigate and fix properly in staging before redeploying.

Rule: Fast rollback beats slow debugging. Always have rollback plan.

🔴 Client Access Credentials Compromised

Situation: Credentials were exposed or suspected breach.

Response: Rotate ALL credentials immediately. Check for unauthorized access in logs. Notify client and PM. Review access controls. Implement better credential management.

Rule: Assume worst case. Rotate first, investigate second. Never share creds in plain text.

🌟

Your Daily Inspiration

⚡
"Full stack means full responsibility — and full impact. You build entire worlds."

— Digital Heroes Philosophy

📖 Success Story: The App That Saved 40 Hours Weekly

A client was manually copying orders from Shopify to their ERP — 10 hours every week. Tedious, error-prone, soul-crushing.

Our full stack dev built a custom integration in 2 weeks. Orders now sync automatically every 15 minutes. Zero manual work.

The impact? Client saved 40 hours monthly — that's an entire work week. They used that time to launch a new product line.

The lesson: You don't just write code — you give people back their time. That's priceless.

⚡ Productivity Hacks for Full Stack Devs

  • 🏗️ Scaffold Before Coding: Plan the architecture, then build — saves 50% rework
  • 🔄 Git Commit Often: Small, frequent commits = easy debugging and rollbacks
  • 📦 Reusable Components: Build it once, use it everywhere — compound efficiency
  • 🧪 Write Tests Early: Tests aren't overhead — they're insurance
  • 🎧 Deep Work Blocks: 3-hour coding blocks with no meetings = 10x output
🧠

"Solve the problem first, code it second."

📚

"Today's learning is tomorrow's leverage."

🚀

"Ship it, learn from it, improve it."

🌅 Start Each Day With This:

"Today, I build systems that empower businesses. My code creates possibilities that didn't exist yesterday."