Welcome to amazing react boilerplate 👋

Boilerplate : PWA project using vite, react, zustand, tailwindcss, vitest, playwright and more!

✨ Demo

Look a project using this boilerplate

Using

Use has template

Or fork:

Customize pages how you need!

✨ Features ✨:

• Created using vite a very fast front-end tooling

• Toasts with react-tostify

• zustand for global state management

• React query for request state management

• Base service to manage your requests

• Mocks with miragejs

• Vitest for unit tests and code coverage collect

• Playwright for E2E testing with multi-browser support

• Comprehensive testing suite (unit, component, and E2E tests)

• PWA support with offline capabilities

• TypeScript support for type safety

• Tailwind CSS for styling

• Comprehensive documentation in /src/docs

Boilerplates

Boilerplates are pre-made templates or frameworks that contain a foundational structure, configurations, and often basic functionalities for a particular type of project. They're designed to help kick-start development by providing a starting point, allowing developers to avoid repetitive setup tasks and focus on building specific features.

You can get more boilerplates in this github profile: click here for more boilerplates 👩🏾‍🎤

Install

npm install

Run

npm run dev

Open link in your favorite your browser: http://localhost:5173

Testing

Unit Tests

Run unit tests with Vitest:

npm run test

Run tests with coverage:

npm run test:coverage

E2E Tests

Run E2E tests with Playwright:

# Run all E2E tests
npm run test:e2e

# Run E2E tests with UI mode
npm run test:e2e:ui

# Run E2E tests in headed mode (see browser)
npm run test:e2e:headed

# Run E2E tests in debug mode
npm run test:e2e:debug

# Run tests on specific browsers
npm run test:e2e:chromium
npm run test:e2e:firefox
npm run test:e2e:webkit

# Run tests on mobile viewports
npm run test:e2e:mobile

# View test report
npm run test:e2e:report

Install Playwright browsers

npm run playwright:install

Test Coverage

The project includes comprehensive test coverage including:

• Unit tests for components and utilities
• Component tests with React Testing Library
• E2E tests covering critical user flows:
  • Login and authentication
  • Chat functionality
  • Profile management
  • Settings page
  • Navigation flows
  • API feedback states
  • Community features
  • Groups management

For more details, see the Testing Documentation and E2E Documentation

Technologies and strategies:

Core Technologies

vite - Fast front-end tooling
react - UI library
typescript - Type safety
pwa - Progressive Web App support

State Management & Data Fetching

zustand - Global state management
react-query - Server state management

Styling

tailwindcss - Utility-first CSS framework

Testing

vitest - Unit testing framework
playwright - E2E testing framework
@testing-library/react - React component testing
miragejs - API mocking

Additional Tools

firebase - Backend services
radix-ui - Accessible UI components

Documentation

Comprehensive documentation is available in the /src/docs directory:

• Getting Started - Quick start guide
• Project Structure - Codebase organization
• Testing Guide - Testing strategies and examples
• API Integration - API setup and usage
• State Management - Zustand and React Query usage
• Styling Guide - Tailwind CSS best practices
• Deployment - Deployment strategies
• E2E Testing Specs - BDD specifications for E2E tests

Project Structure

boilerplate-reactjs-testes/
├── e2e/                        # E2E tests with Playwright
│   └── tests/                  # E2E test files
│       ├── login.spec.ts
│       ├── chat.spec.ts
│       ├── profile.spec.ts
│       ├── settings.spec.ts
│       ├── navigation.spec.ts
│       ├── community.spec.ts
│       ├── groups.spec.ts
│       └── api-feedback.spec.ts
├── src/
│   ├── commons/                # Shared components and utilities
│   │   └── components/         # Reusable components
│   ├── pages/                  # Page components
│   │   ├── Chat/
│   │   ├── Community/
│   │   ├── Groups/
│   │   ├── Profile/
│   │   └── Settings/
│   ├── docs/                   # Project documentation
│   └── mocks/                  # API mocks with MirageJS
├── playwright.config.ts        # Playwright configuration
├── vite.config.js              # Vite and Vitest configuration
└── vitest.setup.ts             # Vitest setup file

Browser Support

The E2E tests are configured to run on:

• Desktop: Chrome, Firefox, Safari (WebKit)
• Mobile: Chrome (Pixel 5), Safari (iPhone 12)

CI/CD Ready

The testing setup is optimized for CI/CD environments:

• Configurable retry logic for flaky tests
• HTML and JSON reporters for test results
• Screenshots and videos on test failure
• Parallel test execution support
• Coverage reporting

Author

👤 Anderson Lima (Lemon 🍋)

• Website: https://lemon.dev.br
• Twitter: @andersonlimahw
• Github: @andersonlimahw
• LinkedIn: @andersonlimahw

⭐ Show your support

give a ⭐ if this project helped you!