@tomalin/designertoolbox

Designer Tool

A modern component library and design system platform built with Next.js, React, and TypeScript.

Overview

Designer Tool is a comprehensive design system and component library that allows you to create, customize, and export beautiful UI components for your projects. It includes a visual component playground, customizable hero sections, cards, buttons, and much more.

Features

• 🎨 50+ Pre-built Components - Ready-to-use components for various use cases
• ✨ Live Component Playground - Real-time component customization and preview
• 🎯 Responsive Design - Mobile-first approach with full responsiveness
• 🌈 Dark Mode Support - Built-in dark mode toggle
• 📦 Code Export - Export components as code snippets
• 🔐 User Accounts - Authentication and user-specific features
• 💳 Payment Integration - Stripe integration for premium features
• 📱 Mobile Optimized - Perfect for all screen sizes

Tech Stack

• Frontend: Next.js 14+, React 18+, TypeScript
• Styling: Tailwind CSS, CSS-in-JS
• Authentication: Supabase
• Payments: Stripe
• Hosting: Vercel
• Database: PostgreSQL (via Supabase)

Quick Start

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Git

Installation

• Clone the repository:

git clone https://github.com/Tomalin18/designertool.git
cd designertool

• Install dependencies:

npm install

• Set up environment variables:

cp .env.example .env.local

• Run the development server:

npm run dev

• Open http://localhost:3000

Project Structure

designertool/
├── app/                    # Next.js app directory
├── components/             # React components
│   ├── customize/         # Customizable UI sections
│   ├── ui/                # Reusable UI primitives
│   └── playground/        # Component playground
├── docs/                  # Documentation
├── lib/                   # Utilities and helpers
├── contexts/              # React contexts
├── hooks/                 # Custom hooks
└── public/                # Static assets

Git Workflow

This project uses a three-branch strategy:

feature/* → dev (test) → release (verify) → stable (production)

Workflow Steps

• Create feature branch from stable:

git checkout stable
git checkout -b feature/your-feature

• Develop and push:

git add .
git commit -m "feat: your changes"
git push origin feature/your-feature

• Create PR: feature/your-feature → dev
• After testing, create PR: dev → release
• After verification, create PR: release → stable

For detailed instructions, see docs/GIT_WORKFLOW.md and docs/BRANCH_WORKFLOW.md

Deployment

Deployed to Vercel with automatic deployments:

• Production (release branch)
• Dev Environment (dev branch)
• Stable Reference (stable branch)

Available Scripts

npm run dev              # Development server
npm run build            # Build for production
npm run start            # Start production server
npm run lint             # Run linter
npm run type-check      # TypeScript check

Documentation

• 📖 Git Workflow Guide - Detailed workflow instructions
• 🔀 Branch Workflow Quick Reference - Quick guide and FAQ
• 🛡️ GitHub Branch Protection Setup - Protection rules
• ✅ Branch Setup Summary - Setup overview

Environment Variables

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret

Commit Convention

Follow Conventional Commits:

feat(scope): description
fix(scope): description
docs: description

Contributing

• Follow the Git workflow above
• Create meaningful commits
• Create Pull Requests with clear descriptions
• Code goes through: dev → release → stable

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

License

[Your License]

Contact

• GitHub: Tomalin18
• Issues: GitHub Issues
• Mail: Tomalin

Last Updated: December 5, 2025