Contributing to Mizen

​

Welcome Contributors

​

Getting Started

​

Prerequisites

• Node.js (version 20 or higher recommended)
• npm package manager
• Git for version control
• Basic knowledge of TypeScript and React

​

Setting Up Your Development Environment

1. Clone the repository
2. Install dependencies:
   npm install
   
3. Set up your environment variables (.env.local)
4. Start the development server:
   npm run dev
   

​

Development Workflow

​

Making Changes

1. Start Small: Prefer smaller, incremental changes over large rewrites
2. Test Your Changes: Run the development server and test thoroughly
3. Run Linting: Before committing, ensure your code passes linting:
   npm run lint
   
   Or automatically fix issues:
   npm run lint:fix
   

​

Available Scripts

• npm run dev — Start development server
• npm run build — Create production build
• npm run start — Start production server
• npm run lint — Run ESLint to check code quality
• npm run lint:fix — Automatically fix linting issues
• npm run docker:build — Build Docker image
• npm run docker:run — Run Docker container

​

Code Review Process

​

Documentation Updates

• New features or functionality
• Breaking changes
• Non-obvious logic or implementation details
• Changes to the README or other markdown files

​

Communication Guidelines

​

User Context

• Primary Audience: Product designers with limited coding experience
• Communication Style: Clear, step-by-step explanations
• Visual Signals: Use clear indicators (⚠️ 🛑 ⏸️ 📋 ✅) where appropriate

​

Commit Messages

• What changed
• Why the change was necessary

Improved checkbox styling to filled style

Updated checkbox component to use filled style for better visual consistency
with the overall design system.

​

Project-Specific Guidelines

​

TypeScript Requirements

• Use strict types throughout the codebase
• Avoid using any type
• Define interfaces for complex data structures
• See Code Style Guidelines for more details

​

React Conventions

• Use functional components only (no class components)
• Utilize React hooks for state management and side effects
• Implement Error Boundaries for async operations and error handling

​

UI Development

• When modifying components under components/ui/, review and update src/app/globals.css as needed
• Use Solar Icons exclusively (prefer filled variants)
• Styling uses CSS Modules and Tailwind CSS
• For dropdowns/popovers, use modal={false} to avoid scroll lock

​

Getting Help

• Review the Code Style Guidelines
• Check the Changelog for recent updates
• Refer to project documentation in the repository

​

Recognition