Commit

Inspiration

Remote and hybrid teams struggle with accountability and alignment. We've all experienced the frustration of unclear commitments, missed deadlines, and team members who disappear when help is needed. Commit was inspired by the need for a lightweight accountability system that makes team expectations transparent and trackable without the overhead of complex project management tools.

What it does

Commit is a team accountability platform that helps teams stay aligned through three core features:

Team Agreements: Create and sign shared commitments about work hours, availability, communication norms, and team values. Every team member can see who's signed and who hasn't.
Deliverables Roadmap: Track milestones and project deadlines with clear ownership and progress visibility. No more wondering who's responsible for what.
Status Updates: Team members post regular updates on what they're working on, creating transparency and making it easy to spot when someone needs help.
Smart Notifications: Get alerted when teammates need help, deadlines are approaching, or new agreements need signing.

The platform creates social accountability by making commitments, progress, and contributions visible to the entire team.

How we built it

Frontend: Next.js 14 with TypeScript and Tailwind CSS for a modern, responsive interface
UI Components: Built custom modals, notification system, and interactive dashboards from scratch
State Management: React hooks for managing application state and user interactions
Icons: Lucide React for consistent iconography throughout the app
Design Philosophy: Clean, professional interface that prioritizes clarity and ease of use

Challenges we ran into

Notification System UX: Designing a notification center that clearly categorizes different types of alerts (help requests, deadlines, agreements) without overwhelming users
Visual Hierarchy: Creating layouts that balance information density with readability - showing enough detail without cluttering the interface
CSS Layout Issues: Fighting flex layouts to make notification icon backgrounds display correctly (they initially stretched across the full height instead of just wrapping the icon)
State Synchronization: Ensuring that actions like signing agreements or marking notifications as read properly updated across multiple components

Accomplishments that we're proud of

Created a fully functional prototype in the hackathon timeframe with multiple interconnected features
Designed an intuitive UX that makes accountability feel natural rather than punitive
Built a beautiful, polished interface that looks and feels professional
Implemented real-time visual feedback (unread counts, status badges, progress bars) that makes the system feel alive
Created a modular component architecture that makes the codebase easy to extend

What we learned

How to balance feature richness with simplicity - accountability tools can easily become surveillance systems if not designed thoughtfully
The importance of visual feedback in collaborative tools - users need to see that their actions have impact
CSS flexbox edge cases and how items-start can save you from stretched backgrounds
How to structure Next.js applications for rapid prototyping while maintaining clean code
The power of TypeScript for catching bugs early in React applications

What's next for Commit

Real-time Collaboration: Add WebSocket support so teams can see live updates when agreements are signed or deliverables are completed
Analytics Dashboard: Expand the analytics page to show team accountability metrics, response times to help requests, and on-time delivery rates
Integration System: Connect with Slack, GitHub, and Linear to automatically create deliverables from issues and send notifications where teams already work
Mobile App: Build native mobile apps so team members can post status updates and respond to help requests on the go
AI-Powered Insights: Use Claude to analyze team communication patterns and suggest when agreements might need updating or when someone might be struggling
Customizable Workflows: Let teams define their own agreement templates and deliverable types to match their specific needs