TypeScript React Vite (SWC) Boilerplate

This boilerplate offers a solid foundation for crafting modern web applications with TypeScript, React, and Vite. It streamlines the initial setup process, allowing developers to dive straight into coding without the hassle of extensive project configuration.

Introduction

Welcome to the TypeScript React Vite (SWC) Boilerplate! Below, you'll find a curated list of libraries and tools commonly used in contemporary web development. These resources cover a range of functionalities, including routing, state management, form management, design approaches, UI components, animations, data validation, testing, and utilities. Feel free to explore and integrate them into your projects as needed.

Features

• TypeScript: Utilize the power of TypeScript for static typing and improved developer experience.
• React: Build user interfaces with React, a popular JavaScript library for building UI components.
• Vite: Enjoy fast development server and optimized production builds with Vite, a modern build tool.
• Minimal Configuration: Get started quickly with minimal configuration required.

File Structure

project-root/
├── public/                   # Public directory
│   └── vite.svg              # SVG favicon 
├── src/                      # Source code directory
│   ├── assets/               # Assets directory
│   │   ├── fonts/            # Fonts directory
│   │   └── images/           # Images directory
│   ├── components/           # Components directory
│   │   └── UI/               # UI components directory
│   │       ├── Button/       # Button component
│   │       └── Input/        # Input component
│   ├── Layout/               # Layout directory
│   │   ├── Header/           # Header component
│   │   └── Footer/           # Footer component
│   ├── hooks/                # Custom hooks directory
│   │   └── useStorage.ts     # useStorage hook
│   ├── pages/                # Pages directory
│   │   └── Home/             # Home page
│   ├── services/             # Services directory
│   │   └── auth/             # Auth service
│   ├── utils/                # Utilities directory
│   │   ├── helpers/          # Helpers
│   │   └── validation/       # Validation
│   ├── App.tsx               # Main application component
│   ├── index.css             # Global CSS styles
│   ├── main.tsx              # Entry point of the application
│   └── vite-env.d.ts         # Vite environment typescript file
├── .env                      # Environment variables file
├── .eslintrc.cjs             # ESLint configuration file
├── .gitignore                # Git ignore file
├── .prettierrc               # Prettier configuration file
├── .prettierignore           # Prettier ignore file
├── index.html                # HTML file
├── package-lock.json         # Package lock file
├── package.json              # Package JSON file
├── readme.md                 # Readme file
├── tsconfig.json             # TypeScript configuration file
├── tsconfig.node.json        # TypeScript Node configuration file
└── vite.config.ts            # Vite configuration file

• This structure separates different types of files/modules to keep the codebase organized and maintainable.
• Feel free to adjust it based on your project's specific requirements and preferences!

Getting Started

To get started with this boilerplate, follow these steps:

1. Clone the Repository:

   • This command clones the repository from the specified URL (https://github.com/RomaLetodiani/React-TypeScript-Vite-BoilerPlate.git) to your local machine.

   git clone https://github.com/RomaLetodiani/React-TypeScript-Vite-BoilerPlate.git

2. Navigate to the Project Directory:

   • Change the current directory in your terminal to the newly cloned project directory.

   cd React-TypeScript-Vite-BoilerPlate

3. Remove the Existing Git Repository:

   • This command removes the existing Git repository (.git directory) from the project directory. It allows you to start with a clean Git history for your own project.

   rm .git

4. Install Dependencies:

   • Use npm to install the project dependencies specified in the package.json file.

   npm install

5. Start the Development Server:

   • This command starts the development server, allowing you to view and work on your project locally.

   npm start

Production

To build the project for production, run the following command:

npm run build

This will create an optimized build of your application in the dist directory.

Configuration

The project configuration files are located in the root directory:

• vite.config.ts: Vite configuration file.
• tsconfig.json: TypeScript configuration file.
• .eslintrc.cjs: ESLint configuration file.
• .prettierrc: Prettier configuration file.

Feel free to modify these files to suit your project requirements.

Libraries and Tools

Routing and Navigation

• React Router

  Description: React Router is a popular library for managing client-side routing in React applications. It allows you to define your application's navigation structure declaratively using components, making it easy to reason about and maintain. Key features include:

  • Declarative Routing: Define routes using JSX, improving code readability and maintainability.
  • Nested Routes: Organize complex applications with hierarchical navigation structures.
  • Dynamic Routes: Create routes that respond to different URL patterns using parameters.
  • Navigation Components: Utilize components like Link and Navigate for seamless navigation management.
  • Server-Side Rendering Support: Enhance performance and SEO by rendering routes on the server.

  
  

  Useful for:

  • Customization: React Router offers extensive customization options for tailoring navigation to your specific needs.
  • Flexibility: Supports various routing scenarios, including nested routes, dynamic routes, and protected routes.
  • Developer Experience: Provides clear and declarative syntax, making it easier to understand and write routing logic.
  • Rapid Prototyping: Helps quickly build and iterate on different navigation flows.

  
  

  Installation:

  npm install react-router-dom

  Tutorial: reactrouter.com/tutorial

  Official Documentation: reactrouter.com

State Management

• Redux

  Description: Redux is a predictable state container for JavaScript apps. It helps manage application state in a predictable way, making it easier to develop complex applications.

  Useful for:

  • Managing global state across your application.
  • Separating state logic from UI components.
  • Implementing middleware for advanced use cases.

  
  

  Installation:

  npm install redux react-redux @types/react-redux

  Documentation: redux.js.org

• Redux Toolkit

  Description: Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It includes utilities to simplify common Redux use cases and enables writing Redux logic with less boilerplate.

  Useful for:

  • Streamlining Redux setup and configuration.
  • Encouraging best practices for Redux development.
  • Enhancing developer productivity with built-in utilities.

  
  

  Installation:

  npm install @reduxjs/toolkit

  Documentation: redux-toolkit.js.org

• React Query

  Description: React Query is a data-fetching library for React that helps you fetch, cache, and update data in your React applications. It provides tools for managing asynchronous data fetching with built-in caching, automatic refetching, and more.

  Useful for:

  • Simplifying data fetching and state management in React applications.
  • Handling complex data-fetching scenarios with ease.
  • Optimizing performance by caching data and minimizing unnecessary requests.

  
  

  Installation:

  npm install react-query

  Documentation: react-query.tanstack.com

• Zustand

  Description: Zustand is a small, fast, and scalable state management library for React. It provides a simple API for managing local component state with minimal boilerplate, making it ideal for small to medium-sized applications.

  Useful for:

  • Managing local component state with ease.
  • Avoiding the complexities of Redux for smaller projects.
  • Achieving predictable and efficient state management in React applications.

  
  

  Installation:

  npm install zustand

  Documentation: zustand.surge.sh

Form Management

• Formik

  Description: Formik is a popular form management library for React applications. It simplifies the process of building forms by handling form state, validation, and submission. With Formik, you can easily create robust and flexible forms with minimal boilerplate.

  Useful for:

  • Managing form state, including field values, touched state, and errors.
  • Validation: Defining validation rules and displaying error messages.
  • Handling form submission and asynchronous form submission with ease.

  
  

  Installation:

  npm install formik

  Documentation: formik.org/docs

• React Hook Form

  Description: React Hook Form is a lightweight and performant form library for React applications. It focuses on providing a simple API and optimal performance by minimizing re-renders. With React Hook Form, you can build fast and efficient forms with minimal overhead.

  Useful for:

  • Minimal re-renders: Achieving optimal performance by minimizing component re-renders.
  • Built-in validation: Easily define validation rules using native HTML validation attributes.
  • Reactivity: Leverage React's reactivity model for managing form state and re-renders.

  
  

  Installation:

  npm install react-hook-form

  Documentation: react-hook-form.com

Design Approaches

• Tailwind CSS

  Description: A utility-first CSS framework providing low-level CSS classes for styling your components directly in your HTML. Offers fine-grained control and rapid prototyping.
  

  Useful for:

  • Projects requiring maximum customization and flexibility.
  • Developers comfortable with HTML and CSS.
  • Rapid prototyping and building custom designs.

  
  

  Installation:

  npm install tailwindcss postcss autoprefixer

  Follow instructions on: tailwindcss.com/docs/installation

  Documentation: tailwindcss.com

• Styled Components

  Description: A CSS-in-JS library allowing you to style components directly within your React components using JavaScript functions or objects. Enables component-specific styling and promotes code organization.

  Useful for:

  • Building reusable and maintainable components with -encapsulated styles.
  • Leveraging dynamic styling based on props or state.
  • Enforcing design consistency across components.

  
  

  Installation:

  npm install styled-components

  Documentation: styled-components.com

UI Components

• Headless UI

  Description: Unstyled, accessible UI components built for flexibility and control over styling (often used with Tailwind CSS).

  Useful for:

  • Projects requiring complete control over styling
  • Developers comfortable with Tailwind CSS or custom styling approaches

  
  

  Installation:

  npm install @headlessui/react

  Documentation: headlessui.com

• Chakra UI

  Description: Accessible and modular component library with customizable themes and dark mode support.

  Useful for:

  • Rapid prototyping
  • Building consistent UI experiences
  • Leveraging pre-built components

  
  

  Installation:

  npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

  Follow instructions on chakra-ui.com/getting-started/vite-guide

  Documentation: chakra-ui.com/docs

• Material UI

  Description: Implementation of Google's Material Design principles for React components.
  

  Useful for:

  • Adhering to Material Design guidelines
  • Leveraging pre-built components based on Material Design

  
  

  Installation:

  npm install @mui/material

  Documentation: mui.com

• Ant Design

  Description: Enterprise-grade UI library with rich features and comprehensive component set.

  Useful for:

  • Complex applications requiring extensive components
  • Adherence to a consistent design system

  
  

  Installation:

  npm install @ant-design/react

  Documentation: ant.design

Animations

• Framer Motion

  Description: Framer Motion is a production-ready motion library for React that makes it easy to create fluid animations and interactive UI components. It provides a simple API for defining animations using declarative syntax and supports features like keyframes, transitions, and gestures.

  Useful for:

  • Adding smooth animations to your React components and UI elements.
  • Creating interactive and engaging user experiences with fluid motion.
  • Implementing complex animations with ease, including variants and orchestration.

  
  

  Installation:

  npm install framer-motion

  Documentation: framer.com

Data Validation

• Yup

  Description: Yup is a JavaScript schema builder for value parsing and validation. It's schema-based and allows you to define validation rules for your data using a simple and expressive syntax.

  Useful for:

  • Form validation in React applications.
  • Data validation in API requests.
  • Ensuring data consistency and integrity.

  
  

  Installation:

  npm install yup

  Documentation: github.com/jquense/yup

• Zod

  Description: Zod is a TypeScript-first schema declaration and validation library. It's designed to be fully compatible with TypeScript and provides a concise syntax for defining data schemas and validating data.

  Useful for:

  • Type-safe validation in TypeScript projects.
  • Runtime validation in Node.js and browser environments.
  • Working with complex data structures and schemas.

  
  

  Installation:

  npm install zod

  Documentation: zod.dev

Testing

• Jest

  Description: Jest is a delightful JavaScript testing framework with a focus on simplicity. It works with React out of the box and provides features such as snapshot testing, mocking, and code coverage.

  Useful for:

  • Writing unit tests for React components and utility functions.
  • Performing snapshot testing to ensure UI consistency.
  • Mocking dependencies to isolate tests.

  
  

  Installation:

  npm install --save-dev jest @types/jest

  Documentation: jestjs.io

• Vitest

  Description: Vitest is a Next Generation Testing Framework designed specifically for Vite, a fast development server and bundler for modern web development. Vitest offers speed and efficiency in testing, leveraging Vite's performance for quicker feedback loops.

  Useful for:

  • Testing Vite-based projects with speed and efficiency.
  • Harnessing Vite's capabilities for rapid development and testing cycles.
  • Integrating seamlessly with Vite's ecosystem for a smoother testing experience.

  
  

  Installation:

  npm install --save-dev vitest

  Documentation: vitest.dev

• React Testing Library

  Description: React Testing Library is a simple and complete testing library for React that encourages good testing practices. It provides utilities to render React components into the DOM and interact with them.

  Useful for:

  • Writing tests that resemble how users interact with your application.
  • Ensuring accessibility and inclusively by focusing on the DOM.

  
  

  Installation:

  npm install --save-dev @testing-library/react @testing-library/jest-dom

  Documentation: testing-library.com

• Cypress

  Description: Cypress is an end-to-end testing framework for web applications. It provides an elegant API for writing tests and running them in real browsers, enabling you to simulate user interactions and behavior.

  Useful for:

  • Writing and running end-to-end tests for your React application.
  • Simulating user interactions such as clicking, typing, and navigating.
  • Debugging and diagnosing issues with interactive test runs.

  
  

  Installation:

  npm install --save-dev cypress @cypress/react

  Documentation: cypress.io

Utilities

• UUID

  Description: A library for generating unique identifiers (UUIDs).

  Installation:

  npm install uuid

  Documentation: npmjs.com/package/uuid

• Lodash

  Description: A utility library that provides helper functions for common programming tasks like manipulating arrays, objects, and strings.

  Installation:

  npm install lodash

  Documentation: lodash.com/docs

• Moment.js

  Description: A library for parsing, validating, manipulating, and formatting dates.

  Installation:

  npm install moment

  Documentation: momentjs.com/docs

• Axios

  Description: A promise-based HTTP client for making HTTP requests from the browser or Node.js.

  Installation:

  npm install axios

  Documentation: axios-http.com/docs

• React JWT

  Description: React JWT is a library for handling JSON Web Tokens (JWT) in React applications. It provides utilities for decoding, validating, and managing JWT tokens.

  Useful for:

  • Implementing token-based authentication in React applications.
  • Managing JWT tokens received from a server.
  • Handling authentication state and user sessions.

  
  

  Installation:

  npm install react-jwt

  Documentation: npmjs.com/package/react-jwt

• Drag and Drop

  • DnD

    Description: A flexible and powerful library for implementing drag and drop functionality in React applications.

    Installation:

    npm install react-dnd

    Documentation: dnd.github.io/

  • Beautiful DnD

    Description: A beautiful and accessible drag and drop library for lists with vertical and horizontal sorting.

    Installation:

    npm install react-beautiful-dnd

    Documentation: github.com/atlassian/react-beautiful-dnd

  • Sortable HOC

    Description: A higher-order component for implementing sortable lists with drag and drop functionality in React.

    Installation:

    npm install react-sortable-hoc

    Documentation: clauderic.github.io/react-sortable-hoc

Happy Coding!

License

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

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

Acknowledgements

Special thanks to all the developers and contributors of the libraries and tools used in this boilerplate.

Resources

• TypeScript Handbook
• React Documentation
• Vite Documentation

Contact

For inquiries or support, please contact [email protected].