Skip to content

BenGardiner123/react-vite-starter

Repository files navigation

React + Clerk Starter Template

A modern, TypeScript-ready starter kit featuring Vite's lightning-fast build tools, React 19, Tailwind CSS for styling, Framer Motion for animations, and Clerk Authentication. Perfect for developers who want a production-ready foundation with authentication, mobile-friendly components and best practices baked in.

Features

  • Lightning-fast development server powered by Vite
  • TypeScript support out of the box
  • Tailwind CSS for rapid styling
  • Framer Motion animations
  • Mobile-friendly responsive design
  • Hot module replacement for instant updates
  • ESLint and Prettier configuration
  • Production-ready build setup

Getting Started

To begin your React Vite journey, follow these steps:

  1. Clone this repository to your local machine using Git or by downloading the source code directly.
  2. Navigate to the project directory in your terminal or command prompt.
  3. Install the necessary dependencies by running the command npm install.
  4. Configure Clerk Authentication (optional):
    • Sign up at clerk.com
    • Create a new application and get your publishable key
    • Create a .env file in the root directory:
      VITE_CLERK_PUBLISHABLE_KEY=your_publishable_key_here
      
  5. Once the installation is complete, start the development server with npm run dev.
  6. Open your browser and visit http://localhost:5174 to see your React application in action.

Authentication Setup

This starter includes Clerk authentication. If you don't configure it, you'll see setup instructions on the homepage. To remove authentication entirely:

  1. Remove the ClerkProvider from src/main.tsx
  2. Uninstall Clerk: npm uninstall @clerk/clerk-react
  3. Remove Clerk-related components and imports

Building for Production

When your React application is ready for deployment, you can create an optimized production build. Run the following command:

npm run build

Vite will generate a production-ready bundle in the dist directory. You can then host this folder on any static hosting platform or server.

Learn More

To learn more about Vite and React, refer to the official documentation:

Contributing

Contributions to this starter template are welcome! If you have any suggestions or improvements, feel free to open an issue or submit a pull request.

Deployment

Deployment options abound you can check out

License

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


Now you're all set to embark on your React Vite journey! Start building amazing web applications with the speed and power of Vite and React. Happy coding!

About

Full-Stack React Starter: Modern Vite + TypeScript template with React Router, optional Clerk authentication, and smart configuration detection. Features graceful degradation - works perfectly in development even without auth setup. Production-ready architecture with lazy-loaded auth routes and protected pages.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages