Qwik with Firebase - A Todo App
7 min read
jdgamble555 on (last modified on )
As far as I know, there are no other tutorials for Qwik + Firebase. It is simple just like it is in any other Framework. My issues were really just learning Qwik itself, not really the handling of Firebase.
I must say Qwik is Awesome! The only think I don't like about it is JSX. I realize that is polarizing, but after you build things in Angular, Svelte, and Vue, you start to realize maps, ternary operators, and lite-components wouldn't even be necessary if things were as simple as Svelte.
That being said, Qwik forces you to do things the right way, which I do like. Svelte does so many things automatically for you, that you become spoiled with it. For example, you can put a function anywhere, and use it anywhere else. However, Qwik makes sure you do things right. I kind of like both methods. I will definitely build more things in Qwik!
UI
Please excuse the lack of UI. There are pretty much no UI Frameworks for Qwik other than Tailwind, and I really didn't want to take the time to design an app; this is for functionality. I did try and go the extra mile to write clean code.
The App
The app is the same basic Todo App I have written 100x. However, I feel like every time I rewrite it, no matter what framework, my code gets better.
The app was originally based on the Fireship Svelte Todo App, however, my code is completely different at this point, not to mention in another framework.
Stores
After coming from Svelte Stores, I admit, I want to build React Apps (or SolidJS / QwikJS) with a store-like syntax. It's really not that difficult to do. Basically, follow the clean code rules by creating your own custom hook, and put your useState and useEffect outside of your main component. The Qwik useStore is sort of the best of both worlds (React and Svelte), and you don't need to pass any variables into useClientEffect$. It really was pleasant to work with!
So, I followed this basic pattern for both the todos store, and the user store. It is worth noting that I had to map the EXACT data to work well with Qwik and TypeScript. Qwik cannot serialize a non JSON object, so I also had to use the toMillis() method for dates.
export function useUser() {
const _store = useStore<{ loading: boolean, user: userData | null }>({ loading: true, user: null });
useClientEffect$(() => {
// toggle loading
_store.loading = true;
// subscribe to user changes
const unsubscribe = onIdTokenChanged(auth, (_user: User | null) => {
_store.loading = false;
if (!_user) {
_store.user = null;
return;
}
// map data to user data type
const { photoURL, uid, displayName, email } = _user;
const data = { photoURL, uid, displayName, email };
// print data in dev mode
if (import.meta.env.DEV) {
console.log(data);
}
// set store
_store.user = data;
});
return unsubscribe;
});Rest of App
The rest of the app is just like it would be in Svelte or React, nothing new. I created a firebase.ts file for the basic Firebase functions, checked loading state, and did my best to make JSX (which is always illegible IMHO), readable in the actual core todo.tsx.
Qwik comes with Service Workers, SSR Routing, and TypeScript by default... all which is awesome!!! It even has Vercel Edge plugin that was one step to install.
Overall, this was extremely fun to write. I didn't really get to use the router, SSR pre-rendering, endpoints, context, or any of the advanced features, but this was a great first app for me to build. I will be building more with it soon!.
May you resume the Force,
J