Forem: Drew Ronsman

Get started with Vite Firebase Tailwindcss fast🔥🔥🔥

Drew Ronsman — Sun, 10 Apr 2022 13:58:55 +0000

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

Firebase limits doc fields

Drew Ronsman — Sat, 09 Apr 2022 17:14:12 +0000

Today I ill be figuring out the max amount of items a single firestore doc can have and why that is a problem.

The problem

We all know how limiting firestore is, but don't get me wrong the developer experience is amazing just plop down some functions to create read and update data it's super easy and simple.

Firestore sucks at relational data at scale. One way to represent relationships is having other document ids and embed it into the document, but truly how many document ids can fit into one document.

The answer is that each firestore document can have at max 19999 different items in a document after that many items adding anything else does not work.

You might ask who would need that many items in a single document. Well features like followers where you grab the others user uid to show a follower and followee relationship is impossible unless you add more documents to show the relationship where it could check first document then second document with a list of uids. But that is clunky and doesn't work well.

So unless the firebase team can do something better for relational data firestore is an inadequate option for large scale relational data.

Can You Run Copilot on the Raspberry pi, Answer is Surprisingly YES.

Drew Ronsman — Wed, 15 Dec 2021 16:33:08 +0000

In order to get GitHub Copilot on VSCode first you have to ins tall it with the package manager apt or recommended software from raspberry pi

$ sudo apt install code

After you install VSCode go an open it up and go to the extension tab or use "Ctrl+Shift+X" (Keyboard shortcut). Go type in GitHub Copilot into the search bar and install the extension.

Copilot is currently in beta, but you can sign up for the waiting list to potentially get access to it. I did nothing special to get copilot
except joining the wait list and having a GitHub Account. All I had to do was wait and I got access to it.

You will know if copilot is working when the bottom of the screen has the copilot icon.

Here is a showcase showing of copilot working.