React Starter
Full-featured typescript starter for React application
Overview:
The React StarterMain is a starter project that allows developers to quickly set up a React application with various features and tools. It includes TypeScript for typed JavaScript, Vite as a frontend tooling, Ant.Design as a UI library, Emotion for CSS in JS, and supports both light and dark themes. The project also incorporates JWT authentication with common features like sign-up, sign-in, reset password, and email confirmation. Other notable features include state management libraries like Jotai and React Router for declarative routing. The React StarterMain also provides testing utilities such as Testing Library, MSW API mocking library, and tools for emulating browser behavior.
Features:
- TypeScript: A typed superset of JavaScript that provides static type checking for enhanced code reliability.
- Vite: Next-generation frontend tooling that offers faster compilation and development experience.
- Ant.Design: A UI library with pre-designed components for creating beautiful and responsive user interfaces.
- Emotion: A CSS-in-JS library that enables writing CSS styles within JavaScript code.
- Light and Dark themes: Support for switching between light and dark themes for better user experience.
- JWT Authentication: Complete authentication system with features like sign-up, sign-in, reset password, and email confirmation.
- Zod: TypeScript-driven schema validation library with static type inference for validating data.
- Fetch-based API client: A client for making API requests with built-in type safety using the zod-fetch library.
- react-query: Asynchronous state management library with declarative and always-up-to-date auto-managed queries and mutations.
- i18next: Internationalization framework for supporting multiple languages in the application.
- Jotai: State management library that simplifies managing application state with atomic state updates.
- React Router: Declarative routing library for handling navigation within the application.
- use-react-router-breadcrumbs: A hook for generating route breadcrumbs for improved user navigation.
- react-error-boundary: A reusable React error boundary component for handling and displaying errors gracefully.
- Vitest: A fast Vite-native unit test framework for writing and running tests.
- Testing Library: Simple and complete testing utilities that encourage good testing practices.
- MSW: An API mocking library for browser and Node.js for mocking API responses during testing.
- @mswjs/data: Data modeling and relation library for testing applications.
- jsdom-testing-mocks: Tools for emulating browser behavior in a jsdom environment for testing.
- Prettier: An opinionated code formatter that ensures consistent code style across the project.
- ESLint: A pluggable linting utility for identifying and reporting code errors and inconsistencies.
- Husky & lint-staged: Tools for running ESLint and Prettier before committing new code to maintain code quality.
- CI/CD: Integration with Github Actions to run integration tests on each pull request and for the main branch.
- source-map-explorer: A tool to analyze and debug space usage through source maps.
- rollup-plugin-visualizer: A plugin to visualize and analyze the bundle generated by Rollup.
Summary:
The React StarterMain is a comprehensive starter project for building React applications. It provides a wide range of features and tools including TypeScript, Vite, Ant.Design, Emotion, JWT authentication, state management libraries, internationalization support, testing utilities, and more. With detailed installation instructions and documentation, developers can quickly set up their project and take advantage of the available features to create robust and scalable React applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- TanStack
TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Jotai
Jotai is a primitive and flexible state management library for React. It takes a bottom-up approach with an atomic model inspired by Recoil, offering a minimal API that scales from simple to complex state management needs without boilerplate.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- React Hook Form
React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.