• About
• Features
• Getting Started
• Prerequisites
• Installation
• Usage
• Configuration
• Scripts
• Linting and Formatting
• Environment Variables
• Contributing
• License

This project is a great place to start your react + typescript project, it uses vite for the dev server and tailwindCSS for styling. This configuration was my goto everytime so instead of configuring it again and again I created this starter and thought to share it with the community as well 😄. Would love to have your feeback/comments/suggestions regarding this.

• React and Vite: Utilize the power of React for building user interfaces and Vite for a faster development experience.
• TypeScript: Enjoy the benefits of static typing with TypeScript support.
• Tailwind CSS: Quickly style your components with the utility-first CSS framework.
• Prettier and ESLint: Ensure consistent code style and formatting using eslint and prettier.
• Typesafe Environment Variables: Handling and validation of environment variables using Zod.
• Lint-staged and Commitlint: Enforce code quality and consistent commit messages.

You need to have Node.js (>=18.x), npm & Git installed on your machine to get started with tthis repository.

# HTTPS
git clone https://github.com/Muhammad-Hasham-Khalid/react-typescript-tailwind-starter.git

# or SSH
git clone [email protected]:Muhammad-Hasham-Khalid/react-typescript-tailwind-starter.git

# or GitHub CLI
gh repo clone Muhammad-Hasham-Khalid/react-typescript-tailwind-starter

cd react-typescript-tailwind-starter

npm install

cp .env.local .env.sample

npm run start:dev

Visit http://localhost:5173 in your browser to see the app.

• There is a default settings.json in the .vscode folder which you can change as per your requirements.
• There is a default extensions.json in the .vscode folder as well with some recommended extensions which you can also change as per your requirements.

• start:dev: Run the vite development server.
• build:prod: Build the project for production.
• start:prod: Start the project in production mode.
• build:staging: Build the project in staging mode (uses .env.staging for environment).
• start:staging: Start the project in staging mode.
• lint: Run linting on your project (for more details see the Linting and Formatting section)
• format: Run prettier on your project (for more details see the Linting and Formatting section)

For linting this project uses eslint and for consistent formatting it uses prettier both these tools are pretty much used as a standard in the javascript/typescript ecosystem. If you have some specific settings/configuration you can change/add them in their respective configuration files i.e.: .eslintrc.cjs and .prettierrc

In order to add any environment variables first go to src/env.ts and add them in the env zod object, for example:

export const env = z.object({
  ...
  // client
  VITE_YOUR_ENV_VAR: z.string(),
});

Now, if your dev server was running it should probably crash as the environment file is now invalid as per this schema so add this variable to the relevant environment file and voila you can now access that environment variable in your app as import.meta.env.VITE_YOUR_ENV_VAR. (and you get autocomplete for it as well 😎)

Feel free contribute to this project by opening pull requests or creating issues, would love to have some feedback and contribution from the community.