OSJKit

A comprehensive template generator for React applications supporting both web and desktop platforms.

Overview

OSJKit is an npm package that provides ready-to-use templates for creating modern React applications. It supports both web applications and desktop applications (using Tauri), with options for JavaScript or TypeScript.

Features

• 🚀 Quick Setup - Generate complete applications with a single command
• 🌐 Web Applications - React + Vite + CSS Modules
• 🖥️ Desktop Applications - React + Vite + Tauri for native performance
• 📱 Mobile Responsive - All templates are fully responsive
• 🧪 Testing Ready - Pre-configured with Vitest and Testing Library
• 🎨 CSS Modules - Organized CSS architecture using CSS Modules methodology
• 🔧 TypeScript Support - Optional TypeScript support for both platforms
• ⚡️ Modern Tooling - Latest versions of React, Vite, and other tools

Installation

You can use OSJKit without installing it globally using npx:

1npx osjkit <app-name> --web
2npx osjkit <app-name> --desktop

Or install it globally:

1npm install -g osjkit
2osjkit <app-name> --web

Usage

Create a Web Application

1# JavaScript (default)
2npx osjkit my-web-app --web
3
4# TypeScript
5npx osjkit my-web-app --web --typescript

Create a Desktop Application

1# JavaScript (default)
2npx osjkit my-desktop-app --desktop
3
4# TypeScript
5npx osjkit my-desktop-app --desktop --typescript

Interactive Mode

If you don't specify --web or --desktop, OSJKit will prompt you to choose:

1npx osjkit my-app
2# You'll be prompted to choose between web and desktop

What's Included

Web Applications

• React 18 with modern hooks and features
• Vite for fast development and building
• Vitest for testing with Testing Library
• ESLint for code quality
• React Router for navigation between pages
• API Integration with ready-to-use service utilities
• Sample Pages (About, Contact, API Demo) for quick customization
• CSS Modules methodology for maintainable styles
• Desktop-optimized components adapted for native app experience
• Mobile-first responsive breakpoints

Desktop Applications

Everything from web applications, plus:

• Tauri for native desktop performance
• Rust backend with sample commands
• Native window configuration
• Platform-specific builds (Windows, macOS, Linux)
• System integration capabilities

Project Structure

Web Application

my-app/
├── src/
│   ├── components/
│   │   ├── AboutPage/
│   │   │   ├── AboutPage.jsx
│   │   │   ├── AboutPage.module.css
│   │   │   └── index.js
│   │   ├── ContactPage/
│   │   │   ├── ContactPage.jsx
│   │   │   ├── ContactPage.module.css
│   │   │   └── index.js
│   │   ├── ApiDemoPage/
│   │   │   ├── ApiDemoPage.jsx
│   │   │   ├── ApiDemoPage.module.css
│   │   │   └── index.js
│   │   ├── ExampleComponent/
│   │   │   ├── ExampleComponent.jsx
│   │   │   ├── ExampleComponent.module.css
│   │   │   └── index.js
│   │   └── README.md
│   ├── utils/
│   │   └── api.js
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
│   └── App.css
├── package.json
├── vite.config.js
├── .gitignore
└── README.md

Desktop Application

my-app/
├── src/                 # React frontend
├── src-tauri/          # Rust backend
│   ├── src/
│   │   └── main.rs
│   ├── Cargo.toml
│   └── tauri.conf.json
├── package.json
├── vite.config.js
└── README.md

Available Scripts

After creating your application, you can use these scripts:

Web Applications

1npm run dev        # Start development server
2npm run build      # Build for production
3npm run preview    # Preview production build
4npm run test       # Run tests
5npm run test:ui    # Run tests with UI
6npm run lint       # Run ESLint

Desktop Applications

1npm run dev        # Start web development server
2npm run build      # Build web assets
3npm run test       # Run tests
4npm run tauri:dev  # Start desktop app in development
5npm run tauri:build # Build desktop app for distribution

CSS Architecture

All templates use CSS Modules methodology:

1/* Component.module.css */
2.header { }
3.nav { }
4.title { }
5.navOpen { }
6.buttonLarge { }

1// Component.jsx
2import styles from './Component.module.css';
3
4function Component() {
5  return (
6    <header className={styles.header}>
7      <nav className={`${styles.nav} ${isOpen ? styles.navOpen : ''}`}>
8        <h1 className={styles.title}>Title</h1>
9      </nav>
10    </header>
11  );
12}

Responsive Breakpoints

• Mobile: up to 767px
• Tablet: 768px - 1023px
• Desktop: 1024px - 1199px
• Large Desktop: 1200px and above

Prerequisites

For Web Applications

• Node.js (version 14 or higher)

For Desktop Applications

• Node.js (version 14 or higher)
• Rust (latest stable version)
• Platform-specific dependencies:
  • Windows: Microsoft C++ Build Tools
  • macOS: Xcode Command Line Tools
  • Linux: webkit2gtk development packages

TypeScript Support

Add the --typescript flag to any command to generate a TypeScript project:

1npx osjkit my-app --web --typescript
2npx osjkit my-app --desktop --typescript

This will:

• Rename .js files to .ts and .jsx files to .tsx
• Add TypeScript dependencies
• Create tsconfig.json configuration
• Update build configuration for TypeScript

Examples

Creating a Portfolio Website

1npx osjkit portfolio-site --web --typescript
2cd portfolio-site
3npm run dev

Creating a Desktop Utility App

1npx osjkit my-utility --desktop
2cd my-utility
3npm run tauri:dev

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

Development

1. Clone the repository:

   1git clone https://github.com/opensourcejay/osjkit.git
   2cd osjkit

2. Install dependencies:

   1npm install

3. Test your changes:

   1npm test
   2npm run test:cli

4. Submit a Pull Request

License

MIT License

Support

For support and questions:

• 🐛 Open an issue
• 📖 Check the documentation
• 💬 GitHub Discussions

Changelog

1.0.1

• Complete CSS Modules migration
• Added production-ready page components (About, Contact, API Demo)
• API utility service with live examples
• Enhanced component structure with reusable patterns
• Updated documentation and examples

1.0.0

• Initial release
• Web application templates with React + Vite
• Desktop application templates with React + Vite + Tauri
• TypeScript support
• CSS Modules methodology
• Mobile responsive design
• Testing setup with Vitest