VREAKS

An opinionated React and Vite template for accelerating modern Single Page Application (SPA) development

VREAKS is a carefully curated template that combines the power of Vite and React with a selection of essential technologies to jumpstart your next Single Page Application (SPA) project. It aims to provide a solid foundation with best practices and optimal configurations out of the box, specifically tailored for client-side rendered applications.

Features

• Lightning-fast development with Vite
• Modern React setup with TypeScript support for SPAs
• Pre-configured styling with Tailwind CSS
• Efficient client-side state management using Zustand
• Optimized data fetching with Tanstack Query
• Consistent code style enforced by ESLint and Prettier
• Focus on Single Page Application (SPA) architecture

Getting Started

Prerequisites

• Node.js (version 22 or later)
• Bun, PNPM, NPM, or Yarn

Installation

Choose your preferred package manager:

Using Bun (recommended)

git clone https://github.com/bnhr/vreaks.git your-project-name
cd your-project-name
bun install
bun run dev

Using PNPM

git clone https://github.com/bnhr/vreaks.git your-project-name
cd your-project-name
pnpm install
pnpm run dev

Using NPM

git clone https://github.com/bnhr/vreaks.git your-project-name
cd your-project-name
npm install
npm run dev

Using Yarn

git clone https://github.com/bnhr/vreaks.git your-project-name
cd your-project-name
yarn
yarn dev

After installation, make sure to remove the Git history to start fresh:

rm -rf .git

Essential Technologies

• React: The latest version of React for building user interfaces, offering improved performance and new features for SPAs.
• TypeScript: Adds static typing to JavaScript, enhancing code quality and developer productivity in large-scale SPA projects.
• Tailwind CSS: A utility-first CSS framework for rapid UI development without conflicting styles, perfect for component-based SPA architectures.
• Prettier with Tailwind Plugin: Ensures consistent code formatting, including proper Tailwind class sorting.
• ESLint: Identifies and fixes code quality issues, using the new ESLint flat config for improved performance.
• Zustand: A minimal state management solution that simplifies complex state logic in SPAs.
• Tanstack Query: Powerful data synchronization for React, optimizing client-side data fetching and caching in SPAs.

Development

After installation, you can start developing your SPA project:

1. Run the development server: bun run dev
2. Open your browser and visit http://localhost:5173
3. Start editing the files in the src directory. The changes will be reflected in real-time.

Contributions and Discussions

This project is intended as a personal learning and experimentation space, so I do not accept contributions or pull requests. However, I'm open to discussions or suggestions regarding the design choices and technical decisions made in this project.

If you have ideas or questions about the project, feel free to open an issue or start a discussion in the repository. Constructive feedback is always appreciated!

Todo

• Implement headless components as a design system using Radix UI or React Aria Components for customizable, accessible UI elements in SPAs.
• Migrate to Biome for faster linting and formatting once it's stable.