Thanks to visit codestin.com
Credit goes to github.com

Skip to content

devil-imps/devil-web

devil WEB - API Client

A Progressive Web App (PWA) client for managing devil API services, built with SvelteKit, TypeScript, and Tailwind CSS v4.

Getting Started

Prerequisites

  • Node.js 20+
  • pnpm (recommended) or npm
  • A devil API v0.3.0 service available and accessible

Installation

  1. Clone the repository:
git clone https://github.com/devil-imps/devil-web.git
cd devil-web
  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev
  1. Open your browser and navigate to http://localhost:5173

Building for Production

pnpm build

The built application will be in the build directory, ready for deployment as a static site.

Configuration

Environment Variables

  • BASE_PATH: Base path for GitHub Pages deployment (e.g., /devil-web)

PWA Configuration

The PWA manifest is located at static/manifest.json. You can customize:

Development

Code Quality

  • TypeScript: Full type safety throughout the application
  • ESLint: Code linting with TypeScript support
  • Prettier: Code formatting

Build Commands

# Development
pnpm dev          # Start development server
pnpm check        # TypeScript checking
pnpm check:watch  # TypeScript checking in watch mode

# Quality checks
pnpm lint         # ESLint checking
pnpm format       # Prettier formatting

# Production
pnpm build        # Build for production
pnpm preview      # Preview production build locally

Adding New Features

  1. Components: Add new Svelte components in src/lib/components/
  2. Services: Add business logic in src/lib/services/
  3. Stores: Manage state in src/lib/stores/
  4. Routes: Create new routes in src/routes/ using SvelteKit conventions
  5. Styling: Use Tailwind CSS v4 classes with PostCSS configuration

Architecture Patterns

  • State Management: Svelte stores for global state (appState, theme)
  • API Integration: Custom utility functions (apiGet, apiPost, etc.)
  • Component Communication: Event dispatcher pattern for parent-child communication
  • Modal System: Reusable modal components with confirmation patterns
  • Navigation: Custom navigateTo() utility for base path-aware routing

Technology Stack

  • Framework: SvelteKit with static adapter for PWA deployment
  • Language: TypeScript with strict type checking
  • Styling: Tailwind CSS v4 (via PostCSS plugin)
  • Package Manager: pnpm (recommended)
  • Deployment: Static site generation for GitHub Pages compatibility
  • State Management: Svelte stores with reactive patterns
  • API Integration: Custom utility functions with Bearer token authentication

Browser Support

  • Chrome/Edge 88+
  • Firefox 78+
  • Safari 14+
  • Mobile browsers with PWA support

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request.

License

This project is licensed under the GNU AFFERO GENERAL PUBLIC LICENSE. See the LICENSE file for details.

About

PWA WEB client for managing devil API, built with SvelteKit, TypeScript, and Tailwind CSS

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks