Project Story: Gitly

Inspiration

As a developer, I’ve worked on many projects where Git commit messages were inconsistent, vague, or overloaded with unnecessary information. Over time, messy commit histories made collaboration harder, especially when trying to automate releases or track changes across teams.

I wanted to create a simple, focused tool to help developers write better commits — not through automation, but by making the structure visible and intuitive. I was inspired by the Conventional Commits specification and the idea of bringing more discipline to everyday Git usage.

The One-Shot Competition on Bolt.new was the perfect opportunity to build such a tool with clear boundaries: one prompt, no backend, and all logic in the browser.

What it does

Gitly is an offline, local-first commit message composer. It helps developers generate clean, consistent Git commit messages by guiding them through the process:

• Select a commit type (feat, fix, chore, etc.)
• Optionally enter a scope
• Write a short description with a live character counter
• Add extended details and footers (for issues, breaking changes)
• See a live, formatted preview
• Copy the result with one click

It defaults to dark mode, works on any device, and stores no data.

How we built it

I structured the prompt around core UI components: type selector, form inputs, commit preview, and copy interaction. Using Next.js and Tailwind CSS, the layout is split between the input form and a live preview panel that updates in real time.

All logic is handled client-side with React hooks (useState, useEffect). Tailwind ensures clean spacing, responsive behavior, and theme-aware styling.

Components include:

• CommitTypeSelector
• CommitForm with validation and counters
• CommitPreview (rendered using <pre> for formatting)
• ThemeToggle for dark/light switching
• CopyButton with feedback

Challenges we ran into

• Designing validation UX that stays minimal but clear
• Managing layout responsiveness while keeping a single-column experience on mobile
• Formatting the preview commit string correctly depending on optional fields like scope or footer
• Ensuring everything feels lightweight, yet polished, without a single external dependency

Accomplishments that we're proud of

• Created a working tool that solves a real problem in daily developer workflows
• Built entirely with a single prompt, no edits or backend
• Kept the experience fast, focused, and elegant
• Used nothing but React and Tailwind — no libraries, no tooling overhead

What we learned

• A clear structure (like Conventional Commits) becomes easy to follow with the right interface
• You don’t need a full app or backend to improve developer hygiene
• Prompt-first development is more effective when you think in components
• UX decisions (like preview vs. form separation) matter even in small tools

What's next for Gitly

• Add support for Emoji-based commit styles
• Enable saving frequent commit templates
• Export presets for use with commitizen or Husky
• Add guidance for writing better descriptions (e.g., use imperative mood)
• Shareable commit snippets or templates

Built With

• next.js
• tailwind
• typescript