jstack Webkit and Template

Demo video (Script only, no commentary):

Technology Stack

• Script development: Node.js, TypeScript, Contentful Management API

• Template structure: Next.js, Tailwind CSS, ShadCN, TypeScript

• Tooling: ESLint, Prettier, environment variable setup

• Project generation with commands like npx and optional flags such as help or link

Goal

The main goal was to simplify and speed up the process of starting a new marketing website. Previously, each project had to be set up manually which often took hours and resulted in inconsistent structures. My objective was to create a tool that could generate a ready-to-go project that included CMS integration, preconfigured styling, essential components, and the required development tools.

How the Script Works

The Webkit script is a command line tool built with Node.js and TypeScript. It guides the user through a few simple questions and then performs the entire project setup step by step.

Project Setup

After entering a project name, the script creates a new folder and sets up a Next.js project using TypeScript. It adds default configurations for ESLint, Tailwind CSS, and Prettier.

CMS Configuration

The user is prompted to enter a Contentful API token and select an organization. The script then creates a new Contentful space and automatically generates the content models. These models are based on predefined TypeScript types. It also generates an API key, saves it in a .env file, and fills the space with mock content like blog posts and testimonials.

Template Integration

The script clones the jstack template repository into the project. It copies over UI components, config files, and page structures. Once everything is in place, it installs all dependencies so the developer can immediately start the local development server and begin customizing the site.

Error Handling

One of the more complex and useful features I added was a complete rollback system. If something goes wrong during the process, the script automatically cleans up everything. It deletes the Contentful space, removes local files, and resets the folder. This prevents unfinished setups and saves a lot of frustration during development.

The Template

The template repository is the foundation for every website built with the Webkit. It includes a full structure of reusable blocks and components that can be easily customized per project.

Key Features

• Block-based layout with sections like hero, services, testimonials, blog, contact form, cookie notice, and more

• Built using Tailwind CSS and ShadCN for consistent styling and accessibility

• Integrated with Contentful using typed adapters and mock data

• Fully responsive for all screen sizes

• Organized folders for base UI and custom components

Every block in the template is reusable. For example, the hero section and testimonial section can be used across multiple websites with different content. This makes the template both flexible and scalable.

Development Process

I developed the Webkit in stages. First I created small test scripts to verify that I could create and configure a Contentful space through the API. Once this worked reliably, I combined everything into a multi-step process using shared context objects to pass data between steps.

In parallel, I built the template repository from scratch. I kept it minimal and focused on reusable structures. I created mockups, tested layout behaviors, and made sure every part worked with Contentful data.

Throughout the project I regularly tested the entire workflow by simulating new users. I started each test with an empty folder to make sure the setup process was consistent from start to finish.

What I Learned

• How to build a multi-step command line tool using Node.js

• Working with API authentication and external services like Contentful

• Writing clean and modular code for configuration and setup tasks

• Building a scalable design system with Tailwind and ShadCN

• Structuring code for reusability and developer experience

• Implementing rollback and error recovery logic

This project also taught me to think beyond a single website. I was building tools for other developers, and that meant I had to consider flexibility, edge cases, and long-term maintenance.

Result

The jstack Webkit and its template are now used to start new marketing websites across the company. Instead of manually copying files and configuring tools, developers can now generate a fully working site in minutes. This saves time, ensures consistency, and reduces the chance of mistakes.

For me, this was the most technical and most impactful project of my internship. It combined scripting, UI development, CMS knowledge, and developer tooling into one complete product.