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):

<YouTubeEmbedurl="https://youtube.com/watch?v=..."/><VimeoEmbedurl="https://vimeo.com/..."/><LinkedInEmbedurl="https://linkedin.com/embed/..."/>>💡**ProTip:**Youcanalsousesimpleblockquotesyntaxforinfoblocks!

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.tsxexportdefaultfunctionMyCustomComponent({ children }: {children: React.ReactNode}){return(<divclassName="my-custom-styling">{children}</div>);}

2. Export it from mdx-components.tsx:

importMyCustomComponentfrom'@/components/MyCustomComponent';exportfunctionuseMDXComponents(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