A small React project built with Vite, written in TypeScript, and fully tested using Vitest and Testing Library and Mock Service Worker. This project focuses on clean code, reusable components, and rigorous testing.
- State Management: Powered by
zustand
for simplicity and efficiency. - Forms Made Easy: Includes
react-hook-form
for robust form handling withzod
validation. - Testing First: All components are rigorously tested using
Vitest
andTesting Library
. - Design System: Styled using
tailwindcss
with animations and utility-based design principles. - Modern Tooling: Built with Vite for blazing-fast development.
The following scripts are defined in package.json
:
Script | Description |
---|---|
dev |
Start the development server. |
build |
Build the app for production. |
lint |
Run ESLint to check code quality. |
preview |
Preview the production build locally. |
test |
Run all unit and integration tests. |
coverage |
Generate test coverage report. |
Run any script using:
npm run <script-name>
Follow these steps to set up the project locally:
-
Clone the repository:
git clone https://github.com/alirezashn79/react-rtl.git cd react-rtl
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
Your app will be available at http://localhost:3000.
This project uses Vitest for testing. To run the tests, execute:
npm run test
For a detailed coverage report:
npm run coverage
Here's a quick overview of the project's structure:
src/
βββ components/ # Reusable React components
βββ hooks/ # Custom React hooks
βββ pages/ # Page-level components
βββ styles/ # TailwindCSS configuration and styles
βββ utils/ # Helper functions and utilities
tests/ # Unit and integration tests
This project is licensed under the MIT License. See the LICENSE file for details.
β¨ Built with β€οΈ using React, Vite, and TypeScript β¨