Skip to content

README.md

Latest commit

 

History

History
167 lines (121 loc) · 6.54 KB

README.md

File metadata and controls

167 lines (121 loc) · 6.54 KB

React Web Application Template

GitHub Actions Main Storybook

A modern, production-ready React web application template designed to jumpstart your next project with industry best practices, comprehensive tooling, and a robust development workflow.

🚀 Demo

Experience the template in action:

✨ Key Features

This template provides a complete modern web development stack with everything you need to build scalable applications:

🏗️ Core Technologies

  • React 19 - Latest React with concurrent features and improved performance
  • TypeScript - Type-safe JavaScript for better developer experience and fewer runtime errors
  • Vite - Lightning-fast development server and optimized production builds
  • Turborepo - High-performance monorepo build system for scalable development

🎨 Styling & UI

  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • DaisyUI - Beautiful, semantic component library built on Tailwind
  • Responsive Design - Mobile-first approach with modern CSS Grid and Flexbox layouts

🧪 Testing & Quality Assurance

  • Vitest - Fast unit and integration testing with hot reload
  • Playwright - Reliable end-to-end testing across all browsers
  • Storybook Component Testing - Visual component testing and documentation
  • Code Coverage Reports - Comprehensive coverage tracking with detailed reporting

🔧 Development Tools

  • Storybook - Component development environment and documentation
  • ESLint - Advanced linting with React and TypeScript rules
  • Prettier - Consistent code formatting across the entire codebase
  • Hot Module Replacement - Instant feedback during development

🚀 DevOps & Deployment

  • GitHub Actions - Automated CI/CD pipeline with comprehensive testing
  • GitHub Pages - Seamless deployment and hosting
  • Automated Quality Gates - Build, lint, and test validation on every pull request
  • Branch Protection Rules - Enforce code quality standards before merging

🌐 Additional Integrations

  • Mock API Server - Mocks Server integration for frontend development
  • Internationalization Ready - Built-in i18n support with React Intl
  • Environment Configuration - Multi-environment setup with proper variable management
  • Performance Monitoring - Build-time performance analysis and optimization

🏃‍♂️ Quick Start

Get up and running in minutes:

Prerequisites

  • Node.js 22 or higher
  • pnpm (recommended package manager)

Installation

  1. Clone the repository

    git clone https://github.com/Pettor/template-web-app-react.git
cd template-web-app-react

  2. Enable corepack for package manager

    corepack enable

  3. Install dependencies

    pnpm install

  4. Start development server

    pnpm dev

Your application will be available at http://localhost:5173 with hot reload enabled.

Available Scripts

  • pnpm dev - Start development server
  • pnpm build - Build for production
  • pnpm test - Run unit tests
  • pnpm test:e2e - Run end-to-end tests
  • pnpm lint - Run ESLint
  • pnpm storybook - Start Storybook development server
  • pnpm deploy - Build and prepare for deployment

⚙️ Configuration

GitHub Actions Setup

Enable continuous integration and deployment:

  1. Navigate to repository Settings → Actions
  2. Enable "Allow all actions"
  3. Go to Settings → Rules and create a branch protection rule:
    • Name: Main
    • Target: Include default branch
    • Required status checks: Lint, Build, Test Components, Test E2E

GitHub Pages Deployment

Set up automatic deployment:

  1. Go to Settings → Pages
  2. Select Source: Deploy from a branch
  3. Choose Branch: deploy/main
  4. Update README links to match your repository URL

🏗️ Project Structure

├── apps/
│   └── web/                 # Main React application
├── configs/                 # Shared configs
├── packages/                # Shared packages and utilities
├── .github/
│   └── workflows/          # CI/CD pipeline definitions
├── output/                 # Build artifacts
└── storybook-static/       # Storybook build output

🔗 Related Templates

Expand your development stack:

  • .NET 8 Backend Template - Fully integrated C# backend template designed to work seamlessly with this React frontend

🤝 Contributing

We welcome contributions! Here's how to get involved:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes and add tests
  4. Run the test suite: pnpm test && pnpm test:e2e
  5. Submit a pull request with a clear description

Contribution Guidelines

  • Follow existing code style and conventions
  • Add tests for new features
  • Update documentation as needed
  • Ensure all CI checks pass

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

Ready to build something amazing? 🚀 Star this repository if you find it helpful and share it with your team!