Heavily opinionated React UI project template.

Actual template code is maintained and downloaded from https://github.com/Xmaxer/baselinecode-ui-project-template

Creates a React UI project with:

• Vite
• Vite TS paths
• TypeScript
• React 19
• ESLint
• Prettier
• Vitest setup
• i18n setup (react-i18next)
• GraphQL Relay client and setup (including persisted queries)
• GraphQL Codegen (AST)
• TanStack Router (with lazy loading)
• Husky pre-commit hooks
• Node 24 (Not configurable atm)

Usage

npx @baselinecode/ui-project -n my-app -g https://api.example.com/graphql -w wss://api.example.com/graphql

Options

• -n, --name <string>: The name of the project (required)
• -g, --graphqlUrl <string>: The HTTP endpoint of the GraphQL API (required)
• -w, --graphqlWsUrl <string>: The WebSocket endpoint of the GraphQL API (required)

What's Included

Core Technologies

• Vite: Fast build tool and dev server
• TypeScript: Type-safe JavaScript
• React 19: Latest React with modern features
• TanStack Router: Type-safe routing with lazy loading

GraphQL

• Relay: Facebook's GraphQL client with normalized cache
• Persisted Queries: Optimized query execution
• GraphQL Codegen: Generate TypeScript types from schema
• WebSocket Support: Real-time subscriptions

Developer Experience

• ESLint: Code linting with strict rules
• Prettier: Code formatting
• Husky: Git hooks for pre-commit checks
• Vitest: Fast unit testing
• i18next: Internationalization support

Code Quality

• No any types allowed
• Strict TypeScript configuration
• Enforced code formatting
• Pre-commit hooks for quality checks
• Relative imports restricted (use path aliases)

Post-Installation

After creating your project:

1. Update .env with your actual API endpoints
2. Run npm run graphql:generate to fetch and generate GraphQL schema
3. Run npm run relay to compile Relay queries
4. Start development with npm start

Available Scripts

• npm start: Start development server
• npm run build: Build for production
• npm run test: Run tests
• npm run lint: Lint and fix code
• npm run prettier: Format code
• npm run typescript:check: Type check
• npm run graphql:generate: Generate GraphQL schema
• npm run relay: Compile Relay queries
• npm run translations: Extract translation keys

License

MIT