Unbroken Svelte Themes

Unbroken

UNBROKEN šŸ‹ļøā€ā™‚ļø - A modern app for tracking strength training šŸ’Ŗ, cardio workouts šŸƒā€ā™€ļø, and training blocks šŸ“… following the Tactical Barbell methodology. Built with TypeScript and Vite, ready for deployment on Cloudflare Pages ā˜ļø

image

Unbroken

Tactical Barbell Tracker - A modern SvelteKit application for tracking strength training, cardio workouts, and training blocks following the Tactical Barbell methodology. Built with TypeScript, featuring a comprehensive REST API and server-side rendering, ready for deployment on Cloudflare Pages.

šŸ“‹ Features

  • Training Block Management: Organize workouts into structured training blocks (Endurance, Powerbuilding, Strength, Bodybuilding)
  • Comprehensive Workout Tracking: Support for strength, hypertrophy, LISS cardio, HIIT, rest, and deload workouts
  • Exercise Database: Track 1RM and 10RM personal records with automatic weight calculations
  • Smart Warm-up Sets: Automatically calculated warm-up progressions for strength workouts
  • Rest Timer: Built-in timer with notifications and extend options
  • Workout History: Complete tracking of all completed workouts
  • Drag & Drop Planning: Reorder training blocks with intuitive drag-and-drop interface
  • Responsive Design: Works seamlessly on desktop and mobile devices

šŸš€ Quick Start

Prerequisites

  • Node.js 18.0.0 or higher
  • npm (comes with Node.js)

Development

  1. Clone the repository:

    git clone https://github.com/Bruno-366/Unbroken.git
    cd Unbroken
    
  2. Install dependencies:

    npm install
    
  3. Start the development server:

    npm run dev
    
  4. Open your browser and navigate to http://localhost:5173

šŸ“ Available Scripts

  • npm run dev - Start SvelteKit development server with hot module replacement
  • npm run build - Build for production (includes SSR bundle generation)
  • npm run preview - Preview production build locally
  • npm run sync - Sync SvelteKit generated files
  • npm run lint - Run ESLint with Svelte support
  • npm run lint:fix - Run ESLint with auto-fix
  • npm run type-check - Run SvelteKit sync and Svelte type checking

šŸ—ļø Tech Stack

  • SvelteKit - Full-stack web framework with server-side rendering and API routes
  • Svelte 5 - Modern reactive framework with runes for state management
  • TypeScript - Type safety and enhanced developer experience
  • Vite - Build tool and dev server with hot module replacement
  • Tailwind CSS - Utility-first CSS framework for responsive design
  • ESLint v9 - Code linting with flat config structure
  • Cloudflare Adapter - Deployment as Cloudflare Workers with assets binding
  • REST API - Comprehensive API endpoints for workout management
  • Tactical Barbell Methodology - Structured training approach for strength and conditioning

🌐 Deployment on Cloudflare Pages

  1. Connect Repository to Cloudflare Pages:

    • Go to Cloudflare Pages
    • Click "Create a project"
    • Connect your GitHub account
    • Select the Bruno-366/Unbroken repository
  2. Configure Build Settings:

    • Framework preset: SvelteKit (or None if SvelteKit is not available)
    • Build command: npm run build
    • Build output directory: .svelte-kit/output/client
    • Root directory: / (leave empty)
    • Node.js version: 18 or higher
  3. Environment Variables (if needed):

    • Go to Settings > Environment variables
    • Add any required environment variables
  4. Deploy:

    • Click "Save and Deploy"
    • Your site will be built and deployed automatically
    • Future pushes to the main branch will trigger automatic deployments

Manual Deployment

  1. Build the project locally:

    npm run build
    
  2. Upload the .svelte-kit/output/client folder contents to Cloudflare Pages using:

    • Cloudflare Pages dashboard (drag and drop)
    • Wrangler CLI: npx wrangler pages deploy .svelte-kit/output/client

Custom Domain

  1. In Cloudflare Pages dashboard, go to your project
  2. Navigate to "Custom domains"
  3. Add your domain and follow DNS configuration instructions

šŸ”§ Project Structure

Unbroken/
ā”œā”€ā”€ static/                       # Static assets (icons, favicons)
ā”œā”€ā”€ src/                          # Source code
│   ā”œā”€ā”€ routes/                   # SvelteKit file-based routing
│   │   ā”œā”€ā”€ +layout.svelte           # Main layout with navigation
│   │   ā”œā”€ā”€ +layout.ts               # Layout data loading
│   │   ā”œā”€ā”€ +page.svelte             # Overview page (home)
│   │   ā”œā”€ā”€ api/                     # REST API endpoints
│   │   │   ā”œā”€ā”€ exercises/               # Exercise management endpoints
│   │   │   ā”œā”€ā”€ training-blocks/         # Training block endpoints
│   │   │   ā”œā”€ā”€ training-plan/           # Training plan endpoints
│   │   │   ā”œā”€ā”€ workout/                 # Workout state and completion endpoints
│   │   │   └── history/                 # Workout history endpoints
│   │   ā”œā”€ā”€ workout/                 # Workout page
│   │   │   ā”œā”€ā”€ +page.svelte             # Strength/cardio workout interface
│   │   │   └── +page.ts                 # Workout page data loading
│   │   ā”œā”€ā”€ history/                 # History page
│   │   │   └── +page.svelte             # Workout history display
│   │   └── settings/                # Settings page
│   │       └── +page.svelte             # Exercise database and training plan management
│   ā”œā”€ā”€ lib/                      # Shared library code (SvelteKit convention)
│   │   ā”œā”€ā”€ blockTemplates.ts        # Training block templates and configurations
│   │   ā”œā”€ā”€ stores.ts                # Client-side reactive stores
│   │   ā”œā”€ā”€ types.ts                 # Centralized TypeScript interfaces
│   │   └── utils.ts                 # Shared utility functions (weight calculations, notifications)
│   ā”œā”€ā”€ app.html                  # HTML template with PWA meta tags
│   ā”œā”€ā”€ app.d.ts                  # SvelteKit app type definitions
│   └── app.css                   # Global styles with Tailwind CSS
ā”œā”€ā”€ .github/                      # GitHub Actions workflows
ā”œā”€ā”€ .svelte-kit/                  # SvelteKit generated files (git ignored)
ā”œā”€ā”€ eslint.config.js              # ESLint v9 flat configuration
ā”œā”€ā”€ package.json                  # Dependencies and scripts
ā”œā”€ā”€ tsconfig.json                 # TypeScript configuration
ā”œā”€ā”€ vite.config.ts                # Vite configuration with SvelteKit
ā”œā”€ā”€ wrangler.jsonc                # Cloudflare Pages configuration
ā”œā”€ā”€ tailwind.config.js            # Tailwind CSS configuration
ā”œā”€ā”€ postcss.config.js             # PostCSS configuration
└── svelte.config.js              # Svelte and SvelteKit configuration

Component Architecture

The application has been built with SvelteKit's full-stack architecture and Svelte 5's modern reactive patterns:

  • SvelteKit Framework: File-based routing with dedicated pages for each section
  • REST API: Comprehensive server-side API endpoints for all data operations
  • Server-Side Rendering: Optimized initial page loads with SSR capabilities
  • Reactive State Management: Svelte 5 runes ($state, $derived, $effect) with client-side stores
  • Type Safety: Comprehensive TypeScript interfaces shared between client and server
  • Modular Architecture: Clear separation between routes, API endpoints, and shared utilities
  • Progressive Enhancement: Works with and without JavaScript enabled

🚨 CI/CD

The repository includes GitHub Actions workflow that runs on every push and pull request:

  • Linting: ESLint v9 checks for code quality (Svelte components and TypeScript)
  • Type Checking: SvelteKit sync and Svelte type checking validates components and TypeScript
  • Build: Ensures the project builds successfully with SSR bundle generation
  • Artifact Upload: Stores build output for review

šŸ› ļø Customization

Styling

  • Built with Tailwind CSS for rapid UI development
  • Utility-first approach with responsive design support
  • Dark mode support included out of the box
  • Modify src/index.css to customize Tailwind configuration
  • Use Tailwind classes directly in your components for styling
  • Custom CSS can be added to src/index.css if needed

Additional Dependencies

# Example: Add a UI library (compatible with Tailwind and SvelteKit)
npm install @floating-ui/dom

# Example: Add form handling and validation for SvelteKit
npm install @sveltejs/enhanced:$form

# Example: Add database integration
npm install drizzle-orm @libsql/client

# Example: Add authentication
npm install @auth/sveltekit

# Example: Add date/time utilities
npm install date-fns

# Example: Add additional SvelteKit adapters
npm install @sveltejs/adapter-vercel @sveltejs/adapter-netlify

Tailwind CSS Customization

  • Modify tailwind.config.js to extend the theme, add custom colors, or configure plugins
  • Add custom utilities or components in src/app.css
  • Use Tailwind IntelliSense extension in VS Code for better development experience
  • SvelteKit pages and components work seamlessly with Tailwind's utility classes

Environment Variables

Create .env files for different environments:

  • .env - Environment variables for all environments
  • .env.local - Local development (git ignored)
  • .env.production - Production builds

šŸ“š Resources

šŸ¤ Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Make your changes
  4. Run tests: npm run lint && npm run type-check && npm run build
  5. Commit your changes: git commit -m 'Add feature'
  6. Push to the branch: git push origin feature-name
  7. Submit a pull request

šŸ“„ License

This project is open source and available under the MIT License.

Top categories

Loading Svelte Themes