Tick-Tock is a modern time logging application that transforms the way developers track their work. Instead of complex time tracking interfaces, simply write natural language messages and let our intelligent system create structured time logs automatically.
Built with modern React 19 and TypeScript, powered by TanStack ecosystem for optimal performance and developer experience.
🚀 Key Innovation: Write time logs like journal entries, automatically sync with Jira, and manage everything through an intuitive calendar dashboard.
Transform simple messages like "Worked on XYZ-1111 for 3 hours implementing authentication, had 1 hour meeting with team about XYZ-2222 planning" into structured time entries automatically.
- Smart Status Indicators: Orange (needs logging), Blue (draft entries), Green (completed)
- Quick Navigation: Click any day to view or edit time logs
- Monthly Overview: Clear visualization of your logging progress
- Review Before Commit: All logs start as drafts for your review
- Intelligent Refinement: Request changes in natural language
- One-Click Sync: Ship approved logs directly to Jira
- Direct API Integration: Real-time synchronization with Jira time tracking
- Task Validation: Automatic verification of Jira task IDs
- Error Handling: Robust retry logic and user feedback
- React 19 Features: Actions, useActionState, and concurrent rendering
- Responsive Design: Perfect on desktop, tablet, and mobile
- Dark Mode Support: Automatic theme switching
- Accessibility First: WCAG 2.1 AA compliant
Get Tick-Tock running locally in minutes:
- Node.js 20+ (required for optimal performance)
- npm or yarn
- Jira instance with API access (for production use)
- Clone the repository:
git clone https://github.com/IgorWnek/tick-tock-frontend.git
cd tick-tock-frontend- Install dependencies:
npm install- Set up environment variables:
cp .env.dist .env.local- Start the development server:
npm start- Open your browser and navigate to http://localhost:3000
🎉 You're ready to start logging time! The app runs with MSW (Mock Service Worker) by default, so you can test all features without a backend.
For production deployment, configure these environment variables in .env.local:
VITE_API_BASE_URL- Your backend API endpointVITE_JIRA_BASE_URL- Your Jira instance URLVITE_SENTRY_DSN- Error monitoring (optional)
npm run [command]start- Launch development server with hot reloading on http://localhost:3000typecheck- Run TypeScript type checking without emitting filestest- Run unit tests with Vitestcoverage- Generate test coverage report
build- Create optimized production build (includes TypeScript check)build:ci- Production build optimized for CI/CD pipelinesbuild:analyze- Build with bundle analysis visualizationpreview- Preview production build locally
lint- Validate code with ESLint and Stylelintlint:fix- Auto-fix linting issues where possible
e2e- Run end-to-end tests (default browser)e2e:firefox- Run E2E tests in Firefoxe2e:chrome- Run E2E tests in Chromee2e:safari- Run E2E tests in Safarie2e:debug- Run E2E tests in debug mode
plop- Interactive code generation CLItranslations- Fetch latest translations using Babelsheet
Tick-Tock is built with modern, battle-tested technologies:
- React 19 - Latest React with Actions, useActionState, and concurrent features
- TypeScript 5.9 - Full type safety and modern JavaScript features
- Vite 5 - Lightning-fast build tool and development server
- TanStack Router - Type-safe routing with built-in data fetching
- TanStack Query 5 - Powerful server state management with caching
- TanStack Form - Performant, headless form state management
- TailwindCSS 4 - Utility-first CSS framework with modern features
- Shadcn/UI - Beautiful, accessible components built on Radix UI
- Lucide React - Modern icon library with 1000+ icons
- Vitest - Fast unit testing with native ESM support
- Testing Library - Simple and complete testing utilities
- MSW - API mocking for development and testing
- Playwright - Reliable end-to-end testing
- ESLint - Code linting with React 19 and TypeScript rules
- Prettier - Consistent code formatting
- Husky - Git hooks for quality enforcement
- Technology Stack - Detailed overview of all technologies used
- Application Structure - Code organization and architecture
- TanStack Query Integration - Data fetching patterns
- Code Generation - Using Plop for rapid development
- E2E Testing - End-to-end testing setup and patterns
- MVP Documentation - Complete feature specifications and user flows
- Shadcn/UI Integration - UI component library setup
- Development Workflow - Complete development guide
- Dashboard View: See your time logging status at a glance
- Natural Input: Write "Worked on XYZ-123 for 3 hours fixing bugs"
- AI Processing: System creates structured time entries automatically
- Review & Refine: Check drafts, request changes if needed
- One-Click Sync: Ship approved logs directly to Jira
We welcome contributions! Please see our Contributing Guide for details on:
- Code style and standards
- Development workflow
- Pull request process
- Issue reporting
This project is licensed under the MIT License - see the LICENSE file for details.
- AI-Powered Parsing: Enhanced natural language understanding
- Team Collaboration: Shared time tracking and reporting
- Mobile App: Native iOS and Android applications
- Analytics Dashboard: Advanced reporting and insights
Built with ❤️ by Igor Wnek • Project Repository
Check out the IKcode GitHub profile which contains most of the code related to my YouTube episodes: IKcode