System Design Interview Timer

A web-based timer tool to help manage system design interviews effectively. This tool allows interviewers to stay on track and ensure all important steps are covered within the allocated time.

Table of Contents

• Features
• Installation
• Usage
• Development
• Deployment
• Using the Web Interface
• Technical Details

Features

• 🚀 One-Command Setup: Launch the timer with a single command
• ⏱️ Customizable Steps: Add, edit, and remove interview steps with custom durations
• 🔄 Drag & Drop Reordering: Easily reorder steps by dragging and dropping
• 📝 Step Descriptions: Add detailed descriptions to each step
• 📊 Visual Progress: Track time with progress indicators for current step and overall interview
• 💾 Data Persistence: Saves your configuration automatically
• 📤📥 Import/Export: Save and load different interview configurations
• 🔔 Visual Alerts: Clear visual indicators when steps change
• 🛠️ Developer Friendly: Easy to customize and extend

Installation

For End Users

1. Make sure you have Node.js (v14 or higher) installed.

2. Install the tool globally using npm:

   npm install -g @eng-elias/system-design-interview-timer

   Or use npx to run it directly without installation:

   npx @eng-elias/system-design-interview-timer

For Development

1. Clone the repository:

   git clone https://github.com/eng-elias/system-design-interview-timer.git
   cd system-design-interview-timer

2. Install dependencies:

   npm install

Usage

Command Line Interface

# Start the timer (will open in default browser)
system-design-interview-timer

# Specify a custom port
system-design-interview-timer 3000

# Run without opening browser automatically
system-design-interview-timer --no-browser

# Show help
system-design-interview-timer --help

Development

Development Server

# Start development server on port 3000
npm run dev

# Or start with a custom port
PORT=4000 npm run dev

Web Interface

Once the server is running, open your browser and navigate to http://localhost:3000 (or the port you specified).

Deployment

Publishing to npm

1. Make sure you have an npm account and are logged in:

   npm login

2. Update the version in package.json following semantic versioning:

   • For bug fixes: npm version patch
   • For new features: npm version minor
   • For breaking changes: npm version major

3. Publish the package:

   # For private scoped package (recommended)
   npm publish --access private
      
   # Or use the script
   npm run publish:private
      
   # For public package (not recommended for this tool)
   # npm run publish:public

4. After publishing, push the version tag to GitHub:

   git push origin v1.0.0  # replace with the version you published
   git push origin main

Updating the Package

1. Make your changes and test them locally.
2. Update the version number:

   npm version patch  # or minor/major

3. Publish the update:

   npm run publish:private

4. Push the new version tag to GitHub.

Using the Web Interface

1. Open the Tool: The CLI will automatically open the tool in your default browser.
2. Manage Steps (Optional):
   • Add Step: Enter a name and duration (in minutes) in the input fields under "Interview Steps" and click "Add Step".
   • Edit Step: Click directly on a step's name or duration to edit it. Press Enter or click away to save.
   • Edit Description: Click the info (i) icon to reveal the description, then click the description text to edit it. Click away to save.
   • Enable/Disable Step: Click the checkbox next to a step to toggle its active state. Disabled steps will be skipped.
   • Delete Step: Click the × button next to a step to remove it.
   • Reorder Steps: Drag and drop steps in the list to change their order.
3. Configure (Optional):
   • Export Configuration: Click "Export JSON" to save your current list of steps and their settings to a file.
   • Import Configuration: Click "Import JSON" and select a previously exported JSON file to load a configuration.
   • Sound: Toggle the "Sound Notifications" checkbox to enable/disable sound alerts when a step ends (Note: A placeholder sound is used; you might need to replace alertSound.src in script.js with an actual sound file path or use a browser-based sound generation for full effect).
4. Start the Interview:
   • Click the "Start" button. The timer will begin for the first enabled step.
5. During the Interview:
   • Pause/Resume: Click the "Pause" button (which was the "Start" button) to pause the timer. Click "Resume" to continue.
   • Next Step: Click "Next Step" to manually advance to the next enabled step. The timer for the current step will end, and the next one will begin.
   • Previous Step: Click "Prev Step" to go back to the previous enabled step. The timer for the current step will pause, and the previous step's timer will be loaded (paused).
   • The current step will be highlighted, and completed steps will be visually marked.
   • A progress bar shows the time elapsed for the current step.
   • The total interview time is tracked.
6. End the Interview:
   • Click the "Stop" button to end the interview and reset the timer and steps.
   • The timer will also stop automatically after the last enabled step is completed.

Technical Details

• Technologies: HTML5, CSS3, Vanilla JavaScript (ES6+)
• Persistence: Uses browser localStorage for saving the step configuration across sessions.
• No Backend: Fully client-side application.