Welcome to the Vite + React Starter Kit! This repository provides you with a solid foundation for developing web applications using React, along with a selection of popular tools and libraries to enhance your development workflow. It follows best practices for folder structure, ensuring a clean and organized codebase.
This repository comprises distinct branches, each serving a specific purpose. Below is a list of these branches, ordered according to their contextual relevance. All branches are built upon Vite, with TypeScript being both implemented and configured.
lite: This branch establishes a foundational Vite project equipped with essential linting tools such as ESLint, Stylelint, Commitizen, and Husky. It serves as a minimal project structure, necessitating the addition and configuration of packages tailored to your project's requirements.
folder-tree: An extension of the lite branch, this variant adheres to best-practice folder structures.
main: Positioned as a minimal starter kit, this branch encompasses the elements of the lite branch and integrates the restructured folder-tree branch. Additionally, it incorporates a router. Ideal for those seeking a streamlined starter kit with optimal folder structure and routing functionality.
dev: Building upon the main branch, the dev branch represents a feature-rich version. It includes pre-configured packages and libraries essential for initiating projects. In addition to the packages from the main branch, the following are integrated and ready for use:
- Mantine
- Redux
- Tabler Icon
- React-Intl
- Update README.md for all branches
- Add Loading Component for Suspense fallback
- Develop exclusive CLI to work with this kit
- Develop Home Page
- Add more features!
To use this starter kit, follow these steps:
-
Clone the repository to your local machine using the following command:
git clone git@github.com:hamidyfine/vite-react-starter-kit.git // or git clone https://github.com/hamidyfine/vite-react-starter-kit.git
-
Navigate to the project directory:
cd vite-react-starter-kit
-
Switch to the desired branch.
-
Install the dependencies using your preferred package manager. For example, using npm:
npm install // or yarn
-
Start the development server:
npm run dev // or yarn dev
-
Open your browser and visit
http://localhost:4000
to see the application running.
The following scripts are available to streamline your development workflow:
npm run dev
oryarn dev
: Starts the development server and provides hot reloading for an optimized development experience.npm run build
oryarn build
: Builds the application for production, generating optimized and minified assets.npm run lint
oryarn lint
: Lints your codebase using ESLint and StyleLint to enforce code quality and conventions.
Contributions are welcome! If you encounter any issues, have suggestions, or would like to contribute improvements to the starter kit, please feel free to submit a pull request.
This starter kit is open source and released under the MIT License. You are free to use, modify, and distribute the code