DEV Community: Jamie

Stop Copy-Pasting Legal Pages Into Your Next.js App

Jamie — Tue, 10 Mar 2026 10:31:41 +0000

Most Next.js apps need a privacy policy and terms of service before they launch. The usual approach: grab a template from the internet, paste it into a static page, and forget about it until a lawyer asks why it still says "Company Name Here."

OpenPolicy treats your policies like code. You define them as TypeScript objects, and the CLI compiles them to HTML as part of your build — in sync with every deploy.

Install

bun add @openpolicy/sdk
bun add -D @openpolicy/cli

Define your privacy policy

// policy.config.ts
import { definePrivacyPolicy } from "@openpolicy/sdk";

export default definePrivacyPolicy({
  effectiveDate: "2026-03-09",
  company: {
    name: "Acme",
    legalName: "Acme, Inc.",
    address: "123 Main St, San Francisco, CA 94105",
    contact: "privacy@acme.com",
  },
  dataCollected: {
    "Account information": ["Email address", "Display name"],
    "Usage data": ["Pages visited", "Session duration"],
  },
  legalBasis: "Legitimate interests and user consent",
  retention: {
    "Account data": "Until account deletion",
    "Analytics data": "13 months",
  },
  cookies: {
    essential: true,
    analytics: true,
    marketing: false,
  },
  thirdParties: [
    { name: "Vercel", purpose: "Hosting and edge delivery" },
    { name: "Plausible", purpose: "Privacy-friendly analytics" },
  ],
  userRights: ["access", "erasure", "portability", "objection"],
  jurisdictions: ["us", "eu"],
});

Define your terms of service

// terms.config.ts
import { defineTermsOfService } from "@openpolicy/sdk";

export default defineTermsOfService({
  effectiveDate: "2026-03-09",
  company: {
    name: "Acme",
    legalName: "Acme, Inc.",
    address: "123 Main St, San Francisco, CA 94105",
    contact: "legal@acme.com",
  },
  acceptance: {
    methods: ["using the service", "creating an account"],
  },
  eligibility: {
    minimumAge: 13,
  },
  accounts: {
    registrationRequired: true,
    userResponsibleForCredentials: true,
    companyCanTerminate: true,
  },
  prohibitedUses: [
    "Violating any applicable laws or regulations",
    "Attempting to gain unauthorized access to any part of the service",
    "Transmitting malware or malicious code",
  ],
  intellectualProperty: {
    companyOwnsService: true,
    usersMayNotCopy: true,
  },
  disclaimers: {
    serviceProvidedAsIs: true,
    noWarranties: true,
  },
  limitationOfLiability: {
    excludesIndirectDamages: true,
    liabilityCap: "the amount paid by the user in the past 12 months",
  },
  governingLaw: {
    jurisdiction: "Delaware, USA",
  },
  changesPolicy: {
    noticeMethod: "email or prominent notice on the website",
    noticePeriodDays: 30,
  },
});

Add a generate script to `package.json`

{
  "scripts": {
    "generate:policies": "openpolicy generate --format html --out ./public/policies",
    "prebuild": "bun run generate:policies"
  }
}

The prebuild script runs automatically before next build. Pass both config paths as a comma-separated list — the CLI generates both policies in a single invocation and skips any file that doesn't exist yet.

Run it manually to generate the files for the first time:

bun run generate:policies

What gets generated

public/policies/
  privacy-policy.html
  terms-of-service.html

Files land in public/policies/ so Next.js serves them as static assets, but they're also readable at runtime via fs.readFile in Server Components.

Render on dedicated routes

Next.js App Router Server Components can read the generated HTML directly from disk at request time:

// app/privacy/page.tsx
import { readFile } from "node:fs/promises";
import { join } from "node:path";

export default async function PrivacyPage() {
  const html = await readFile(
    join(process.cwd(), "public/policies/privacy-policy.html"),
    "utf-8",
  );
  return (
    <main style={{ maxWidth: 800, margin: "0 auto", padding: "40px 24px" }}>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </main>
  );
}

// app/terms/page.tsx
import { readFile } from "node:fs/promises";
import { join } from "node:path";

export default async function TermsPage() {
  const html = await readFile(
    join(process.cwd(), "public/policies/terms-of-service.html"),
    "utf-8",
  );
  return (
    <main style={{ maxWidth: 800, margin: "0 auto", padding: "40px 24px" }}>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </main>
  );
}

Add a .gitignore entry so the generated files aren't checked in:

# .gitignore
/public/policies/*.html

Keep a .gitkeep in public/policies/ so the directory exists in the repo before the first generation.

Why this is better than a static page

Type-safe. Every field is checked by TypeScript. You can't ship a policy with a missing contact email.
Structured. Each section is generated from your actual config — no stale placeholder text.
Version-controlled. The config lives in your repo. git blame shows you when and why anything changed.
Jurisdiction-aware. Set jurisdictions: ["eu"] and GDPR-required sections (right to erasure, data transfers, DPA contact) are included automatically.

The generated HTML includes all required sections for the jurisdictions you specify. You own the config; OpenPolicy handles the legal structure.

Ship a Privacy Policy and Terms of Service with Your Astro Site

Jamie — Sun, 08 Mar 2026 12:38:08 +0000

Most Astro sites need a privacy policy and terms of service before they launch. The usual approach: grab a template from the internet, paste it into a static page, and forget about it until a lawyer asks why it still says "Company Name Here."

OpenPolicy treats your policies like code. You define them as TypeScript objects, and the Astro integration compiles them to Markdown at build time — in sync with every deploy.

Install

npx astro add @openpolicy/astro
bun add @openpolicy/sdk

astro add installs the package and automatically updates astro.config.mjs. If you prefer to wire it up manually:

bun add -D @openpolicy/astro @openpolicy/vite

Add the integration to `astro.config.mjs`

import { defineConfig } from "astro/config";
import { openPolicy } from "@openpolicy/astro";

export default defineConfig({
  integrations: [
    openPolicy({
      configs: [
        "privacy.config.ts",
        { config: "terms.config.ts", type: "terms" },
      ],
      formats: ["markdown"],
      outDir: "src/generated/policies",
    }),
  ],
});

On the first bun run dev, if either config file doesn't exist yet, the plugin scaffolds it automatically. Edit the generated file and save — the plugin watches for changes and regenerates.

Define your privacy policy

// privacy.config.ts
import { definePrivacyPolicy } from "@openpolicy/sdk";

export default definePrivacyPolicy({
  effectiveDate: "2026-03-05",
  company: {
    name: "Acme",
    legalName: "Acme, Inc.",
    address: "123 Main St, San Francisco, CA 94105",
    contact: "privacy@acme.com",
  },
  dataCollected: {
    "Account information": ["Email address", "Display name"],
    "Usage data": ["Pages visited", "Session duration"],
  },
  legalBasis: "Legitimate interests and user consent",
  retention: {
    "Account data": "Until account deletion",
    "Analytics data": "13 months",
  },
  cookies: {
    essential: true,
    analytics: true,
    marketing: false,
  },
  thirdParties: [
    { name: "Vercel", purpose: "Hosting and edge delivery" },
    { name: "Plausible", purpose: "Privacy-friendly analytics" },
  ],
  userRights: ["access", "erasure", "portability", "objection"],
  jurisdictions: ["us", "eu"],
});

Define your terms of service

// terms.config.ts
import { defineTermsOfService } from "@openpolicy/sdk";

export default defineTermsOfService({
  effectiveDate: "2026-03-05",
  company: {
    name: "Acme",
    legalName: "Acme, Inc.",
    address: "123 Main St, San Francisco, CA 94105",
    contact: "legal@acme.com",
  },
  acceptance: {
    methods: ["using the service", "creating an account"],
  },
  eligibility: {
    minimumAge: 13,
  },
  accounts: {
    registrationRequired: true,
    userResponsibleForCredentials: true,
    companyCanTerminate: true,
  },
  prohibitedUses: [
    "Violating any applicable laws or regulations",
    "Attempting to gain unauthorized access to any part of the service",
    "Transmitting malware or malicious code",
  ],
  intellectualProperty: {
    companyOwnsService: true,
    usersMayNotCopy: true,
  },
  disclaimers: {
    serviceProvidedAsIs: true,
    noWarranties: true,
  },
  limitationOfLiability: {
    excludesIndirectDamages: true,
    liabilityCap: "the amount paid by the user in the past 12 months",
  },
  governingLaw: {
    jurisdiction: "Delaware, USA",
  },
  changesPolicy: {
    noticeMethod: "email or prominent notice on the website",
    noticePeriodDays: 30,
  },
});

What gets generated

After the next build (or on save in dev), the plugin writes:

src/generated/policies/
  privacy-policy.md
  terms-of-service.md

Because the files land inside src/, Astro can import them directly as Markdown components.

Render on a dedicated page

---
// src/pages/privacy.astro
import { Content } from "../../generated/policies/privacy-policy.md";
---
<div class="prose prose-gray max-w-none">
  <Content />
</div>

Astro compiles the Markdown to HTML at build time, so there's no client-side rendering overhead. The prose class (from Tailwind Typography) handles all the heading, list, and paragraph styles.

Do the same for terms:

---
// src/pages/terms.astro
import { Content } from "../../generated/policies/terms-of-service.md";
---
<div class="prose prose-gray max-w-none">
  <Content />
</div>

Add .gitignore entries so the generated files aren't checked in:

# .gitignore
src/generated/

Why this is better than a static page

Type-safe. Every field is checked by TypeScript. You can't ship a policy with a missing contact email.
Structured. Each section is generated from your actual config — no stale placeholder text.
Version-controlled. The config lives in your repo. git blame shows you when and why anything changed.
Jurisdiction-aware. Set jurisdictions: ["eu"] and GDPR-required sections (right to erasure, data transfers, DPA contact) are included automatically.

The generated Markdown includes all required sections for the jurisdictions you specify. You own the config; OpenPolicy handles the legal structure.

5 Best Note-Taking Apps 📝

Jamie — Mon, 04 Nov 2024 15:57:44 +0000

Taking notes is something we all need to do to stay organized, whether it’s for work, study, or personal projects. To help you find the right tool, we’ve put together a list of our top five note-taking apps along with their pros and pricing.

1. Notion

Notion has become one of the most popular apps for taking notes, but it’s also a powerful tool for project management. We are using it in Dea to help us stay organized and work better together.

Pros of Notion
Customizable and Flexible Workspace: Notion allows users to create a personalized and flexible workspace tailored to their specific needs
All-in-One Tool: It combines note-taking, task management, and project planning into a single platform, reducing the need for multiple apps
Collaborative Features: Teams can work together in real-time, comment, and assign tasks, enhancing collaboration and communication.
AI-Powered Features: Notion incorporates AI tools that assist users with writing and organizing content, streamlining workflows and improving productivity.

Pricing:

Free Plan: Offers access to most basic features with some limitations.
Personal Pro Plan: starts from €9.50 per month.
Team Plan: starts from €14 per user per month.

2. Reflect

Reflect is our favorite note-taking app. It is designed for journaling, reflection, and taking notes quickly. Reflect mimics how your brain works by visually connecting ideas and images through a graph, which makes it easier to explore and understand the relationships between your thoughts.

Pros of Reflect:
Brain-Like Organization: Reflect helps you organize your notes in a way that feels natural, mimicking how your brain connects ideas.
Graph View: The app shows a visual graph of your notes, making it easy to see how different thoughts are linked together.
Daily Notes Feature: Reflect encourages you to write every day by providing a special section for daily journaling, helping you build a writing habit.
Tagging and Linking: You can add tags and links to your notes, which makes it easy to find related ideas and navigate through your content.
Markdown Support: Reflect allows you to format your text using Markdown, making it quick and easy to write and style your notes.

Pricing:

Monthly Plan: $10 per month.

3. Evernote

Evernote is a note-taking application designed to help users capture and organize their ideas, notes, and information in one place. It allows the creation of text notes, images, audio recordings, and file attachments. Users can organize their content into notebooks and categorize it using tags.

Pros of Evernote:
Sync Across Devices: Evernote keeps your notes updated on all your devices, so you can access them anytime, anywhere.
Great Search Tool: The app has a strong search feature that helps you find text in notes, images, and even handwritten notes quickly.
Easy Organization: You can create notebooks and tags to keep your notes sorted and easy to find.
Web Clipping Tool: Evernote lets you save articles and web pages directly to your notes, making it simple to collect information online.

Pricing:

Free Plan: Limited features.
Personal Plan: starts from $10.83 per month.
Professional Plan: starts from $14.16 per month.

4. Bear Notes

Bear Notes is another one of our favorite apps for taking notes. This beautifully designed note-taking app combines a simple interface with powerful editing and organizing tools, making it ideal for writing and general note-taking. Note that Bear Notes is only available on macOS and iOS.

Pros of Bear Notes:
Markdown Support: The app allows users to format text quickly using Markdown, streamlining the writing process and improving efficiency.
Beautiful Interface: Bear features a clean, minimalist design that enhances focus and makes note-taking enjoyable.
Cross-Note Links: Users can link related notes, which helps with organizing and retrieving information.
Organizational Features: Bear uses a tagging system for easy organization and retrieval of notes, helping users categorize their content effectively.
Cross-Device Syncing: With a Bear Pro subscription, notes sync seamlessly across iOS and macOS devices, providing access to your content anytime, anywhere.

Pricing:

Free Plan: Basic features included.
Pro Plan: $2.99 per month or $29.99 per year.

5. Miro

Miro is a unique addition to our list of apps for taking notes as it focuses more on visual and collaborative note-taking. Ideal for brainstorming, Miro offers an online whiteboard experience that teams often use for creative projects.

Pros of Miro:
Team Collaboration: Miro lets many people work together at the same time, making it easy to brainstorm ideas and share them instantly.
Flexible Workspace: The unlimited canvas gives you lots of space to create and organize your thoughts, diagrams, and notes however you like.
Brain Maps and Diagrams: You can easily make brain maps, flowcharts, and other visuals to help plan projects and understand ideas better.
Lots of Templates: Miro has many ready-made templates for different tasks, like brainstorming and planning, so you can start your projects quickly.

Pricing:

Free Plan: Offers basic tools but limits team members.
Starter Plan: starts from $8 per user per month.
Business Plan: starts from $16 per user per month.

6.Dea

Bonus app, Dea is a powerful platform for capturing, organizing, planning, and sharing your app ideas easily.

Pros of Dea:
AI-Generated Templates: Dea includes AI-generated templates for brainstorming, competitive analysis, domain research, and more, helping users get started quickly and effectively.
Focused Project Planning: The app is specifically designed for straightforward project planning, making it simple to manage tasks and ideas.
Markdown Support: Dea supports Markdown, offering an intuitive user experience for formatting and organizing notes easily.

Pricing:

7-days trial: Get all features free for one week.
Personal Plan £10 per month

Finding the right note-taking app can make all the difference in staying organized and productive. So, give a few of these options a try and see which one helps you capture your thoughts most effectively.

Happy note-taking!

Dea Changelog #1

Jamie — Mon, 28 Oct 2024 09:35:17 +0000

Myself and the rest of the Dea team are very excited to share with you a huge number of updates and some exciting news.

🌱 New Logo

We’re thrilled to reveal our new logo, crafted by Beth! Our original sprout concept still shines through, symbolising Dea as a place where ideas can take root and flourish. But now, the logo has a unique personality that reflects Dea’s mission: a fun, friendly, and community-driven platform designed to nurture creativity. It’s more than just a symbol; it’s a promise that Dea is here to support you and your ideas every step of the way.

🔄 Organisation Made Effortless

Wave goodbye to clunky spreadsheets and rigid tables! We’ve redesigned the project organisation experience to make managing your projects feel as fluid as your creative process. Now you can effortlessly drag and drop your projects across an intuitive, interactive canvas, sorting them based on hype levels and progress stages. This change gives you a visual, dynamic way to track each project’s journey, keeping your workflow organized and your goals insight.

🌐 Share Your Work with a Public Profile

Show off your creativity to the world with our new Public Profile feature. Think of it as your personal Product Hunt—a space where you can showcase your most exciting projects, share updates, and even receive upvotes from the Dea community. It’s an easy way to connect with potential collaborators, get feedback, and celebrate your work with anyone who shares your passion.

✍️ Enhanced Text Editing with a Notion-Style Experience

We’ve replaced our old static sections with a flexible Notion-style editor, putting the power of a robust text editing experience at your fingertips. Now, you can structure and style your notes, brainstorming sessions, features, and research just the way you like—while still benefiting from our smart automation that ensures you’re never starting from scratch. This editor empowers you to organise thoughts, ideas, and details seamlessly as you dive into your creative process.

🚀 Launching on Uneed Tomorrow!

We’re beyond excited to announce that Dea will officially launch on Uneed tomorrow! We’d be thrilled to have your support as we take this next step. Keep an eye out, join the conversation, and help us spread the word—let’s make Dea the ultimate destination for bringing ideas to life.

Developers, what projects are you currently working on? 💻

Jamie — Sun, 27 Oct 2024 17:03:58 +0000

What do they do? Who are they for? What goals would you like to achieve?

We'll kick things off... We're currently building Dea, a tool that offers the fastest way to go from an idea to a product. It will help you plan, track, and share your projects with the community.

Recently we've launched:

A text editor that generates a starting point with branding suggestions, name ideas, research insights, and feature lists.
A drag-and-drop organizing tool for project management.
A sharable profile page that lets others see and upvote your projects.

What are we working on now?

Putting the finishing touches on the first version of the product.
Preparing to launch the product on Uneed.

Share your projects with us!

5 Must-Know Communities for Developers

Jamie — Fri, 25 Oct 2024 14:10:38 +0000

As a developer, being part of a dev community can be a key to building a professional network, presenting your projects and receiving constructive feedback. Here are five communities that you may want to check out.

1. Dev.to

Dev is a platform where developers from diverse backgrounds share their thoughts, experiences, and insights.

Why You Should Join

Variety of Topics: Whether you're into web development, AI, or just curious about the latest trends, there’s something for everyone.
Engaging Discussions: The community is welcoming and supportive, so you can easily jump into the comments to share your thoughts, ask questions, or just give a thumbs-up to someone's post.
Make Connections: By getting involved, you're likely to meet other developers and even industry experts.

2. Peerlist.io

Peerlist is a community where developers can showcase their skills and projects.

Why You Should Join

Show Off Your Creations: Peerlist lets you create a profile where you can display your projects and achievements.
Find Collaboration Partners: If you’re looking for people to brainstorm or work on projects with, this is the place to be.
Boost Your Credibility: Sharing your work can help you build a reputation in the developer community. The more you share, the more people will recognize you.

3. Work in Progress (WIP)

WIP is a great hub for makers, creators, and developers working on side projects.

Why You Should Join

Keep Yourself Accountable: By sharing your project updates, you’ll find it easier to stay focused and motivated.
Get Valuable Feedback: Share your ideas and receive constructive feedback that can help refine your projects into something special.

4. X Communities: Web Developers & Software Engineering

X communities are full of discussions centered around web development and software engineering.

Why You Should Join

Real-Time Conversation: X allows for instant dialogue. Have a quick question or want to share an insight? Just post or join a relevant thread.
Focused Discussions: Many X communities dive deep into specific programming languages or frameworks, making it easy to connect with other developers.

5. Reddit Communities

Reddit communities offer a wide range of knowledge and discussions.

Check out:

r/AskProgramming,
r/webdev,
r/programming,
r/coding

Why You Should Join

Diverse Voices: Engage with people from different backgrounds sharing insights and opinions.
Ask for Help Anytime: Members of these subreddits are always eager to help you out. Subreddits like r/AskProgramming are especially useful for getting advice.

6. Dea

Live on Uneed

Bonus community! ~~Launching soon~~ Dea is a platform designed to help you manage and organise all your ideas. It will allow you to share your projects and receive valuable feedback from others. Stay tuned!

Conclusion

Joining a developer community is an experience that can enhance your growth. Don’t hesitate — jump in and start engaging today. Your next great project may be just a conversation away.

Happy coding!

How do you split your time between building and marketing?

Jamie — Wed, 23 Oct 2024 20:56:09 +0000

At Dea we're probably spending 60% on product & engineering, 20% on content & marketing, and 20% on business related activities.

Would love to know what everyone thinks is a perfect split of time and what your actual time spend looks like.

AI Form Validation

Jamie — Tue, 22 Oct 2024 11:15:17 +0000

Does AI have a place in form validation? I believe it does and in this post I’ll show you where it can be applied, why it makes sense and how to build it.

Background

Dea is my new startup that helps builders track, plan and ship their next big product idea. An important step in the platform is being able to capture ideas. For this we have a quick but structured form that captures the what, who and outcome of the product.

Each input has some standard validation powered by Zod and Superforms. However, we want to make sure that the initial draft is coherent, legal and safe. This is where AI can help us.

Implementation

We created a simple validation function using Vercel’s AI SDK.

async function isValidIdea(draft: string) {
    const { object } = await generateObject({
        model: openai('gpt-4o-mini'),
        system: `You are responsible for checking if an idea is coherent, legal and safe.
            Please reject any ideas that contain spam or harmful content. 
            If you are unsure then allow the idea.`,
        prompt: draft,
        temperature: 0,
        schema: z.object({
            isValid: z.boolean()
        })
    });

    return object.isValid;
}

Using generateObject we can get a type-safe and structured output from the LLM. Let’s breakdown the 3 parts of the prompt:

You are responsible for checking if an idea is coherent, legal and safe. - The outline of the model's role.
Please reject any ideas that contain spam or harmful content. - The instruction to either approve or reject the idea.
If you are unsure then allow the idea. - A condition to approve if the model is unsure. Without this it wouldn't know what to do if uncertain.

Then within our form action we call this function within a try/catch block since network requests could fail for any number of reasons. In our case if there’s a failure from OpenAI we still allow the validation to pass.

const form = await superValidate(request, zod(ideaSchemaV1));

if (!form.valid) {
    return fail(400, { form, error: null });
}

const draft = ideaToDraft(form.data);

try {
    const isValid = await isValidIdea(draft);

    if (!isValid) {
        return fail(400, { form, error: 'Please check your answers' });
    }
} catch (e) {
    console.error(e);
    // don't prevent submission if the ai validation fails
}

When should I use AI?

Obviously if you can validate your inputs confidently without AI then don’t use AI. Relying on an LLM is prone to uncertainty and introduces latency.

However, there are valid use-cases when the input is unstructured or you need a deeper analysis of the inputs. A good rule-of-thumb is to try AI when otherwise you’d have a human/manual approval step.

Best practices

Use a fast model, 4o-mini instead of o1, to ensure a fast response and the best UX for the end user. With that in mind also provide some indication to the user that the form is being validated.

If not 100% necessary we think it’s better to use non-blocking AI-validation. In our example we let the validation pass if the LLM call fails. You could also nudge the user to check their answers but still allow them to confirm that they are correct and wish to proceed.

Finally, don’t use this for things that LLMs are known to be bad at, such as unit conversion. This could be possible with function calling but be mindful of latency.

Conclusion

I hope this has given you some ideas on how to apply AI validation with your own forms and data capture. If you’re already doing something similar then we’d love to hear the lessons you’ve learned.

App developers, where do you find inspiration for your next app ideas?💡

Jamie — Wed, 16 Oct 2024 22:37:04 +0000

We'd love to know how you come up with your ideas. How do you keep track of them? How do you decide what works and what doesn't? Share your experiences!

Unleash Your App's Potential with SCAMPER

Jamie — Mon, 14 Oct 2024 12:00:02 +0000

Got an app idea buzzing in your head? If so, you might face challenges in improving your concept. The SCAMPER technique can help. SCAMPER is a useful tool in design thinking and mind mapping. It can generate innovative ideas and solutions for your app concept. In this article, we'll explore how you can use SCAMPER to enhance your app idea.

What is SCAMPER?

SCAMPER stands for Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, and Reverse. It's a method for brainstorming and problem-solving that encourages thinking outside the box. Using SCAMPER for your app idea, you can uncover new opportunities, identify potential improvements, and enhance the user experience.

Using SCAMPER for App Innovation

Substitute: How can you replace existing features in your app with something new or unexpected? For example, instead of traditional navigation menus, could you use a gesture-based navigation system?
Combine: Can you combine different features or functionalities in your app to create something unique and valuable? Consider integrating social media sharing capabilities into core app functions.
Adapt: How can your app adapt to user needs or scenarios? Consider how your app could adapt to different screen sizes or user preferences.
Modify: What aspects of your app can be changed to make it more user-friendly or visually appealing? Explore changing the color scheme, typography, or layout to improve overall aesthetics.
Put to Another Use: Can you repurpose any existing features or components in your app to serve a different purpose? For instance, can a feature designed for one specific user group be adapted to cater to a broader audience?
Eliminate: Are there any redundant or unnecessary elements in your app that can be removed to streamline the user experience? Identify and remove any features that do not add value or may confuse users.
Reverse: How can you change the order or sequence of actions in your app to create a fresh and engaging user interaction? Consider reversing the typical user flow to surprise and delight users.

Integrating Mind Mapping and Design Thinking

In addition to using SCAMPER, incorporating mind mapping and design thinking into your app development process can further boost your creative output. Mind mapping allows you to visually organize and connect ideas, while design thinking encourages empathy, ideation, and prototyping to create user-centric solutions.

By combining SCAMPER with mind mapping, you can visually map out your innovative ideas, connections, and potential implementation strategies. Design thinking complements this process by emphasizing human-centered design and iterative problem-solving, ensuring that your app addresses real user needs and pain points.

You Can Do It

Using the SCAMPER technique, along with mind mapping and design thinking principles, can be a game-changer for your app idea. By embracing innovation and creativity, you have the potential to transform your concept into a standout app that resonates with users and stands out in the competitive app market.

You can use this guide. Or you can let Dea do it all for you.

Fixing my deployment mistakes

Jamie — Sat, 04 May 2024 11:42:55 +0000

Read the original here

I recently published a blog post showing how I use Github Actions to deploy apps to Vercel from my monorepo. That solution was very basic but it worked. However, I expected it to work for me a little longer than it did 🤦‍♂️

So in this post I'm going to work on fixing a few issues that have cropped up. I'm going to structure this blog post a little differently than normal. Instead of fixing the problems, perfecting my solution and writing about it - I'm going to write this post while I work and publish it with very little editing (probably none because I'm quite lazy).

I think this'll be an interesting exercise. It'll force me to think out loud and then get to share my process with everyone.

So without further ado, let's break down the problems.

Problems

Yesterday, all my troubles seemed so far away, and I noticed that my builds were failing. Upon closer inspection the reason was that I'm hitting my Vercel limits.

Deploying vntg/jxd
Error: Resource is limited - try again in 6 hours (more than 100, code: "api-deployments-free-per-day").

Also, with the addition of a bunch more projects into the monorepo, the build time has now crept up towards the 10min mark. That is kinda my personal patience limit…

So those are the two main things I want to solve today.

Brain dump

In the last post I talked about two potential solutions to this problem:

Parallelise the builds with Github's matrices strategy
Use ts-ignore to only build and deploy projects that have actually changed

I could probably get away with just using ts-ignore for now but think doing both would be beneficial for a few reasons:

Even greater performance
Simplify my code so that everything deployment related lives within the workflow

Recap

Before I start on those two improvements I'd like to recap the existing deploy.ts file and look for some improvements before transitioning away. I think it'll end up being quicker if I 1) refresh the solution in my mind and 2) migrate a simpler solution.

// deploy.ts
import util from "util";
import { exec } from "child_process";

const asyncExec = util.promisify(exec);

const projects = [
  {
    path: "apps/bigjournal/web", // Is this needed?
    projectId: "",
  },
  // ...
];

async function run() {
  const token = process.env.VERCEL_TOKEN;

  if (!token) { // Unnecessary in GH actions 
    throw new Error("missing vercel token");
  }

  const orgId = process.env.VERCEL_ORG_ID;

  if (!orgId) {
    throw new Error("missing org id");
  }

  for (const { path, projectId } of projects) { // Matrix
    console.log(`deploying ${path}`);
    console.log(`pulling vercel settings`);
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel pull --yes --environment=production --token=${token}`
    );
    console.log(`running vercel build`);
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel build --prod --token=${token} ${path}` // Path is only used here!
    );
    console.log(`deploying to vercel`);
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel deploy --prod --prebuilt --token=${token}`
    );
    console.log(`✅ deployed ${path}`);
  }
}

run()
  .then(() => console.log("✅ complete"))
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });

My first thought is do I even need the path in the configuration? Since we have to run vercel from the root, and the path is stored in the Vercel settings that are pulled… is it needed?

So I'm going to test this locally with my Big Journal project:

export VERCEL_ORG_ID="..." VERCEL_PROJECT_ID="..."
vercel pull --yes --environment=production
vercel deploy --prod

✅ that has worked perfectly! So now I know that path isn't required! I will quickly update the deploy script and push (just to be extra safe).

Matrices

Something I haven't worked with before and so I'll need to refer to the documentation.

jobs:
  example_matrix:
    strategy:
      matrix:
        version: [10, 12, 14]
        os: [ubuntu-latest, windows-latest]

Looking at this example it seems simple enough to split out deploy into a separate job, that depends on the CI job, and have a matrix of project IDs.

After a few changes this is the workflow I am left with:

name: ci/cd

on:
  push:
    branches: ["main"]

env:
  DATABASE_URL: ${{secrets.DATABASE_URL}}
  TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  TURBO_TEAM: vntg

jobs:
  ci:
    name: ci
    timeout-minutes: 15
    runs-on: ubuntu-latest       

    steps:
      - name: checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: deps
        run: pnpm install

      - name: build
        run: pnpm build

  cd:
    name: cd
    timeout-minutes: 15
    runs-on: ubuntu-latest
    needs: [ci]
    strategy:
      matrix:
        project:
          - ... # big journal
    env:
        VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
        VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        VERCEL_PROJECT_ID: ${{matrix.project}}

    steps:
      - name: checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: install vercel cli
        run: pnpm install --global vercel@latest

      - name: pull
        run: vercel pull --yes --environment=production --token=${VERCEL_TOKEN}

      - name: build & deploy
        run: vercel deploy --prod --token=${VERCEL_TOKEN}

I also removed the old deploy.ts script and any dependencies it had before pushing and eagerly awaiting the results.

Already this gives a huge performance improvement of ~5x 🙌 but doesn't help with the biggest problem of hitting our Vercel build limits. For that let's look into turbo-ignore.

`turbo-ignore`

Looking at the docs, it seems fairly simple:

npx turbo-ignore workspace --task=build

This command will exit with 1 if the project needs to be rebuilt (based on the commit history).

I can handle this with continue-on-error and if within the workflow. First, I'll also need to add the workspace value to the matrix using a map.

The final cd job looks like this:

cd:
  name: cd
  timeout-minutes: 15
  runs-on: ubuntu-latest
  needs: [ci]
  strategy:
    matrix:
      project:
        - id: ...
          workspace: "@bigjournal/web"
  env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
      VERCEL_PROJECT_ID: ${{matrix.project.id}}

  steps:
    - name: checkout
      uses: actions/checkout@v4
      with:
        fetch-depth: 2

    - uses: pnpm/action-setup@v3
      with:
        version: 8

    - name: setup node
      uses: actions/setup-node@v4
      with:
        node-version: 20
        cache: 'pnpm'

    - name: install vercel cli
      run: pnpm install --global vercel@latest

    - id: check
      name: check
      run: npx turbo-ignore ${{ matrix.project.workspace }} --task=build
      continue-on-error: true

    - name: pull
      if: steps.check.outcome != 'success'
      run: vercel pull --yes --environment=production --token=${VERCEL_TOKEN}

    - name: build & deploy
      if: steps.check.outcome != 'success'
      run: vercel deploy --prod --token=${VERCEL_TOKEN}

Conclusion

So I've now implemented both fixes and I'm much happier with the overall result. Time will tell if this fixes all deployment issues but right now I'm confident (although I said that last time).

Here's the highlights:

Everything deployment related is contained within one file
Only changed apps are deployed
Performance improvement of 5x-10x

Until next time - ciao 👋

Deploying many apps from a single monorepo

Jamie — Tue, 30 Apr 2024 11:56:16 +0000

Read the original here

I was recently sat in a cafe in Putney, migrating my personal website, jxd.dev, into my increasingly large vntg monorepo. It currently contains 7 deployable applications and even more packages that handle everything from UI to billing and authentication to emails. In the future I might write up about the motivation and strategy behind this workflow but this post is all about how I deploy those applications to Vercel.

Problem

Turborepo, Vercel and PNPM workspaces are core to my monorepo, which has the following structure:

.
├── apps/
│   ├── jxd <- Astro
│   ├── vrpc/
│   │   ├── web <- Next
│   │   └── api
│   └── jot/
│       ├── web <- Next
│       └── mobile <- React + Capacitor
├── packages
└── deploy.ts <- Magic happens here!

The problem here is that 7 is greater than 3 and A Git Repository cannot be connected to more than 3 Projects. So for a while I had 3 projects that were automatically being deployed by Vercel and 4 that were manually being built and deployed locally. Not ideal!

Implementation

So let's fix it so that all the apps being deployed to Vercel are deployed automatically on every push… I think there's a 2 letter acronym for that 🤔…

We start off with a simple Github Actions workflow. Nothing crazy here, checkout, build, deploy:

# .github/workflows/cicd.yml

name: ci/cd

on:
  push:
    branches: ["main"]

jobs:
  build:
    name: build and deploy
    timeout-minutes: 15
    runs-on: ubuntu-latest
    env:
        DATABASE_URL: ${{secrets.DATABASE_URL}}
        VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
        VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        TURBO_TEAM: vntg

    steps:
      - name: checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: install vercel cli
        run: pnpm install --global vercel@latest

      - name: deps
        run: pnpm install

      - name: build
        run: pnpm build

      - name: deploy
        run: pnpm run deploy

The magic happens in that img step pnpm run deploy which is defined as tsx deploy.ts:

// deploy.ts
import util from "util";
import { exec } from "child_process";

const asyncExec = util.promisify(exec);

const projects = [
  {
    path: "apps/jxd",
    projectId: "...",
  },
  {
    path: "apps/vrpc/marketing",
    projectId: "...",
  },
  // ...
];

async function run() {
  const token = process.env.VERCEL_TOKEN;

  if (!token) {
    throw new Error("missing vercel token");
  }

  const orgId = process.env.VERCEL_ORG_ID;

  if (!orgId) {
    throw new Error("missing org id");
  }

  for (const { path, projectId } of projects) {
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel pull --yes --environment=production --token=${token}`
    );
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel build --prod --token=${token} ${path}`
    );
    await asyncExec(
      `VERCEL_PROJECT_ID=${projectId} vercel deploy --prod --prebuilt --token=${token}`
    );
  }
}

run()
  .then(() => console.log("✅ complete"))
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });

This script is iterating over my projects configuration and for each running vercel pull, vercel build and vercel deploy. With that all 7 applications are being continuously deployed without using the Vercel-Github connection and therefore sidestepping the connection limit.

Each project is still configured on Vercel and that'll look something like this:

Performance

I'm going to now attempt to perform a feat of prediction and answer some questions you might be thinking…

Why not run every single build in parallel?

Vercel CLI should always be invoked from the monorepo root, not the subdirectory (see link) so if I were to run vercel pull in parallel then each invocation would overwrite the project settings of the others.

Running build n+1 times, sequentially, must be slow!

The builds themselves are actually very fast thanks to Turborepo's remote caching abilities but the deployments are slow. Currently this runs in ~5 mins…

Conclusion

I'm aware that this solution may not be optimal. I could use matrices within Github Actions to parallelise the deployments. I could use turbo-ignore to only deploy the changed packages… but right now I don't much care. This is good enough for now! However, in a few months time, as 7 turns to 17, there might be a follow up to this post showing a much improved version and some snide comments about how stupid past-Jamie was. So stick around for that 👋

DEV Community: Jamie

Stop Copy-Pasting Legal Pages Into Your Next.js App

Install

Define your privacy policy

Define your terms of service

Add a generate script to package.json

What gets generated

Render on dedicated routes

Why this is better than a static page

Ship a Privacy Policy and Terms of Service with Your Astro Site

Install

Add the integration to astro.config.mjs

Define your privacy policy

Define your terms of service

What gets generated

Render on a dedicated page

Why this is better than a static page

5 Best Note-Taking Apps 📝

1. Notion

2. Reflect

3. Evernote

4. Bear Notes

5. Miro

6.Dea

Dea Changelog #1

🌱 New Logo

🔄 Organisation Made Effortless

🌐 Share Your Work with a Public Profile

✍️ Enhanced Text Editing with a Notion-Style Experience

🚀 Launching on Uneed Tomorrow!

Developers, what projects are you currently working on? 💻

Recently we've launched:

What are we working on now?

5 Must-Know Communities for Developers

1. Dev.to

Why You Should Join

2. Peerlist.io

Why You Should Join

3. Work in Progress (WIP)

Why You Should Join

4. X Communities: Web Developers & Software Engineering

Why You Should Join

5. Reddit Communities

Check out:

Why You Should Join

6. Dea

Conclusion

Happy coding!

How do you split your time between building and marketing?

AI Form Validation

Background

Implementation

When should I use AI?

Best practices

Conclusion

App developers, where do you find inspiration for your next app ideas?💡

Unleash Your App's Potential with SCAMPER

What is SCAMPER?

Using SCAMPER for App Innovation

Integrating Mind Mapping and Design Thinking

You Can Do It

Fixing my deployment mistakes

Problems

Brain dump

Recap

Matrices

turbo-ignore

Conclusion

Deploying many apps from a single monorepo

Problem

Implementation

Performance

Why not run every single build in parallel?

Running build n+1 times, sequentially, must be slow!

Conclusion

Add a generate script to `package.json`

Add the integration to `astro.config.mjs`

`turbo-ignore`