Developer Guides and Projects

Drizzle is comparatively simple and performant and easy to use Typescript ORM when compared to other ORMs like Prisma. It is a light weight and has zero dependencies. 

 Nextjs is a powerful Reactjs framework which has a good developer experience. In this post I like to show you how to import JSON data file into the Nextjs project with Typescript Type.

 I have been depending on Context for passing state through components in React and eventually things complicated when data is become complex. Move on to beautiful Redux but it is much complex to digest. For learning Redux I have spent lots of time and Redux Toolkit, easy to use Redux, sav ed me a lot. Even though RTK is ok, it is not a simple library. I am fan of Svelte store and Vuex , Pinia store. Is there any such library for React ? I recently found Zustand a minimal store for React. Love it. 😍 Create a store Binding Updating the state Create a store Create a store using the create an d export the custom hook. <pre class='language-javascript'> <code> import create from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) </code></pre> Binding In your component use the ho...

In my recent Nextjs project, need to shape object array to a different type.  Mapping through the entire array in my arrow function and return the new object. Even though the return statement work. The type is still unknown. So, I have to covert the result into array of my type. Mapping Array Type export type LatestInvoiceType={ id:number; amount: number; customer:{ name:string; email:string; image_url:string; } } New Type export type LatestInvoice = { id: string; name: string; image_url: string; email: string; amount: string; }; Solution to the problem Here is my solution to the problem const latestInvoices = invoices.map(invoice => { return{ id:invoice.id.toString(), amount:invoice.amount.toString(), name:invoice.customer?.name, email:invoice.customer?.email, image_url:invoice.customer?.image_url }; }) as LatestInvoice[] ;