Creative Tech Stack

A curated collection of posts and tools for creative coders and technologists.

Visit live site • Browse tools

---

Contributing

Whether you're just starting out or you've been doing this for years, contributions are welcome. Add a tool, write a post, or improve the codebase.

Getting started

Prerequisites

• Node.js 18+ or pnpm 10+
• Git

Installation

# Clone the repository
git clone https://github.com/jonothanhunt/creative-tech-stack.git
cd creative-tech-stack

# Install dependencies
npm install
# or
pnpm install

# Start the development server
npm run dev
# or
pnpm dev

Open http://localhost:3000 and you're good to go.

---

Adding a tool

Tools live in a TypeScript file. No database needed.

1. Open app/data/tools.ts

2. Add your tool to the tools array:

{
    "name": "Your Amazing Tool",
    "description": "What it does and why it matters.",
    "image": "/images/tools/your-tool.png", // Add your image to public/images/tools/
    "type": "Tool", // Options: Tool, Library, Platform, Framework, Engine, API, etc.
    "categories": ["Creative Coding", "Real-time 3D"], // Pick from existing categories
    "stacks": ["WebGL", "JavaScript", "3D"], // Add relevant tech tags
    "featured": false, // Set to true if it's exceptional
    "links": [
        {
            "title": "Website",
            "url": "https://yourtool.com"
        },
        {
            "title": "Docs",
            "url": "https://docs.yourtool.com"
        }
    ]
}

Tip: Check existing tools in tools.ts for reference. Keep descriptions under 150 characters.

3. Add an image (optional but recommended):

   • Place a screenshot or logo in public/images/tools/
   • Name it using kebab-case: your-tool-name.png
   • Recommended size: 1200x900px (4:3 aspect ratio)

4. Submit a pull request:

# Fork the repository on GitHub, then clone your fork
git clone https://github.com/YOUR-USERNAME/creative-tech-stack.git
cd creative-tech-stack

# Create a new branch
git checkout -b add-your-tool-name

# Make your changes, then commit
git add .
git commit -m "Add Your Tool Name"

# Push to your fork
git push origin add-your-tool-name

Then open a pull request from your fork to the main repository.

Writing a blog post

Posts are written in MDX (Markdown + React components).

1. Create a new file in posts/:

posts/my-awesome-article.mdx

Tip: Check out this example post to see how it works.

2. Add frontmatter at the top:

---
title: "My Awesome Article Title"
date: "2026-01-12"
description: "A compelling summary that appears in previews and SEO."
image: "/images/posts/my-awesome-article/hero.png"
author: "Your Name"
---

3. Write your content using Markdown:

## Introduction

Your content here...

### Subheading

More insights...

4. Use custom components (optional):

<YouTubeEmbed url="https://youtube.com/watch?v=..." />

<VimeoEmbed url="https://vimeo.com/..." />

<LinkedInEmbed url="https://linkedin.com/embed/..." />

> 💡 **Pro Tip:** You can also use simple blockquote syntax for info blocks!

5. Add images for your post:

   • Create a folder: public/images/posts/my-awesome-article/
   • Add your images there
   • Reference them: ![Alt text](/images/posts/my-awesome-article/image.png)

6. Submit a pull request

Note: MDX lets you use React components directly in Markdown. See the MDX docs for more.

Advanced: adding new MDX components

Want to create a new reusable component for posts?

1. Create the component in components/:

// components/MyCustomComponent.tsx
export default function MyCustomComponent({ children }: { children: React.ReactNode }) {
    return (
        <div className="my-custom-styling">
            {children}
        </div>
    );
}

2. Export it from mdx-components.tsx:

import MyCustomComponent from '@/components/MyCustomComponent';

export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
        ...components,
        MyCustomComponent,
    };
}

3. Use it in any MDX file:

<MyCustomComponent>
Your content here
</MyCustomComponent>

---

Project structure

creative-tech-stack/
├── app/
│   ├── data/
│   │   └── tools.ts          # Tools database
│   ├── tools/                # Tools page
│   ├── newsletter/           # Blog/newsletter pages
│   └── layout.tsx            # Root layout
├── components/               # Reusable React components
│   ├── YouTubeEmbed.tsx
│   ├── VimeoEmbed.tsx
│   ├── InfoBlock.tsx
│   └── ...
├── posts/                    # MDX blog posts
├── public/
│   └── images/
│       ├── tools/            # Tool images
│       └── posts/            # Blog post images
├── lib/                      # Utility functions
└── mdx-components.tsx        # MDX component registry

---

Tech stack

• Framework: Next.js 15 with App Router
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Content: MDX 3 for blog posts
• 3D Graphics: React Three Fiber + Three.js
• Animations: Motion
• Icons: React Icons
• Deployment: Vercel

---

Scripts

npm run dev          # Start dev server with Turbopack
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

License

MIT License - see the LICENSE file for details.

---

Get in touch

• Website: creativetechstack.dev
• GitHub: @jonothanhunt
• Issues: Report a bug or request a feature