fe-base-react-template

Fe-Base

A modern, production-ready React application template with TypeScript, Vite, and comprehensive tooling.

Quick Start

Create a new React project with Fe-Base in seconds:

# Using npx (recommended)
npx fe-base-react-template my-project

# Using npm
npm create fe-base-react-template my-project

# Using yarn
yarn create fe-base-react-template my-project

# Using pnpm
pnpm create fe-base-react-template my-project

Then start developing:

cd my-project
npm install
npm run dev

Prerequisites

• Node.js: Version 20+ (20.x, 22+ all supported)
• Package Manager: npm, yarn, or pnpm

Note: This template requires Node.js 20+ for react-router-dom v7 and other modern packages. Use nvm install 20 if you need to upgrade.

Features

• ⚡ Vite - Lightning fast build tool with hot reload
• ⚛️ React 19 - Latest React with modern features
• 🔷 TypeScript - Full type safety and enhanced DX
• 🎨 SCSS - Enhanced styling with CSS modules
• 🧪 Vitest - Fast and modern testing framework
• 📏 ESLint + Prettier - Code quality and formatting
• 🔄 React Query - Powerful server state management
• 🐻 Zustand - Lightweight client state management
• 🎭 Framer Motion - Beautiful animations and transitions
• 🎯 React Aria - Accessible component primitives
• 🐳 Docker - Complete containerization support

What's Included

🏗️ Modern Development Stack

• Vite for ultra-fast development and building
• TypeScript with strict configuration
• React 19 with latest features and hooks
• SCSS with CSS modules for scoped styling

🧪 Testing & Quality

• Vitest for unit and integration testing
• ESLint with React and TypeScript rules
• Prettier for consistent code formatting
• Pre-configured test utilities and setup

🎨 UI & Components

• Pre-built component library with common components
• React Aria for accessibility-first components
• Framer Motion for smooth animations
• Responsive design patterns and utilities

🔄 State Management

• React Query for server state and caching
• Zustand for client-side state management
• Pre-configured stores and patterns

🐳 Production Ready

• Docker support with multi-stage builds
• GitHub Actions CI/CD workflows
• Production optimization and bundling
• Environment configuration management

Project Structure

my-project/
├── src/
│   ├── components/         # Reusable UI components
│   ├── pages/             # Application pages/routes
│   ├── hooks/             # Custom React hooks
│   ├── stores/            # State management
│   ├── styles/            # Global styles and themes
│   ├── utils/             # Utility functions
│   └── config/            # App configuration
├── public/                # Static assets
├── scripts/               # Build and utility scripts
├── Dockerfile             # Container configuration
├── docker-compose.yml     # Development containers
└── vite.config.ts         # Vite configuration

Available Scripts

In your generated project, you can run:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run test - Run tests
• npm run lint - Lint code
• npm run type-check - Run TypeScript checks

Docker Support

The template includes complete Docker support:

# Development with hot reload
docker-compose up dev

# Production build
docker-compose up --build

# Or build manually
docker build -t my-app .
docker run -p 3000:80 my-app

Customization

Fe-Base is designed to be easily customizable:

🎨 Styling

• Modify design tokens in src/styles/design-tokens.scss
• Update theme configuration
• Customize component styles

🔧 Configuration

• Update vite.config.ts for build settings
• Modify tsconfig.json for TypeScript options
• Customize ESLint rules in eslint.config.js

📦 Dependencies

• Add new packages with npm install
• Update existing packages with npm update
• Remove unused dependencies

CLI Options

# Show help
npx fe-base-react-template --help

# Show version
npx fe-base-react-template --version

# Create project with specific name
npx fe-base-react-template my-awesome-app

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

• Clone the repository:

  git clone https://github.com/ThriledLokki983/fe-base.git
  cd fe-base
  

• Install dependencies:

  npm install
  

• Test the CLI locally:

  npm run test:cli
  

• Build the package:

  npm run build:package
  

• Test template generation:

  npm run dev:template
  

Publishing

This package is automatically published to npm when a new tag is pushed:

# Create and push a new version
npm version patch  # or minor, major
git push origin main --tags

License

MIT © Gideon Nimoh

Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Built with ❤️ by the Fe-Base team