The creator economy just got a clever new tool: Gemini’s Nano Banana.
It’s Gemini’s lightweight AI image engine that turns short prompts into looping, stylized GIFs and cinematic snippets.

Think meme generator meets film-school aesthetic.
No $100k editor. No team of producers. Just a laptop, WiFi, and your taste.

In this guide, I’ll walk you through how to use Nano Banana, and show off some cool use cases to spark ideas.

🚀 Step 1: Access Nano Banana

• Head to the Nano Banana dashboard (currently in beta, invite-only for some users).

• Sign in with your Google account.

• You’ll land on a minimal interface: a text box for your prompt, a preset library, and export options.

👉 No confusing menus — the tool is designed to be fast and playful.

🎨 Step 2: Pick a Preset

Nano Banana comes loaded with cinematic presets that give your GIFs instant personality.

Some examples you’ll find:

• 🎞 Noir — moody, black-and-white film look.

• 🌈 Vaporwave — retro arcade vibes.

• 🌌 Neon Anime — colorful, high-energy loops.

• ⚡ Glitch — edgy, broken-screen effects.

Presets do the heavy lifting for tone. You just bring the story.

✍️ Step 3: Write a Punchy Prompt

Unlike long AI text generators, Nano Banana thrives on short, meme-ready prompts.

Examples:

• “When your SaaS gets its first paying user 🍾”

• “AI coding at 3am feels like hacking the Matrix”

• “Me, deploying to prod without testing 🔥🐒”

👉 Keep it under 10 words when possible. The shorter the setup, the harder the punchline lands.

🛠 Step 4: Generate + Export

• Click Generate → Nano Banana creates multiple GIF variants.

• Review your options → pick your favorite vibe.

• Hit Export → choose from 3s, 6s, or 9s loops, already optimized for X/Twitter, Reddit, or TikTok.

💡 Pro tip: batch 5–10 prompts at once. Post only the 1–2 that instantly feel “scroll-stopping.”

🌟 Cool Example Use Cases

1. Indie Hacker Growth Hacks

Show progress in a way that’s fun and shareable.

• “Day 20 of #buildinpublic — first Stripe payment processed 💳🎉” with a confetti preset.

• “Bug in prod again? Same.” with a looping glitch animation.

2. AI Memes for Tech Twitter

Remix trending conversations into cinematic GIFs.

• “Over-engineering vs. ugly MVPs” → vaporwave split-screen.

• “Claude vs. Gemini vs. GPT” → arcade-style boxing match.

3. Community Packs

Create branded reaction GIFs for your Discord or Slack.

• “GM 🌞”

• “Deploying…”

• “Brainstorm mode: ON”

These GIF packs double as inside jokes and marketing assets.

📈 Why Nano Banana Matters

The new creator economy isn’t about budgets. It’s about taste, cadence, and culture.

Nano Banana gives solo founders, indie hackers, and creators the ability to:

• Reframe memes as stylized cinema.

• Turn raw ideas into polished, shareable content in minutes.

• Compete with big-budget teams by leaning on creativity, not cash.

Virality on demand. Culture at scale. All from your laptop.

✅ Final Takeaway

Nano Banana isn’t just another AI tool — it’s a cultural amplifier.

Start small:

• Write one line.

• Pick one preset.

• Export one GIF.

That’s all it takes to ship your first piece of Nano Banana content.

Imagine the possibilities!

Want your main agent to keep coding while a sub-agent plans the next feature—and a master agent keeps everyone in sync? This post gives you a clean, from-scratch setup you can copy, run, and share.

You’ll end up with three Claude Code sessions running in parallel on the same project:

• main-dev → implements code (locked to /src and /tests)

• feature-planner → writes PRDs (locked to /docs/feature-plans/)

• master-agent → orchestrates (reads/writes /ops, summarizes status)

The system uses guardrail hooks to enforce boundaries and a tiny renderer to stamp agent templates from your inputs.

TL;DR

1. Create a folder and drop in the bootstrap script below.

2. Run it to scaffold folders, hooks, templates.

3. Render agents from inputs.

4. Open three Claude Code sessions (main-dev, feature-planner, master-agent).

5. Paste the prompts. Build in parallel. 🎯

Prerequisites

• macOS or Linux shell

• jq and python3 installed

  • macOS (Homebrew): brew install jq python

  • Ubuntu/Debian: sudo apt-get install -y jq python3

Step 1 — Create the project & add bootstrap.sh

In an empty directory:

mkdir my-agents-project
cd my-agents-project

Create bootstrap.sh and paste all of this:

#!/usr/bin/env bash
set -euo pipefail

# --- helpers ---
write() { mkdir -p "$(dirname "$1")"; cat > "$1"; }

# --- tree ---
mkdir -p .claude/{agents-templates,hooks} docs/feature-plans docs/release-notes ops/inputs scripts src tests

# --- policy (guardrails) ---
write ops/policy.json <<'JSON'
{
  "writeAllow": {
    "master-agent": ["ops/*"],
    "feature-planner": ["docs/feature-plans/*"],
    "main-dev": ["src/*","tests/*"]
  },
  "inboxNotifyAgents": ["feature-planner"],
  "inboxPath": "docs/feature-plans/INBOX.md",
  "eventsLogPath": "ops/events.log"
}
JSON

# --- hooks (require jq) ---
write .claude/hooks/pretooluse.sh <<'BASH'
#!/usr/bin/env bash
set -euo pipefail
TOOL="${CLAUDE_TOOL_NAME:-}"; AGENT="${CLAUDE_AGENT_NAME:-}"
ARGS="${CLAUDE_TOOL_ARGS_JSON:-}"; POLICY="ops/policy.json"
PATH_TARGET="$(printf '%s' "$ARGS" | jq -r '.path // empty' 2>/dev/null || true)"

if [[ "$TOOL" =~ ^(Write|Edit|MultiEdit)$ ]]; then
  MAP=$(jq -r --arg a "$AGENT" '.writeAllow[$a][]?' "$POLICY" 2>/dev/null || true)
  if [ -z "$MAP" ]; then echo "No write policy for $AGENT"; exit 1; fi
  ALLOWED=false
  while IFS= read -r pat; do
    case "$PATH_TARGET" in $pat) ALLOWED=true; break;; esac
  done <<< "$MAP"
  if [ "$ALLOWED" != true ]; then
    echo "Write blocked by policy. Agent=$AGENT Path=$PATH_TARGET"
    exit 1
  fi
fi
BASH

write .claude/hooks/posttooluse.sh <<'BASH'
#!/usr/bin/env bash
set -euo pipefail
TOOL="${CLAUDE_TOOL_NAME:-}"; AGENT="${CLAUDE_AGENT_NAME:-}"
ARGS="${CLAUDE_TOOL_ARGS_JSON:-}"; POLICY="ops/policy.json"
EVENTS="$(jq -r '.eventsLogPath' "$POLICY")"
INBOX="$(jq -r '.inboxPath' "$POLICY")"
NEEDS_INBOX=$(jq -r --arg a "$AGENT" '.inboxNotifyAgents | index($a) | if .==null then "no" else "yes" end' "$POLICY")

if [ "$TOOL" = "Write" ]; then
  FILE="$(printf '%s' "$ARGS" | jq -r '.path // empty' 2>/dev/null || true)"
  if [ -n "$FILE" ]; then
    TS="$(date -u +'%Y-%m-%d %H:%M:%SZ')"
    echo "[$TS] $AGENT wrote: $FILE" >> "$EVENTS"
    if [ "$NEEDS_INBOX" = "yes" ]; then
      echo "- [$TS] $AGENT updated: $FILE" >> "$INBOX"
    fi
  fi
fi
BASH

chmod +x .claude/hooks/*.sh

# --- agent templates ---
write .claude/agents-templates/master-agent.tmpl.md <<'MD'
---
name: master-agent
description: Orchestrates sub-agents. Writes only to /ops per policy.
tools: Read, Write, Grep, Glob
---
Read /ops/agent-state.json, last 50 lines of /ops/events.log, and last 20 lines of docs/feature-plans/INBOX.md.
Update statuses when there is evidence (new PRD, new branch, QA report). Merge /ops/agent-state.json and append a Standup line to /ops/events.log.
Return a 7-bullet executive summary with links.
MD

write .claude/agents-templates/feature-planner.tmpl.md <<'MD'
---
name: feature-planner
description: Plans features. Writes PRDs only to /docs/feature-plans/.
tools: Read, Write, Grep, Glob
---
Plan "{{FEATURE_NAME}}" for "{{PROJECT_NAME}}".
1) Ask 7 brief scoping questions.
2) Copy /docs/feature-plans/PRD_TEMPLATE.md to /docs/feature-plans/PLN_{{FEATURE_SLUG}}_{{DATE}}.md and fill sections.
3) Append a timestamped entry to Changelog on each update.
4) Return the PRD path + 5 bullets (highlights/blockers/next).
Write only under /docs/feature-plans/.
MD

write .claude/agents-templates/main-dev.tmpl.md <<'MD'
---
name: main-dev
description: Implements current sprint items in /src and /tests only. Reads INBOX + PRDs for acceptance criteria.
tools: Read, Write, Grep, Glob
---
Before coding: read docs/feature-plans/INBOX.md (last 15 lines) and latest PRD for "{{FEATURE_NAME}}".
Summarize AC that impact code. Implement increment in /src (create/update tests). Output a 5-item commit checklist.
MD

# --- renderer ---
write scripts/render_templates.py <<'PY'
#!/usr/bin/env python3
import os, re, sys, json, glob
ROOT=os.path.abspath(os.path.join(os.path.dirname(__file__),".."))
def render(t,c): return re.sub(r"\{\{([A-Z0-9_]+)\}\}", lambda m:str(c.get(m.group(1),m.group(0))), t)

if len(sys.argv)<2:
    print("usage: render_templates.py ops/inputs/current.json")
    sys.exit(1)

with open(sys.argv[1]) as f:
    ctx=json.load(f)

os.makedirs(os.path.join(ROOT,".claude","agents"),exist_ok=True)

for p in glob.glob(os.path.join(ROOT,".claude","agents-templates","*.tmpl.md")):
    out=render(open(p).read(),ctx)
    o=os.path.join(ROOT,".claude","agents",os.path.basename(p).replace(".tmpl",""))
    open(o,"w").write(out)
    print("Rendered agent:",os.path.basename(o))

# render PRD template placeholders
prd=os.path.join(ROOT,"docs","feature-plans","PRD_TEMPLATE.md")
if os.path.exists(prd):
    open(prd,"w").write(render(open(prd).read(),ctx))
    print("Rendered: docs/feature-plans/PRD_TEMPLATE.md")

print("Done.")
PY

chmod +x scripts/render_templates.py

# --- seeds/inputs/state ---
write ops/inputs/current.json <<'JSON'
{
  "PROJECT_NAME":"SaaS Boilerplate",
  "FEATURE_NAME":"SaaS Boilerplate MVP",
  "FEATURE_SLUG":"saas-boilerplate-mvp",
  "DATE":"20250823",
  "DATE_ISO":"2025-08-23T00:00:00Z"
}
JSON

write ops/agent-state.json <<'JSON'
{ "tasks": [], "updatedAt": "1970-01-01T00:00:00Z" }
JSON

write ops/events.log <<'LOG'
[bootstrap] initialized
LOG

# --- docs ---
write docs/feature-plans/INBOX.md <<'MD'
# Feature Plans Inbox
Latest planning updates appear here.
MD

write docs/feature-plans/PRD_TEMPLATE.md <<'MD'
# PRD: {{FEATURE_NAME}} ({{PROJECT_NAME}})
## Context
## Goals
## Non-Goals
## Requirements
## Open Questions (Q&A)
## User Stories
## Acceptance Criteria
## Risks
## Metrics
## Rollout Plan
## Next Steps
## Changelog
- {{DATE_ISO}} – Initial draft created.
MD

echo "✅ Bootstrap complete."
echo "Next:"
echo "  1) Ensure jq + python3 are installed (macOS: brew install jq python)"
echo "  2) chmod +x .claude/hooks/*.sh"
echo "  3) ./scripts/render_templates.py ops/inputs/current.json"
echo "  4) Open Claude Code sessions: master-agent, feature-planner, main-dev"

Make it executable and run it:

chmod +x bootstrap.sh
./bootstrap.sh

You should see the ✅ “Bootstrap complete” lines.

Step 2 — Render the agents from inputs

This stamps the templates with your inputs:

# If needed, install prerequisites
# macOS: brew install jq python
# Linux: sudo apt-get install -y jq python3

chmod +x .claude/hooks/*.sh
./scripts/render_templates.py ops/inputs/current.json

This generates:

.claude/agents/master-agent.md
.claude/agents/feature-planner.md
.claude/agents/main-dev.md
docs/feature-plans/PRD_TEMPLATE.md (placeholders filled)

Step 3 — Open 3 parallel sessions in Claude Code

Open the same project in Claude Code, but create three chats (or windows) and select a different agent in each via /agents.

Session A — main-dev (coding)

Prompt:

Before coding, read /docs/feature-plans/INBOX.md (last 15 lines) and the latest PRD for “SaaS Boilerplate MVP”.
Summarize acceptance criteria that impact code and output a 5-item commit checklist.
Wait for my confirmation before touching /src.

Session B — feature-planner (planning)

Prompt:

Plan “SaaS Boilerplate MVP”.

1) Ask me 7 brief scoping questions.
2) Copy /docs/feature-plans/PRD_TEMPLATE.md to:
/docs/feature-plans/PLN_saas-boilerplate-mvp_{{today}}.md
3) Fill all sections (Context, Goals/Non-Goals, Requirements, Open Questions (Q&A),
   User Stories, Acceptance Criteria, Risks, Metrics, Rollout Plan, Next Steps, Changelog).
4) Append a timestamped entry to Changelog.
5) Return the PRD path and 5 bullets (highlights, blockers, next steps).
6) Write only under /docs/feature-plans/.

When the planner writes, the post-hook will append a line to docs/feature-plans/INBOX.md automatically.

Session M — master-agent (orchestrator)

Prompt:

Read:
- /ops/agent-state.json
- last 50 lines of /ops/events.log
- last 20 lines of /docs/feature-plans/INBOX.md

Then:
1) Update task statuses if there’s new evidence (new PRD, new branch, QA report).
2) Detect stale tasks (>24h); append "Nudge" to /ops/events.log for any.
3) Merge /ops/agent-state.json.
4) Append a “Standup” summary line to /ops/events.log.

Return a 7-bullet executive summary with links (PRD path, branch, QA report).

Step 4 — Sanity Checks

• Planner writes docs/feature-plans/PLN_saas-boilerplate-mvp_<DATE>.md.

• INBOX gets a new line, e.g.
  - [2025-08-23T..Z] feature-planner updated: docs/feature-plans/PLN_saas-boilerplate-mvp_20250823.md

• Master reads INBOX + /ops/events.log, updates /ops/agent-state.json, appends a Standup.

• Main-dev summarizes acceptance criteria and gives a 5-item commit checklist (and will only write to /src and /tests).

Troubleshooting

• Agents don’t appear in /agents menu
  Run the renderer again:
  ./scripts/render_templates.py ops/inputs/current.json

• Writes blocked unexpectedly
  That’s the guardrail working.

  • feature-planner → only /docs/feature-plans/

  • main-dev → only /src and /tests
    Ensure hooks are executable:
    chmod +x .claude/hooks/*.sh

• INBOX doesn’t update
  Check jq is installed and posttooluse.sh is executable.
  Confirm ops/policy.json includes "inboxNotifyAgents": ["feature-planner"].

Reusing for Any Project

Edit ops/inputs/current.json:

{
  "PROJECT_NAME": "Your Project",
  "FEATURE_NAME": "Your Feature",
  "FEATURE_SLUG": "your-feature-slug",
  "DATE": "20250823",
  "DATE_ISO": "2025-08-23T00:00:00Z"
}

Re-render:

./scripts/render_templates.py ops/inputs/current.json

You’ve now retargeted the same agents to a brand-new idea with zero code changes.

Why This Pattern Works

• Parallelism: planning continues while coding ships.

• Safety: hooks enforce hard boundaries (no accidental edits).

• Awareness: INBOX.md and /ops/events.log are lightweight “message bus” files agents share.

• Portability: swap inputs and reuse the same scaffolding for any project.

Like many indie hackers, I’ve wrestled with the simple problem of sharing data.

Too often, we pass around messy spreadsheets in emails, Slack, or Google Drive, only to have them get lost, versioned to death, or become unreadable.

So I built DataPages.io — a simple way to turn any CSV file into a clean, searchable, sortable web page in seconds. No code required.

🚀 How DataPages Works

1. Upload your CSV (drag-and-drop simple).

2. Pick your subdomain (e.g. yourdata.datapages.io).

3. Choose visibility — Public, Semi-Public, or Private.

4. Share your live DataPage instantly.

That’s it. Your messy spreadsheet becomes a fast, accessible, mobile-friendly data page.

💡 Why This Matters

• Stop sending spreadsheets around — just share a link.

• Data stays live & easy to explore — searchable, sortable, responsive.

• Privacy first — control who can access your data (with Google Auth or public link).

I wanted something lightweight and fast, with none of the friction of “sign up for Airtable” or “export to Notion.” Just: upload → link → done.

⚡ The Challenge: Early Users, No Usage (Yet!)

I launched a few weeks ago and already have a handful of signups 🎉.

But… many haven’t actually used the product yet. That’s my next puzzle.

Here’s what I’ve realized about why:

• The value prop wasn’t clear enough (why use this over spreadsheets?).

• The onboarding lacked inspiration — if you don’t have a dataset ready, you stall out.

• I hadn’t provided real-life examples to spark ideas.

🔨 What I’m Fixing Next

I’m treating this as a build-in-public experiment, so here’s what’s coming next:

1. Live Examples

So you can instantly see what’s possible, I’m adding pre-made DataPages like:

• A list of top indie hacker tools 💻

• A sample budget tracker 💰

• A conference schedule 🗓️

2. Sample CSVs

Not sure what to upload? I’ll give you simple CSVs (like countries.csv or monthly_sales.csv) to try instantly.

3. Better Onboarding

Instead of a blank dashboard, new users will see a “Drag your CSV here” prompt and one-click example DataPages to explore.

4. Email Nudges

If you signed up but didn’t upload, expect a friendly nudge:
“Upload any CSV to unlock your first live DataPage — it only takes 10 seconds.”

5. Sharing Micro-Wins

I’ll keep posting screenshots, short demos, and small wins here on X/Twitter to show real-world use cases.

🔮 Why I’m Sharing This

I believe tools like this grow best with community feedback. If you’re into data, indie hacking, or no-code, I’d love for you to:

• Try creating your first DataPage (takes less than a minute).

• Share feedback: What’s confusing? What’s exciting?

• Tell me how you might use this in your projects.

👉 Check it out at datapages.io

And if you’ve ever thought “I wish I could just share this spreadsheet without all the hassle” — this might be for you.

Thanks for following along. Excited to see what the #buildinpublic community does with it 🙌

This guide shows you how to sync context across separate sub-agent sessions. You’ll learn:

• Four different strategies for context sharing

• When to use repo files vs. databases vs. MCP integrations

• A step-by-step, automated SQLite context sync tool you can install in minutes

By the end, you’ll have a repeatable workflow for sharing notes and state across multiple Claude Code sessions—no more manual copy/paste.

Table of Contents

1. Why context sync matters

2. 4 proven strategies for context sharing

3. Step-by-step: Automating context sync with SQLite

4. Example workflow with parallel sub-agents

5. Troubleshooting & best practices

6. Next steps: Hooks for automatic syncing

Why context sync matters

When you run sub-agents like a debugger, code-reviewer, or doc-writer in separate Claude Code sessions, each one has its own context window. Without a sync strategy, you risk:

• Losing critical debugging notes

• Duplicating work across sessions

• Forgetting what other agents have already solved

Context syncing ensures that your multi-agent workflow stays coordinated and efficient.

4 Proven Strategies for Context Sharing

1. Markdown Notes in Repo

• Store shared notes in .claude/context/*.md

• Simple, human-readable, and version-controlled

• ✅ Easy to set up, but can grow noisy

2. SQLite Scratchpad (recommended)

• Structured, queryable context DB

• Easy to automate with a ctx CLI tool

• ✅ Scales better than raw markdown

3. MCP-Backed Stores (Redis, external DB)

• Centralized context accessible via Model Context Protocol (MCP) integrations

• Best for teams or multi-machine setups

• ⚠️ Requires extra setup and permissions

4. Regenerate on Demand

• Each sub-agent recomputes its needed context from git diffs, logs, or tests

• ✅ Zero coupling

• ⚠️ Doesn’t share rationales or decisions

Step-by-Step: Automating Context Sync with SQLite

This section walks you through building a drop-in context scratchpad with SQLite that any Claude Code sub-agent session can read/write.

0) Scaffold

mkdir -p tools .claude/context
python -m venv .venv && source .venv/bin/activate
pip install --upgrade pip
pip install tabulate

1) Add the CLI (tools/ctx.py)

#!/usr/bin/env python3
import argparse, sqlite3, os, time
from tabulate import tabulate

DB_PATH = os.environ.get("CTX_DB", ".claude/context/context.db")

DDL = """
CREATE TABLE IF NOT EXISTS entries (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  ts INTEGER NOT NULL,
  agent TEXT NOT NULL,
  session TEXT,
  topic TEXT,
  summary TEXT,
  refs TEXT
);
"""

def connect():
    os.makedirs(os.path.dirname(DB_PATH), exist_ok=True)
    conn = sqlite3.connect(DB_PATH)
    conn.executescript(DDL)
    return conn

def cmd_add(args):
    conn = connect()
    with conn:
        conn.execute(
            "INSERT INTO entries(ts, agent, session, topic, summary, refs) VALUES(?,?,?,?,?,?)",
            (int(time.time()), args.agent, args.session, args.topic, args.summary, args.refs)
        )
    print("ok: added")

def cmd_read(args):
    conn = connect()
    q = "SELECT ts, agent, session, topic, summary, refs FROM entries ORDER BY ts DESC LIMIT ?"
    rows = conn.execute(q, (args.limit,)).fetchall()
    out = []
    for ts,agent,session,topic,summary,refs in rows:
        out.append([time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(ts)), agent, session or "", topic or "", (summary or "")[:240], refs or ""])
    print(tabulate(out, headers=["time","agent","session","topic","summary","refs"], tablefmt="github"))

def main():
    ap = argparse.ArgumentParser()
    sub = ap.add_subparsers(dest="cmd", required=True)

    ap_add = sub.add_parser("add")
    ap_add.add_argument("--agent", required=True)
    ap_add.add_argument("--session", default="")
    ap_add.add_argument("--topic", default="")
    ap_add.add_argument("--summary", required=True)
    ap_add.add_argument("--refs", default="")
    ap_add.set_defaults(func=cmd_add)

    ap_read = sub.add_parser("read")
    ap_read.add_argument("--limit", type=int, default=50)
    ap_read.set_defaults(func=cmd_read)

    args = ap.parse_args()
    args.func(args)

if __name__ == "__main__":
    main()

Make it executable:

chmod +x tools/ctx.py

2) Use it in Sub-Agent Prompts

Example debugger.md:

---
name: debugger
description: Debugging specialist for errors and test failures. Auto-syncs context.
tools: Read, Write, Grep, Glob, Bash
---

## Context Sync (before work)
- Run: `Bash -> python tools/ctx.py read --limit 20`
- Integrate relevant issues from other agents.

## Task Procedure
1) Capture error/stack trace
2) Localize failure region
3) Apply smallest safe fix
4) Verify with tests

## Context Sync (after work)
- Summarize root cause, fix, verification
- Run: `Bash -> python tools/ctx.py add --agent debugger --session "<label>" --topic "<topic>" --summary "<summary>" --refs "<files>"`

3) Example Session Usage

• Start code-reviewer session: log issues with ctx add

• Start debugger session: load reviewer notes with ctx read, then append fix summary

• Start doc-writer session: load both, generate release notes

Now, all three sessions share a durable context database.

Example Workflow with Parallel Sub-Agents

Session A (code-reviewer)

• Review commit

• Log summary with ctx add

Session B (debugger)

• Load reviewer context with ctx read

• Apply fix

• Append summary with ctx add

Session C (doc-writer)

• Load reviewer + debugger context

• Update documentation

• Save context

This pattern creates a multi-agent workflow with shared state across sessions.

Troubleshooting & Best Practices

• Nothing appears in read? Check your DB path or limit flag.

• Label consistently: Use session IDs like CR-12, DBG-45.

• Avoid logging secrets: Keep .claude/context/ in .gitignore.

• Summarize, don’t dump: Add concise notes, not full logs.

Next Steps: Hooks for Automatic Syncing

Right now, agents politely run ctx read at the start and ctx add at the end. In the next article, we’ll explore Claude Code Hooks to enforce this automatically—for example:

• Run ctx read before every task (PreTask hook)

• Run ctx add after every task (PostTask hook)

This ensures every sub-agent session consistently loads and writes context—even if you forget.

Internal Resource

👉 If you’re new to sub-agents, start with our Beginner’s Guide to Claude Code Sub-Agents.

Claude Code’s sub-agents are like specialized teammates you can summon inside your coding environment. Instead of asking your main assistant to do everything (debugging, reviewing, writing docs, analyzing data), you can spin up focused helpers with their own roles, permissions, and context.

This guide gives you the complete playbook:

• What sub-agents are

• When to use them (and when not to)

• How to create them (UI + files)

• Copy-paste examples

• The full tool list + cheat sheet

• How to incorporate them into your workflow while the main agent is running

• When to use inline orchestration vs separate sessions

What are sub-agents?

Sub-agents are scoped assistants with:

• Their own system prompt (role + rules)

• Their own tool permissions (what they’re allowed to do)

• Their own context window (fresh memory separate from your main thread)

You can either:

• Invoke them explicitly by name (use the code-reviewer subagent…)

• Or let Claude auto-delegate if your description matches their role

This separation keeps your main chat clean and makes tasks safer, faster, and more reliable.

When (and when not) to use sub-agents

✅ Great fits

• Multi-step tasks (e.g., research → write → review)

• Guardrails (a reviewer that enforces security standards)

• Specialized expertise (SQL queries, doc writing, profiling)

• Extensible workflows (swap in a TweetWriter without touching research logic)

❌ Overkill

• One-off questions

• Tiny edits or explanations that don’t need a dedicated context

How to create sub-agents

Option A — With the /agents UI

1. Run /agents in Claude Code

2. Click Create New Agent

3. Fill in:

   • Name

   • Description (when/why to use it — keep action-oriented)

   • Tools (leave blank to inherit all)

4. Save. Edit the system prompt if needed.

Option B — Markdown files

Sub-agents live in:

• Project scope → .claude/agents/

• User scope → ~/.claude/agents/

Example:

---
name: code-reviewer
description: Focused code review after each commit.
tools: Read, Grep, Glob, Bash
---

You are a senior reviewer. Always inspect diffs and enforce quality, security, and style.

Example sub-agents (drop into .claude/agents/)

(…examples for Code Reviewer, Debugger, Data Scientist, Reddit Researcher — unchanged here for brevity but included in full earlier…)

Full tool list

Sub-agents can be given these tools:

• Read → Read files

• Write → Create/edit files

• Grep → Search inside files

• Glob → Match file patterns (*.py, src/**)

• Bash → Run shell commands/tests

• MCP tools → External integrations (DBs, APIs, cloud services)

⚠️ If you omit the tools: line, the agent inherits all tools available in your main session.

Tool cheat sheet (by agent type)

Incorporating sub-agents into your workflow (while main agent is running)

(…section covering inline invocation, auto-delegation, chaining, /agents, Hooks, permissions, MCP, and workflow playbooks — as written in the prior draft…)

Using sub-agents in separate sessions

By default, sub-agents run inside your main session, returning results inline. But you can also spin up dedicated sessions where a sub-agent is the “main persona.”

Inline orchestration (default)

• Stay in one thread

• Call code-reviewer, debugger, etc. inline

• Results are merged into your main chat

• Great for continuity, orchestration, and quick workflows

Separate sessions

• Open a new Claude Code session and choose a sub-agent directly

• That session runs only with that agent’s prompt + tool permissions

• Benefits:

  • Focus: a long-lived debugging or research workspace without cluttering your main thread

  • Parallel work: keep multiple tabs open (e.g., data-scientist running queries while code-reviewer runs in another)

  • Isolation: huge contexts (like Reddit scraping notes) don’t pollute your main chat

Caveats

• Separate sessions don’t share state — you’ll need to copy/paste or sync context

• Each session enforces the agent’s tool list

• Edits to an agent file require restarting the session

Rule of thumb:

• Use inline for orchestration and everyday coding

• Use separate sessions for deep, focused, or long-lived specialist tasks

Best practices

• Small, focused agents > one giant multi-purpose agent

• Write prompts as checklists with constraints

• Restrict tools to enforce safety

• Version .claude/agents/ in your repo so the team shares agents

• Prefer explicit invocation for critical workflows

Quick starter pack

mkdir -p .claude/agents

Add these:

• code-reviewer.md

• debugger.md

• data-scientist.md

• reddit-researcher.md

Run /agents to verify.

Wrap-up

Sub-agents make Claude Code modular, safer, and smarter. They let your main agent stay conversational and orchestral, while specialists do the heavy lifting exactly when needed.

Start small: add a code-reviewer and a debugger. Once you feel the speedup, extend to data analysis, doc writing, or research — and explore running some inline, some as dedicated sessions.

Creating Custom Slash Commands

1. Command Structure & Location

Custom commands are stored as Markdown files in specific directories:

Project-specific commands:

# Create project commands directory
mkdir -p .claude/commands

# Create a command file
echo "Your command prompt here" > .claude/commands/optimize.md

Personal commands (across all projects):

# Create personal commands directory
mkdir -p ~/.claude/commands

# Create a personal command
echo "Your command prompt here" > ~/.claude/commands/security-review.md

2. Basic Command Example

# Example 1: Basic Code Review Command
# File: .claude/commands/review.md

Perform a comprehensive code review of recent changes:

1. **Code Quality Analysis**
   - Check code follows our TypeScript and React conventions
   - Verify proper error handling and loading states
   - Ensure accessibility standards are met

2. **Security & Performance**
   - Review for security vulnerabilities
   - Check for performance implications
   - Validate input sanitization

3. **Testing & Documentation**
   - Review test coverage for new functionality
   - Confirm documentation is updated
   - Check for breaking changes

4. **Best Practices**
   - Ensure consistent code style
   - Verify proper component structure
   - Check for code duplication

---

# Example 2: Command with Arguments
# File: .claude/commands/fix-issue.md

Analyze and fix GitHub issue #$ARGUMENTS following our coding standards:

1. **Investigation**
   - Use `gh issue view $ARGUMENTS` to get issue details
   - Search codebase for relevant files
   - Identify root cause of the problem

2. **Implementation**
   - Implement solution addressing the root cause
   - Follow our coding conventions and patterns
   - Add appropriate error handling

3. **Testing & Validation**
   - Write comprehensive tests for the fix
   - Run existing test suite to ensure no regressions
   - Verify the fix resolves the original issue

4. **Documentation**
   - Update relevant documentation
   - Add code comments where necessary
   - Create clear commit message

Usage: /fix-issue 123

---

# Example 3: Command with Pre-execution Bash Commands
# File: .claude/commands/commit-review.md

---
allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*), Bash(git diff:*)
description: Review and commit changes with comprehensive analysis
---

## Context
- Current git status: !`git status`
- Current git diff (staged and unstaged changes): !`git diff HEAD`
- Current branch: !`git branch --show-current`
- Recent commits: !`git log --oneline -5`

## Review Process
1. **Change Analysis**
   - Analyze all modified files for quality and consistency
   - Check for potential breaking changes
   - Verify all changes align with the intended feature/fix

2. **Testing Verification**
   - Ensure all tests pass before committing
   - Verify new functionality has appropriate test coverage
   - Check for any test-related changes needed

3. **Commit Creation**
   - Create descriptive commit message following conventional commits
   - Stage appropriate files for commit
   - Execute commit with proper formatting

---

# Example 4: Namespace Organization
# File: .claude/commands/frontend/component.md

Create a new React component following our design system:

1. **Component Structure**
   - Generate TypeScript component with proper props interface
   - Include proper JSDoc documentation
   - Follow our naming conventions (PascalCase)

2. **Styling & Accessibility**
   - Use Tailwind CSS classes following our design tokens
   - Include proper ARIA attributes
   - Ensure keyboard navigation support

3. **Testing Setup**
   - Create component test file with basic render test
   - Include accessibility testing with jest-axe
   - Add story file for Storybook documentation

Usage: /component ButtonVariant
Creates: components/ButtonVariant.tsx, tests, and stories

---

# Example 5: Advanced Workflow Command
# File: .claude/commands/deploy/prepare-release.md

---
allowed-tools: Bash(*), Git(*), Node(*)
description: Prepare complete release package with all validations
---

## Pre-Release Checklist
- Current version: !`cat package.json | grep version`
- Git status: !`git status --porcelain`
- Last release: !`git tag -l --sort=-version:refname | head -1`
- Branch: !`git branch --show-current`

## Release Preparation Process

1. **Code Quality Validation**
   - Run full test suite and ensure 100% pass rate
   - Execute linting and type checking
   - Verify no console.log or debugging statements
   - Check for TODO/FIXME comments that need addressing

2. **Documentation Updates**
   - Update CHANGELOG.md with new features and fixes
   - Verify README.md reflects current functionality
   - Update API documentation if applicable
   - Check that all examples in docs still work

3. **Version Management**
   - Analyze changes to determine version bump (major/minor/patch)
   - Update package.json version following semantic versioning
   - Create git tag with version number
   - Update any version references in code/docs

4. **Build & Package Verification**
   - Create production build and verify no errors
   - Test build artifacts in clean environment
   - Verify bundle size hasn't increased unexpectedly
   - Run integration tests against production build

5. **Security & Dependencies**
   - Run security audit on dependencies
   - Check for outdated packages that need updates
   - Verify no sensitive information in build artifacts
   - Validate environment variable usage

6. **Release Notes Generation**
   - Generate comprehensive release notes
   - Include breaking changes with migration guides
   - List new features with usage examples
   - Document bug fixes and performance improvements

---

# Example 6: Project Bootstrapping Command
# File: .claude/commands/init/new-feature.md

Bootstrap a new feature branch with complete setup:

## Feature Setup Process

1. **Branch Management**
   - Create feature branch from main/develop
   - Set up branch protection if needed
   - Configure tracking for remote branch

2. **Directory Structure**
   - Create feature-specific directories
   - Set up component/service/test folder structure
   - Add index files for clean imports

3. **Boilerplate Generation**
   - Generate initial component files
   - Create test files with basic structure
   - Set up API service files if needed
   - Add TypeScript interfaces/types

4. **Configuration**
   - Update routing configuration
   - Add feature flag if applicable
   - Update module exports
   - Configure any feature-specific settings

5. **Documentation**
   - Create feature documentation file
   - Add to project roadmap/feature list
   - Update architectural decision records
   - Create initial user stories/requirements

Usage: /new-feature user-dashboard
Creates complete feature branch setup

---

# Example 7: Debug Analysis Command
# File: .claude/commands/debug/analyze-error.md

Comprehensive error analysis and resolution:

## Error Investigation Process

1. **Error Context Gathering**
   - Capture full error stack trace and context
   - Identify error occurrence patterns (when/where/how often)
   - Check recent changes that might have introduced the issue
   - Gather user reports and reproduction steps

2. **Code Analysis**
   - Trace error source through call stack
   - Identify all code paths leading to the error
   - Check for similar patterns elsewhere in codebase
   - Analyze error handling in affected areas

3. **Environment Investigation**
   - Check if error is environment-specific
   - Verify configuration settings
   - Analyze logs for additional context
   - Check external service dependencies

4. **Solution Development**
   - Propose multiple solution approaches
   - Evaluate pros/cons of each approach
   - Implement most appropriate solution
   - Add preventive measures for similar issues

5. **Validation & Testing**
   - Create test cases that reproduce the original error
   - Verify fix resolves the issue
   - Test edge cases and error boundaries
   - Ensure no regressions introduced

6. **Documentation & Prevention**
   - Document the issue and solution
   - Update error handling patterns
   - Add monitoring/alerting if needed
   - Share learnings with team

---

# Example 8: Performance Optimization Command
# File: .claude/commands/performance/optimize.md

---
allowed-tools: Bash(npm:*), Bash(yarn:*), Node(*)
description: Comprehensive performance analysis and optimization
---

## Current Performance Baseline
- Bundle size: !`du -sh dist/ 2>/dev/null || echo "No build found"`
- Dependencies: !`npm list --depth=0 | wc -l`
- Test performance: !`npm test -- --verbose 2>/dev/null | grep "Time:" || echo "Run tests first"`

## Performance Optimization Process

1. **Bundle Analysis**
   - Analyze bundle size and composition
   - Identify largest dependencies and modules
   - Find duplicate dependencies
   - Check for unused code and dead imports

2. **Code Optimization**
   - Review component render performance
   - Optimize expensive operations and calculations
   - Implement proper memoization strategies
   - Check for memory leaks and cleanup issues

3. **Asset Optimization**
   - Optimize images and static assets
   - Implement proper caching strategies
   - Minimize and compress resources
   - Use appropriate image formats and sizes

4. **Network Performance**
   - Optimize API calls and data fetching
   - Implement proper loading states
   - Add request caching where appropriate
   - Minimize network round trips

5. **Runtime Performance**
   - Profile component re-renders
   - Optimize state management
   - Implement virtual scrolling for large lists
   - Optimize animations and transitions

6. **Performance Monitoring**
   - Set up performance metrics tracking
   - Add performance budgets to CI
   - Create performance regression tests
   - Document performance guidelines

---

# Example 9: Security Audit Command
# File: .claude/commands/security/audit.md

---
allowed-tools: Bash(npm:*), Bash(git:*), Node(*)
description: Comprehensive security audit and vulnerability assessment
---

## Security Baseline
- Dependency vulnerabilities: !`npm audit --audit-level=moderate 2>/dev/null || echo "Run npm audit"`
- Git history check: !`git log --oneline -10`
- Environment check: !`env | grep -E "(KEY|TOKEN|SECRET|PASSWORD)" | wc -l`

## Security Audit Process

1. **Dependency Security**
   - Run npm/yarn security audit
   - Check for known vulnerabilities in dependencies
   - Review dependency update requirements
   - Analyze dependency trust and maintenance status

2. **Code Security Analysis**
   - Scan for hardcoded secrets and credentials
   - Review authentication and authorization logic
   - Check input validation and sanitization
   - Analyze SQL injection and XSS vulnerabilities

3. **Configuration Security**
   - Review environment variable usage
   - Check for exposed configuration files
   - Validate security headers and policies
   - Review CORS and CSP configurations

4. **Infrastructure Security**
   - Review deployment security configurations
   - Check for exposed endpoints and services
   - Validate SSL/TLS implementation
   - Review access controls and permissions

5. **Data Protection**
   - Review data handling and storage practices
   - Check for PII data exposure
   - Validate encryption implementation
   - Review data backup and recovery procedures

6. **Security Documentation**
   - Update security guidelines and procedures
   - Document security decisions and rationale
   - Create incident response procedures
   - Generate security compliance reports

Usage: /security:audit
Performs complete security assessment of codebase

3. Advanced Command Features

Using Arguments with $ARGUMENTS

Commands can accept dynamic parameters:

# Create command with arguments
echo 'Fix issue #$ARGUMENTS following our coding standards' > .claude/commands/fix-issue.md

# Usage in Claude Code
/fix-issue 123

Namespace Organization

Organize commands into subdirectories for better structure:

# Creates namespaced commands
mkdir -p .claude/commands/frontend
mkdir -p .claude/commands/backend
mkdir -p .claude/commands/deploy

# Usage becomes:
# /frontend:component
# /backend:api-endpoint  
# /deploy:staging

Pre-execution Bash Commands

Commands can run bash commands before execution using ! prefix:

---
allowed-tools: Bash(git status:*), Bash(git diff:*)
description: Review with git context
---

## Context
- Current status: !`git status`
- Recent changes: !`git diff HEAD~1`

[Rest of command...]

4. Command Management

Listing Available Commands

# See all available commands
/help

# Commands show their scope:
# (project) - Project-specific commands
# (user) - Personal commands across all projects
# (project:namespace) - Namespaced project commands

Command Discovery

Claude Code automatically discovers:

• .claude/commands/*.md files in your project

• ~/.claude/commands/*.md files in your home directory

• Commands from connected MCP servers

5. Best Practices

Command Structure

• Use clear, descriptive filenames

• Include comprehensive instructions

• Add usage examples

• Specify required tools/permissions

Organization Tips

• Group related commands in namespaces

• Use consistent naming conventions

• Document command purposes and workflows

• Keep commands focused on single responsibilities

Team Collaboration

• Commit .claude/commands/ to version control

• Document team-specific commands

• Create project-specific workflows

• Share successful command patterns

6. Real-World Examples

Linear Integration Command

# .claude/commands/linear/create-tasks.md
echo 'Convert this feature description into Linear tasks: $ARGUMENTS

1. Break down into granular tasks
2. Assign priorities and estimates
3. Create tasks in Linear via API
4. Set up proper labels and assignments
5. Link related tasks and dependencies' > .claude/commands/linear/create-tasks.md

# Usage: /linear:create-tasks "Build user authentication system"

AI-Powered Code Generation

# .claude/commands/ai/generate-component.md
echo 'Generate a complete React component: $ARGUMENTS

1. Create TypeScript component with props interface
2. Add comprehensive JSDoc documentation  
3. Include accessibility attributes
4. Generate test file with coverage
5. Create Storybook stories
6. Add to component index exports' > .claude/commands/ai/generate-component.md

# Usage: /ai:generate-component "UserProfile with avatar and edit functionality"

Custom commands in Claude Code are incredibly powerful for automating repetitive workflows, ensuring consistency across your team, and creating reusable patterns that evolve with your project. They're essentially prompt templates that become part of your development toolkit!

1. You can use an existing django project and add the code below to it. Or start from scratch.

2. If starting from scratch: cd Desktop

3. Make sure Django is installed. If not pip install Django

4. Next django-admin startproject landingpage

5. cd landingpage and the below

6. pip install virtualenv

7. python3.8 -m venv env

8. source env/bin/activate

9. pip install Django

10. First let’s add the models in our models.pyfile.

from django.db import models

class PricingDescription(models.Model):
    description = models.CharField(max_length=256)
    order = models.PositiveIntegerField()

    def __str__(self):
        return self.description

    class Meta:
        ordering = ["order", "pk"]


class Pricing(models.Model):
    # payment interval enum
    class Interval(models.IntegerChoices):
        MONTHLY = 1, "MONTHLY"
        YEARLY = 2, "YEARLY"

    # usage type enum
    class Type(models.IntegerChoices):
        RECURRING_PAYMENT = 1, "RecurringPayment"
        ONE_TIME_PAYMENT = 2, "OneTimePayment"

    name = models.CharField(max_length=256)
    descriptions = models.ManyToManyField(
        to=PricingDescription, related_name="pricing_description"
    )
    price = models.PositiveIntegerField()
    interval = models.PositiveSmallIntegerField(
        choices=Interval.choices, null=True, blank=True
    )
    type = models.PositiveSmallIntegerField(
        choices=Type.choices, default=Type.RECURRING_PAYMENT
    )
    order = models.PositiveIntegerField()

    def __str__(self):
        return self.name

    class Meta:
        ordering = ["order", "pk"]

class LandingPage(models.Model):
    primary_hero_title = models.CharField(max_length=256)
    pricing = models.ManyToManyField(to=Pricing, related_name="landingpage_pricing")

    def __str__(self):
        return self.primary_hero_title

These 3 models will allow us to define the pricing data and associate it to a landing page.

Make sure to add folder static_files inside root directory.

Inside static_files add a css folder.

Inside your root directory add a templates directory.

Project structure should look like the below.

Now run python manange.py makemigrations (should see No changes detected if this is a brand new project).

Now run python manage.py migrate .

Now run python manage.py makemigrations landingpage and then python manage.py migrate landingpage

2. Next let’s add some admin tables in our admin.pyso we can add data through the UI.

from django.contrib import admin
from .models import (
    LandingPage,
    Pricing,
    PricingDescription,
)

class LandingPageAdmin(admin.ModelAdmin):
    model = LandingPage
    list_display = (
        "primary_hero_title",
    )


admin.site.register(LandingPage, LandingPageAdmin)

class PricingAdmin(admin.ModelAdmin):
    model = Pricing
    list_display = ("id", "name")

admin.site.register(Pricing, PricingAdmin)

class PricingDescriptionAdmin(admin.ModelAdmin):
    model = PricingDescription
    list_display = ("id", "description")

admin.site.register(PricingDescription, PricingDescriptionAdmin)

3. Now let’s add to our views.py.

from django.shortcuts import render
from .models import LandingPage

def index(request):
    landing_page = LandingPage.objects.all()[0] # assuming you have 1 landing page.
    context = {"landing_page": landing_page}

    return render(request, "index.html", context)

4. Now add an index.html inside your templates folder if not already created with some html code like so.

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>landingpage</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="{% static 'css/landingpage.css' %}" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <section class="rl_section_pricing18">
        <div class="rl-padding-global-2">
            <div class="rl-container-large-2">
                <div class="rl-padding-section-large-2">
                    <div class="rl_pricing18_component">
                        <div class="rl_pricing18_heading-wrapper">
                            <h2 class="rl-heading-style-h2">Pricing plan</h2>
                        </div>
                        <div class="rl_pricing18_spacing-block-3"></div>
                        <div class="rl_pricing18_plans_{{landing_page.pricing.all|length}}">
                            {% for price in landing_page.pricing.all %}
                            <div class="rl_pricing18_plan">
                                <div class="rl_pricing18_plan-content">
                                    <div class="rl_pricing18_plan-content-top">
                                        <div class="rl_pricing18_price-wrapper">
                                            <div class="rl-heading-style-h6">{{price.name}}</div>
                                            <div class="rl_pricing18_spacing-block-4"></div>
                                            <div class="rl-heading-style-h1-2">${{price.price}}<span
                                                    class="rl-heading-style-h4">/{% if price.interval == 1 %}mo
                                                    {% else%}yr{% endif %}</span></div>
                                            <div class="rl_pricing18_spacing-block-4"></div>
                                        </div>
                                        <div class="rl_pricing18_spacing-block-5"></div>
                                        <div class="rl_pricing18_feature-list">
                                            {% for description in price.descriptions.all %}
                                            <div class="rl_pricing18_feature">
                                                <div class="rl_pricing18_icon-wrapper">
                                                    <div class="rl_pricing18_icon w-embed"><svg fill="none"
                                                            height=" 100%" viewbox="0 0 24 24" width=" 100%"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M19.8501 7.25012L9.2501 17.8501C9.15621 17.9448 9.02842 17.998 8.8951 17.998C8.76178 17.998 8.63398 17.9448 8.5401 17.8501L3.1501 12.4601C3.05544 12.3662 3.0022 12.2384 3.0022 12.1051C3.0022 11.9718 3.05544 11.844 3.1501 11.7501L3.8501 11.0501C3.94398 10.9555 4.07178 10.9022 4.2051 10.9022C4.33842 10.9022 4.46621 10.9555 4.5601 11.0501L8.8901 15.3801L18.4401 5.83012C18.6379 5.63833 18.9523 5.63833 19.1501 5.83012L19.8501 6.54012C19.9448 6.634 19.998 6.7618 19.998 6.89512C19.998 7.02844 19.9448 7.15623 19.8501 7.25012Z"
                                                                fill="currentColor"></path>
                                                        </svg></div>
                                                </div>
                                                <div class="rl-text-style-regular-2">{{ description.description }}</div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        <div class="rl_pricing18_spacing-block-6"></div>
                                    </div>
                                    <a class="rl-button-2 w-button" href="#">Get started</a>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

5. Now let’s add some css to landingpage.css inside your static_files/css

.rl-button-2 {
    border: 1px solid black;
    background-color: black;
    color: white;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1rem;
}
.rl-text-style-regular-2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.rl-heading-style-h4 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
}

.rl-heading-style-h1-2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.rl-heading-style-h6 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}
.rl-heading-style-h2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.rl-padding-section-large-2 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.rl-container-large-2 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.rl-padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

.rl_pricing18_spacing-block-6 {
  width: 100%;
  padding-bottom: 2rem;
}

.rl_pricing18_icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.rl_pricing18_icon-wrapper {
  color: black;
  flex: none;
  align-self: flex-start;
}

.rl_pricing18_feature {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}

.rl_pricing18_feature-list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: grid;
}

.rl_pricing18_spacing-block-5 {
  width: 100%;
  padding-bottom: 2rem;
}

.rl_pricing18_spacing-block-4 {
  width: 100%;
  padding-bottom: 0.5rem;
}

.rl_pricing18_price-wrapper {
  text-align: center;
}

.rl_pricing18_plan-content {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.rl_pricing18_plan {
  border: 1px solid black;
  flex-direction: column;
  padding: 2rem;
  display: flex;
}

.rl_pricing18_plans_3 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.rl_pricing18_plans_2 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.rl_pricing18_spacing-block-3 {
  width: 100%;
  padding-bottom: 5rem;
}

.rl_pricing18_spacing-block-2 {
  width: 100%;
  padding-bottom: 1.5rem;
}

.rl_pricing18_spacing-block-1 {
  width: 100%;
  padding-bottom: 1rem;
}

.rl_pricing18_heading-wrapper {
  text-align: center;
  width: 100%;
  max-width: 48rem;
}

.rl_pricing18_component {
  flex-direction: column;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 991px) {
  .rl-heading-style-h4 {
    font-size: 1.75rem;
  }
  .rl-heading-style-h1-2 {
    font-size: 3.25rem;
  }
  .rl_pricing18_plans_1 {
    grid-template-columns: 1fr;
  }

  .rl_pricing18_spacing-block-3 {
    padding-bottom: 4.5rem;
  }
  .rl-heading-style-h2 {
    font-size: 2.75rem;
  }
  .rl-padding-section-large-2 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .rl-heading-style-h4 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .rl-heading-style-h1-2 {
    font-size: 2.5rem;
  }
  .rl-padding-section-large-2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .rl_pricing18_spacing-block-6,
  .rl_pricing18_spacing-block-5 {
    padding-bottom: 1.5rem;
  }
  .rl_pricing18_plan {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .rl_pricing18_plans_1 {
    grid-template-columns: 1fr;
  }

  .rl_pricing18_spacing-block-3 {
    padding-bottom: 3rem;
  }
  .rl_pricing18_spacing-block-2 {
    padding-bottom: 1.25rem;
  }
  .rl_pricing18_spacing-block-1 {
    padding-bottom: 0.75rem;
  }
  .rl-heading-style-h2 {
    font-size: 2.25rem;
  }
}

6. Now let’s add a urls.py with the below.

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path


from .views import *

urlpatterns = [
    path("admin/", admin.site.urls),
    path("index/", index),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

7. Make sure your settings.py has been set up and added.

import os
from pathlib import Path

#########################################
##  SITE_NAME - change to your own ##
#########################################
SITE_NAME = "Landing page"

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = Path(__file__).resolve().parent.parent
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "your_secret_key"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
#########################################
##  Application Definition ##
#########################################

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "landingpage",
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = "landingpage.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            BASE_DIR,
            "templates/",
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "landingpage.wsgi.application"


#########################################
##  Database ##
#########################################
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

#########################################
##  Password Validation ##
#########################################

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]

#########################################
##  Internationalization ##
#########################################

LANGUAGE_CODE = "en-us"

TIME_ZONE = "America/New_York"

USE_I18N = True

USE_L10N = True

USE_TZ = True

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATIC_URL = BACKEND_URL + "/static/"
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static_files"),
]

8. Now run python manage.py createsuperuser and fill in your username, email, and password to sign in to your Django Admin UI

9. Run python manage.py runserver

10. Go to http://127.0.0.1:8000/admin/

11. Log in with your username and password.

12. Go to http://127.0.0.1:8000/admin/landingpage/pricingdescription/

13. Add a description for Basic, Pro and Premium.

14. Go to http://127.0.0.1:8000/admin/landingpage/pricing/

15. Add 3 Prices with your descriptions. One for Basic, Pro, and Premium.

Your pricing table should have 3 prices now.

16. Now go to http://127.0.0.1:8000/admin/landingpage/landingpage/ and add a landing page.

17. You can now view the dynamic Pricing table by going to http://localhost:8000/index/

That’s it! Hope you enjoyed and found this helpful.

If you liked this tutorial and you enjoy learning about coding, building in public, indiehackers, automation, start ups or entrepreneurship, follow me here:

rcmisk.com

https://twitter.com/rcmisk

https://indiehackers.com/rcmisk

https://dev.to/rcmisk

https://medium.com/@rcmisk

Sign up for my newsletter to keep track of my progress and to learn along the way!

I have a project in Django where I give the user the ability to create their own SaaS landing page based off a set of template choices (all designed in Webflow).

In order to design your landing page in Webflow and then export and bring into Django you need to first hit the export code button in Webflow like so:

1. First hit button in the top right corner as shown below:

2. Then hit prepare zip and download the files as shown below:

3. Now you have all of your files from you landing page on your local machine.

4. Next, copy the folder into a location inside your Django project. I made a directory called webflow-templates and placed the files and folders (index.html, css, js, images) into another folder called landingpage_option1

5. Make sure this folder landingpage_option1 is referenced in the scripts below.

6. On my local machine I then pip install beautifulsoup4

7. This is used in the scripts to parse the html files.

8. I then created a scripts folder that contains 2 python scripts which are below.

9. Run move_exported_dirs_files.py

#!/usr/bin/env python3.8.3
import os
import shutil

# moving html files into templates
target_dir = "../templates/landingpage_option1/"
source_dir = "../webflow-templates/landingpage_option1"
print("Source: " + source_dir)
files = os.listdir(source_dir)
print("Files in source directory: " + source_dir)
files_html = [i for i in files if i.endswith(".html")]
os.makedirs(os.path.dirname(target_dir), exist_ok=True)
for file in files_html:
    print("Moving: " + os.path.join(source_dir, file))
    print("To: " + os.path.join(source_dir, file))
    shutil.copy(os.path.join(source_dir, file), target_dir)

# moving css, images, js folders
target_dir = "../static_files/landingpage_option1/"
source_dir = "../webflow-templates/landingpage_option1"
sub_dirs = ["css", "images", "js"]
list_dirs = os.listdir(source_dir)
for sub_dir in list_dirs:
    if sub_dir in sub_dirs:
        dir_to_copy = os.path.join(source_dir, sub_dir)
        target_sub_dir = os.path.dirname(target_dir + sub_dir + "/")
        shutil.copytree(dir_to_copy, target_sub_dir)

10. This will take the files from webflow-templates/landingepage_option1 and move the index.html into your Django templates folder (make sure this is created if not already) templates/landingepage_option1 folder inside Django

11. It then also moves all sub folders (css, js, images) into your static_files folder (or where ever you house your static files) into a folder called static_files/landingpage_option1

12. Run find_and_replace.py

#!/usr/bin/env python3

# add django static tags to index.html file
from bs4 import BeautifulSoup as bs

# append load static
with open("../templates/landingpage_option1/index.html", "r+") as file:
    html = file.read()
    file.seek(0, 0)
    file.write("{% load static %}\n" + html)
# replace all href links
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    for link in soup.findAll("link"):
        beg = "{% static 'landingpage_option3/"
        end = "' %}"
        link["href"] = beg + link["href"] + end
        # {% static 'css/normalize.css' %}
with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

# # replace all src in img tags
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    for img in soup.findAll("img"):
        beg = "{% static 'landingpage_option3/"
        end = "' %}"
        img["src"] = beg + img["src"] + end
        # {% static 'css/normalize.css' %}
with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

# # replace all src in script tags from webflow
with open("../templates/landingpage_option1/index.html") as in_file:
    html = in_file.read()
    soup = bs(html, "html.parser")
    script = soup.find("script", src="js/webflow.js")
    beg = "{% static 'landingpage_option1/"
    end = "' %}"
    script["src"] = beg + script["src"] + end

with open("../templates/landingpage_option1/index.html", "w") as out_file:
    out_file.write(str(soup))

13. This script will replace all your referenced static folders and files with the Django template static tags. This will add {% load static %} to the top of your index.html file in the templates folder as well as add static tags to all your <link href ’s as well as your <script src=”{% static ‘landingpage_option1/js/webflow.js’ %}” type=”text/javascript”></script>

14. You should be ready to go to see your new template rendering if you have a view in Django pointing to the template. Something like this views.py

from django.shortcuts import render

def index(request):
 return render(request, "landingpage_option1/index.html", context)

Below is a Python script that uses the requests library to interact with the Notion API and read a specific page. This script automates the process described earlier.

Prerequisites:

1. Notion Account: Ensure you have a Notion account and a page you want to read.
2. API Token: Obtain an integration token from Notion by creating an integration at Notion Integrations.
   1. Copy yourInternal Integration Secret and use that as your token

3. Install the requests library if you haven't already:

    pip install requests
   

Python Script:

import requests

def get_notion_page(page_id, token):
    url = f"<https://api.notion.com/v1/pages/{page_id}>"

    headers = {
        "Authorization": f"Bearer {token}",
        "Notion-Version": "2022-06-28",
        "Content-Type": "application/json"
    }

    response = requests.get(url, headers=headers)

    if response.status_code == 200:
        print("Page details:")
        print(response.json())
    else:
        print(f"Failed to retrieve page. Status code: {response.status_code}")
        print(response.text)

if __name__ == "__main__":
    # Replace these variables with your actual values
    page_id = "your_page_id"
    token = "your_integration_token"

    get_notion_page(page_id, token)

How to Use:

1. Replace "your_page_id" with the actual ID of the Notion page you want to read.
2. Replace "your_integration_token" with your actual Notion integration token.
3. Run the script.

Running the Script:

Save the script to a file, for example notion_read_page.py, and run it using Python:

python notion_read_page.py

The script will send a GET request to the Notion API and print the details of the specified page.

Written with the help of Gen AI!

I'm finally going to start my #buildinpublic journey! On the journey you will see how I came across a problem, how I chose to solve it and finally how to launch! Each week I'll post what I've worked on and share what I built, so others can learn along the way. Let's get started!

The Genesis:

My coding adventure began as an attempt to bring my brother's vision for a college-centric social network to life. Despite months of development and launching with an initial user base, the lack of market validation led to its stagnation. This pivotal experience highlighted the crucial step we missed—validating the idea before fully committing to its development.

The Awakening:

Fast forward to the present, I've recognized a recurring pattern in my approach to projects—a cycle of enthusiasm followed by a realization of misalignment with market needs. This realization sparked the concept of 'IdeaVerify', a meta-solution born from the lessons learned throughout my journey.

Below is the manual process I did to test out this idea:

1. Came up with a solution to a problem.

2. I built a simple landing page describing the problem and the solution.

3. I described the features, services, and prices with CTA's like Signup Now, or Subscribe now etc. All of the Purchase Now CTA's would not actually allow the user to purchase the SaaS but would show the user to sign up for a waitlist.

4. I then took that static page and deployed it on places for free like Netlify or Render

5. The only thing I had to pay for to make it look legit was a Domain address, and to do that I would go to Namecheap to purchase a cheap domain.

6. Once created I published it to channels like Reddit, Twitter, Quora, Linkedin, Facebook and showed it to users of whom I thought would benefit.

7. I then analyzed what type of interest I got and from there I made a decision if it's worth it to build.

This is how I came up with Ideaverify! I actually went through the entire manual process above and got a lot of interest by just posting on one or two subreddits on Reddit. I got signups, and messages saying that it was real interesting and that people were wondering when it would be ready.

This is how Ideaverify was born. I wanted to automate this entire process of validating or verifying an idea. It would automate all of the above, all at the click of a button but also provide analytics and a "go or no go" decision.

In this #buildinpublic series I will be using my boilerplate.rcmisk.com SaaS starter kit built in Django and React with all the common SaaS features: transactional emails w/ Postmark, Stripe for payments/subscriptions, Google Analytics, dynamic landing page and copy creation, blog, user login/registration flows, Material UI for styling and deployment to Render.

I'm going to break up this project into different parts, and milestones and show the code, learnings and development along the way!

Milestone 1

1. Allow user to input what their SaaS is all about and then generate a landing page based off the copy the user provided and different template styles

2. Automatically create a google analytics app pointing to the url for tracking

3. User clicks "Create" and behind the scenes deploy the static landing page pointing to a unique URL associated with ideaverify.com subdomain. i.e. my-new-idea.ideaverify.com

4. Allow user to update copy, images, and style once it's deployed

Milestone 2

1. Allow user to pick niche subreddits on Reddit and post to from within the ideaverify dashboard.

2. Show top subreddits/posts on Reddit to post to based off key words that their SaaS is associated with.

Milestone 3

1. Allow user to point it to their custom domain

This I believe will be a good MVP and stopping place to launch Ideaverify!

Follow me here:

https://rcmisk.com

https://twitter.com/rcmisk

https://indiehackers.com/rcmisk

https://dev.to/rcmisk

Sign up for my newsletter to keep track of my progress and to learn along the way!

rcmisk

Starting a Software as a Service (SaaS) project can be daunting, especially with the initial setup of the infrastructure. Luckily, with the right boilerplate, much of the groundwork is laid out for you. This guide will walk you through setting up a SaaS application using a specific Django backend and React frontend code, including integrating Stripe for payments, Postmark for emails, user management and authentication, Cloudinary for media file uploads, dynamically rendered landing page, blog creation through Django Admin, Google Analytics, Material UI, setting up a PostgreSQL database, and deploying to Render.com. Let's dive in!

Backend Setup

Initial Setup

1. Create a Project Folder: Start by navigating to your Desktop or preferred directory in your terminal and create a folder named saas-boilerplate. Then, create a subdirectory named backend and navigate into it.

    cd Desktop
    mkdir saas-boilerplate
    cd saas-boilerplate
    mkdir backend
    cd backend
   

2. Clone the Boilerplate Repository: Clone the backend boilerplate repository into your backend directory.

    git clone https://github.com/rcmiskin10/dj_react_saas_backend_render_template.git .
   

3. Set Up a Virtual Environment: Use virtualenv to create an isolated Python environment. Activate it and install the project's dependencies.

    pip install virtualenv
    python3.8 -m venv env
    source env/bin/activate
    pip install -r requirements.txt
   

4. Environmental Variables: Create a .env file in your backend directory. Populate it with the necessary environmental variables provided below:

   1.   STRIPE_API_TEST_PK=<STRIPE_API_TEST_PK>
        STRIPE_API_TEST_SK=<STRIPE_API_TEST_SK>
        STRIPE_LIVE_MODE=False
        PROD_BACKEND_URL=<PROD_BACKEND_URL>
        PROD_FRONTEND_URL=<PROD_FRONTEND_URL>
        BACKEND_URL=http://127.0.0.1
        FRONTEND_URL=http://localhost:3000
        DEBUG=True
        DEV_EMAIL_HOST_USER=<DEV_EMAIL_HOST_USER>
        DEV_EMAIL_HOST_PASSWORD=<DEV_EMAIL_HOST_PASSWORD>
        POSTMARK_SERVER_TOKEN=<POSTMARK_SERVER_TOKEN>
        DEFAULT_FROM_EMAIL=<DEFAULT_FROM_EMAIL>
      

5. Now you need to set up Stripe.

   1. If you do not have a stripe account register a free one here: https://dashboard.stripe.com/register. If you do have a stripe account login here: https://dashboard.stripe.com/login.

   2. Once account is set up or you're logged in, turn on `Test Mode` (Toggle button in top right corner of dashboard) it should bring you to: https://dashboard.stripe.com/test/payments

   3. Go to https://dashboard.stripe.com/test/apikeys

      1. Grab your `Publishable key` token and set the environmental variable `STRIPE_API_TEST_PK` in your `.env` file created above.

      2. Next grab your `Secret key` token and set the environmental variable `STRIPE_API_TEST_SK` in your `.env` file created from above.

      3. Next go to Stripe Products to add your products, i.e. subscription tiers

         1. Add as many tiers as you want i.e.

            1. Free w/ a description and price: $0

            2. Pro w/ a description and price: say $10

            3. Make sure both are Recurring and Monthly or however you would like to set up your subscriptions.

6. Postgres Database Setup: Download and install PostgreSQL. You can use this download link. Once installed, create a database named postgres and ensure your settings.py reflects the correct database settings. For example: default="postgresql://postgres:postgres@localhost/postgres", if your database name is postgres.

7. Apply migrations and create a superuser for Django admin access.

    python manage.py migrate
    python manage.py createsuperuser
   

8. Running the Server: Start your Django server and log into the admin panel to verify that everything is set up correctly.

    python manage.py runserver
   

Integrating Stripe Products and Prices, Email, and Landing Page data

1. Add Products and Prices: Navigate to the Django admin payments section to add Stripe products and their prices. Ensure each product in Django matches its counterpart in Stripe, including the recurring intervals and price IDs.

   1. You can find Stripe Product Id in stripe products and click on product and in the URL you will see an ID with prefix prod_xxxxxxxx and letters and numbers as the unique id.

   2. Do the same for all products

   3. Now go to Django Admin Product Price

      1. Add the price for each product from Stripe here: Django Admin Add Product Link

      2. Select Product that you added to Django Admin.

      3. Add the Price from what you entered on Stripe. Add the interval, i.e. Monthly

      4. Add the stripe price id

         1. Go to https://dashboard.stripe.com/test/products?active=true

            1. Select the Product and scroll down to Pricing and look under API ID and copy id with prefix and numbers/letters like price_xxxxxxxxx and paste into stripe price id on django admin. 5. Do for all products

      5. Now you can add descriptions of the tiers here: Django Admin Add Product Description Link

         1. Add as many description list items for each product

2. Email Setup: Configure your development email settings by adding DEV_EMAIL_HOST_USER and DEV_EMAIL_HOST_PASSWORD to your .env file, using an app password generated from your Gmail account.

   1. Set DEV_EMAIL_HOST_USER to your gmail for DEV testing

   2. Set your DEV_EMAIL_HOST_PASSWORD to the password set up in your gmail account from above. You need to create an App Password in: https://myaccount.google.com/security

      1. Make sure 2-Step Authentication is enabled.

      2. Then go to https://myaccount.google.com/apppasswords and create a new app and a new password will be created.

      3. Now Emails will be sent through gmail smtp in DEV

3. Next up is setting up the landing page data.

   1. Note here you can add whatever copy, images, icons, you would like through the Django admin

      1. Go to http://127.0.0.1:8000/admin/landingpage/landingpage/add/

         1. Add the hero section copy and image

         2. Add the features of your SaaS

            1. the Feature mui icon name: can be selected from https://mui.com/material-ui/material-icons/?query i.e. find Add and get the name of the icon from the end of the import in the modal import AddIcon from '@mui/icons-material/Add'; i.e. Add

            2. You can add as many features as you like and Order them however you like by applying 1,2,3... to each feature. i.e. 1 will be first in line.

            3. Do the same for how it works, Secondary hero, and Social Media Links

4. We will set up prod environmental variables later.

Frontend Setup

1. Setting Up the Frontend: In a new terminal, navigate to your project root and set up the frontend directory by cloning the frontend boilerplate repository. Install dependencies with npm install.

    mkdir frontend
    cd frontend
    git clone https://github.com/rcmiskin10/dj_react_saas_frontend_render_template.git .
    npm install
   

2. Configure Environment Variables: Create a .env file in your frontend directory. Add your Stripe Publishable key and Google Analytics ID.

   1. Add the publishable key from Stripe to the environmental variable REACT_APP_STRIPE_API_TEST_PK with the value from STRIPE_API_TEST_PK in backend/.env

   2. Now add an environmental variable REACT_APP_GA_ID for Google Analytics

      1. Go to https://analytics.google.com/

         1. Add an analytics account

         2. Add an app

         3. Go to top search bar and search for MEASUREMENT ID in Data Streams and copy the ID that has prefix G-XXXXXXXX 4. Past that G-XXXXXXXX as value for environmental variable REACT_APP_GA_ID in frontend/.env

3. Start the Frontend Server: Run npm start to launch your React app. Your SaaS landing page should now be visible at http://localhost:3000/.

Deploying toRender.com

1. Prepare for Deployment: Ensure your backend and frontend folders are pushed to separate GitHub repositories.

2. Deploying the Backend: Follow Render.com's documentation to deploy your Django app, adding the necessary environment variables for production, including Stripe keys, Cloudinary for media files, and email settings via Postmark.

   1. Follow tutorial here: https://docs.render.com/deploy-django#use-renderyaml-for-deploys

      1. The backend/render.yaml already exists in the saas boilerplate. You can change all the names to fit whatever you like, but our boilerplate named everything backend

         1. In the Render Dashboard, go to the Blueprints page and click New Blueprint Instance.

            1. Make sure to first create a repository to hold your backend/ folder on github.

            2. Now you can select the repository that contains your blueprint and click Connect.

            3. Give your blueprint project a name and click Apply.

         2. Now add the Production Environmental Variables by clicking the backend app and going to Environment

            1. Add you Stripe STRIPE_API_TEST_PK found in your local .env file or if you are ready to use live Stripe data use the Production PK found in stripe dashboard.

            2. Same with the STRIPE_API_TEST_SK

            3. STRIPE_LIVE_MODE=False

            4. BACKEND_URL will be the url that your backend render app is pointing to: something similar to this backend-xxxxonrender.com

            5. For your media files first set up Cloudinary account by going to the cloudinary website and create a free cloudinary account. After your account has been created, go to the dashboard page and copy the cloud name, api key and api secret.

               1. Add the cloud name to CLOUDINARY_CLOUD_NAME

               2. Add the api key to CLOUDINARY_API_KEY

               3. Add the api secret to CLOUDINARY_API_SECRET

            6. For your emails create a postmark account here https://postmarkapp.com/. Follow instructions here: https://postmarkapp.com/support/article/1008-what-are-the-account-and-server-api-tokens to find your Server API Token and set it to POSTMARK_SERVER_TOKEN

               1. Set DEFAULT_FROM_EMAIL to your email with postmark.

            7. After you deploy the frontend app below, come back to setting FRONTEND_URL

            8. Finally run pythonmanage.pycreatesuperuser in the Render shell in the settings of the backend app so that you can create an admin account.

               1. To see your backend admin page, go to <YOUR_APP_URL>/admin to login.

3. Deploying the Frontend: Deploy your React app on Render.com, setting environment variables for connecting to the backend API, Stripe, Cloudinary, and Google Analytics.

   1. Connect your github account here: https://dashboard.render.com/select-repo?type=static

      1. Follow the instructions to deploy

         1. Once deployed go to settings for frontend app

            1. In Redirect/Rewrite rules add:

               1. /* as Source

               2. /index.html as Destination

               3. And Rewrite as Action

            2. Now go to Environment and add:

               1. REACT_APP_STRIPE_API_TEST_PK to same Stripe API Key that you set in backend

               2. Add REACT_APP_BACKEND_API_URL and use the backend url from above after backend was deployed

               3. Add your REACT_APP_MEDIA_URL to the Cloudinary url. Something like this https://res.cloudinary.com/xxxxxxx/image/upload/v1/ The xxxxxxx should be found in your cloudinary dashboard that you used in backend set up.

               4. Now add REACT_APP_GA_ID from your .env REACT_APP_GA_ID in local file.

               5. Finally take the Frontend url from the react frontend app and set it in the backend app on render.com's environmental variable FRONTEND_URL that you previously set up.

4. FinalAdjustments: After deploying both frontend and backend, ensure all environment variables are correctly set and pointing to the right services. Test your live application to ensure everything works seamlessly.

Congratulations! You've successfully set up and deployed your SaaS boilerplate application. This setup provides a solid foundation for developing your SaaS product, with scalable options for payment processing, database management, and deployment strategies. Happy coding!

Coming soon!

• Deploy to GCP Cloud Run w/ React inside Django's static files!

• Automate all steps in this blog post, all at the click of button!

• Tutorials on the code for both backend and frontend repos!

  • https://github.com/rcmiskin10/dj_react_saas_backend_render_template

  • https://github.com/rcmiskin10/dj_react_saas_frontend_render_template

P.S comment below on any issues!

Sign up for my newsletter to hear about my #buildinpublic journey!

Finally finished my SaaS boilerplate written in Django and React! Check it out here: https://boilerplate.rcmisk.com

I realized when I had an idea for a SaaS or business I kept creating the same basic features, login/register, user management, JWT tokens, authentication, landing pages, profiles, Stripe integration, email, styling, Material UI, React, Google Analytics etc.

I thought there must be a smarter way. So I took the time coding up all those features and bundling them up into a repo so I can simply git clone and start immediately coding up my idea. No more wasted effort on re-creating the wheel each time. The repo is super generic so all I have to do is change the copy, colors, icons, and name of idea!

I'll be starting up some blog post series on how I went about coding this up in Django and React and all the integrations that I set it up with.

Feel free to leave feedback!

Posts coming soon! Excited to share! #buildinpublic.

I was hoping to be able to simply authenticate users via Facebook from either an iOS/Android React Native app and/or React web app without having to use a ton of other python libraries.

Here are some helpful tutorials/links that helped me achieve this. Thank you!:

Implementing Google Login With JWT in Django for RESTful API Authentication

It’s become common now implementing RESTful API since server can communicate with various devices to communicate each…

medium.com

Manually Build a Login Flow - Facebook Login - Documentation - Facebook for Developers

Implementing Google Login With JWT in Django for RESTful API Authentication

developers.facebook.com

Let’s first set up the Django app

cd projectsmkdir app-login-testcd app-login-testpython -m venv envsource env/bin/activatepip install django djangorestframework djangorestframework-simplejwt

Set the ‘rest_framework’ in settings.py under INSTALLED_APPS as well as add this for authenticating with JWT:

REST_FRAMEWORK = {    "DEFAULT_AUTHENTICATION_CLASSES": [        "rest_framework_simplejwt.authentication.JWTAuthentication",    ],}

Now let’s run server:

python manage.py makemigrationspython manage.py migratepython manage.py runserver

Now let’s set up our developer’s Facebook App

You can se that up here:

https://developers.facebook.com/apps/

1. Create App -> then create test app by hovering over top right corner

2. Record the AppID and App Secret from Settings -> Basic

3. You shouldn’t have to add and URL’s when working on localhost/dev

Now we want to build the login dialog url

This is the link the user will be taken to when the user clicks the Login In Via Facebook button on what ever sign ui screen you create:

https://www.facebook.com/v7.0/dialog/oauth?client_id={app-id}&redirect_uri=http://localhost:8000/login&scope=email--> {app-id} is the app id you recorded from above from your facebook app.
--> scope is the type of permission you want to have access to
--> redirect uri is where you want this login link to be taken to after successful login... in this example we are going to redirect it to our api endpoint /login/Keep this url so that you can use it to login via the web browser

Scope is a comma or space separated list of Permissions to request from the person using your app.

Reference - Facebook Login - Documentation - Facebook for Developers

Each permission has its own set of requirements and usage that are subject to our Platform Policies and your own…

developers.facebook.com

Once successful login Facebook then creates a code which is a long random hash and it’s passed via the redirect uri with the param :

http://localhost:8000/login?code={code-generated-from-above-result}

Now back into Django

# create login app
python manage.py startapp login

In the login app create a views.py with the below:

Add the views into the urls.py in your main app in Django

#1 First go to login screen for facebook:

https://www.facebook.com/v7.0/dialog/oauth?client_id={FACEBOOK_APP_ID}&redirect_uri=http://localhost:8000/login/&state={"{st=state123abc,ds=123456789}"}&scope=email

The above returns code param → then redirects to OUR /login?code={code-generated-from-facebook}

Walking through what the SignInView does

Once the app is redirected to the SignInView /login?code={code-from-facebook-after-success-login} we generate a payload with the required info in order to build the below url and try to grab the user’s access token. We take the code param from the #1 url above.

#2 https://graph.facebook.com/v7.0/oauth/access_token?client_id=1415988338584764&redirect_uri=http://localhost:8000/login/&client_secret={app_secret}&code={code-generated-from-above-result}

URL # 2 is what generates the access token and the response below:

{    “access_token”: “{users_access_token}”,    “token_type”: “bearer”,    “expires_in”: 5181851}

Store the user_access_token for use later on.

We then want to grab our (the developer’s access token in order to make requests to fetch user’s info as well as to inspect/debug the users_access_token to make sure it’s valid). Create payload which will then generate url #3 below.

#3 https://graph.facebook.com/oauth/access_token?client_id={your-app-id}&client_secret={your-app-secret}&grant_type=client_credentials

Here’ is a successful response from the above url:

{    “access_token”: “{developers-app-access-token}”,    “token_type”: “bearer”}

Now inspect the users access token → validate to make sure it’s still valid. Build payload so that we can build and hit the below url #4.

#4 https://graph.facebook.com/debug_token?input_token={token-to-inspect-or-users-access-token}&access_token={app-token-or-admin-token-developer’s-access-token-from-above}

{“data”: {“app_id”: “appid1234567”,“type”: “USER”,“application”: “Example Test App”,“data_access_expires_at”: 1602126624,“expires_at”: 1599532509,“is_valid”: true,“issued_at”: 1594348509,“scopes”: [“public_profile”],“user_id”: “user-id123456”}}

Valid user_access_token ^^^^ and gives us access to the user_id

Now we want to get user info more specifically the email address so that we can create or check if user exists. We can do that by building another payload and hitting the url #5 below. Fields are the user fields you want access to (the permissions you added in the scope way up top!).

#5 https://graph.facebook.com/{user_id}?fields=id,email&access_token={user_access_token}

Then what the view does is checks if there is a user already in our DB with the email address. If not it will generate a new user with that email address and random password.

It then will generate a JWT token using RefreshToken .

And we can pass the response back.

token = RefreshToken.for_user(user) response = {}response["username"] = user.usernameresponse["access_token"] = str(token.access_token)response["refresh_token"] = str(token)

We now have successfully authenticated a user and generated a JWT token that can be returned to any type of client whether that be React-Native or React. Once the client receives that JWT token we want to store that on client side securely and safely. In React-Native i believe the best way to do that is in here:

SecureStore

expo-secure-store provides a way to encrypt and securely store key-value pairs locally on the device. Each Expo project…

docs.expo.io

If you are using Expo.

You can also make your /hello/endpoint require authentication so that you can test if your JWT token is working!

#6 test auth for endpoint

curl -X GET http://localhost:8000/hello/ -H ‘Authorization: Bearer access_token_here’

This is just a test app to get Facebook oauth flow working. Thank you to

Implementing Google Login With JWT in Django for RESTful API Authentication

It’s become common now implementing RESTful API since server can communicate with various devices to communicate each…

medium.com

for helping me see how to do it for Google login!

Next I will be trying to set up React-Native and creating iOS and Android Login Screens that will contain this Facebook login button… and logging in and out users and allowing them to go to a private home screen that requires authentication to view! FYI → Postman was also very helpful in seeing what the facebook graph requests returned!

Django Rest Framework

Facebook