We all know how boring and tedious it is to create new projects from scratch. It is time consuming, and it is just a lot of repetitive boiler plate code.

That is why I created the ultimate starter template for Vite. Some features include:

• Crypto Js - for encryption 🔒
• Tailwindcss - for styling 💅
• Typescript - for more reliable code 🔐
• Firebase - for Baas 💾
• React Snap and React Helmet - for SEO 🔍
• React Use - for useful premade react hooks 🪝
• React transition group - for smooth animations 📺
• React icons - for icons 💖

Some quality of life improvements include

A preconfigured file in the utils/firebase.ts already configured with the environment variables and the env. So it is just copy and paste your firebase credentials into the .env file.

./utils/firebase.ts

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getPerformance } from "firebase/performance";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIRE_API_KEY,
  authDomain: import.meta.env.VITE_FIRE_AUTH_DOM,
  projectId: import.meta.env.VITE_FIRE_PRJ_ID,
  storageBucket: import.meta.env.VITE_FIRE_STG_BKT,
  messagingSenderId: import.meta.env.VITE_FIRE_MSG_ID,
  appId: import.meta.env.VITE_FIRE_APP_ID,
  measurementId: import.meta.env.VITE_FIRE_MESG_ID,
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
//type the auth and firestore functions
const auth = getAuth();
const firestore = getFirestore(app);
const performance = getPerformance(app);
const storage = getStorage(app);

export { analytics, auth, firestore, performance, storage };

Routing

is preconfigured and already done in the App.tsx file and main.tsx

Encryption

functions encrypt and decrypt are already made in ./utils/encryption.ts

SEO

the main.tsx file is already configured with the appropriate code react snap needs to run

Production

scripts on production already have a prod script so you can ship your app with SEO and performance

Installing the template

git clone https://github.com/NeoPrint3D/vite-starter-kit

cd vite-starter-kit

#use anyone of these commands to install dependencies

pnpm install 
yarn install
npm install 

#start the project

pnpm dev

Thanks for reading any question just email me np3d.dev@gmail.com

And please star the GitHub repo:
https://github.com/NeoPrint3D/vite-starter-kit