-
System Design of a Podcast Platform
Introduction
Podcast platforms are growing in popularity, providing a new way for content creators to share their insights and stories, and for users to consume a wide variety of audio content.…
-
System Design of a Digital Vending Machine
Introduction
Vending machines are ubiquitous in modern society, providing a convenient and contactless way to purchase goods in public spaces. As technology evolves, so do vending machines, which are now incorporating…
-
System Design of a Movie Theater Booking System
Introduction
A movie theater booking system is an integral part of a modern cinema experience. It allows customers to book tickets for their favorite movies at their convenience, whether at home…
-
How-to: React Image Preview Upload using FileReader
Simple component for uploading images with preview built with React using FileReader.
We will be working inside the Next.js using Typescript, but you can use whatever setup you want.
Initial Setup
Create template:…
-
How-to: A Simple Drag & Drop Files -Parsing CSVs
CSVs files are one of the most common files that we use all the time for exporting or importing data from external sources. So I guess, it is might be…
-
What is: React Query
How-to: ReactQueryDevtools
The ReactQueryDevtools will show us what the react queries are doing. And the useQuery, which is a function from react-query, will be used to fetch our data.
The ReactQueryDevtool pretty…
-
What-is: Immer – Immutability through mutations
Immer was created by the same person who created Mobx. Immer is an amazing library to help us work with immutable data more easily.
How Immer works
Your actual state dataImmer —→…
-
What is: SWR – React Hooks remote data fetching
What is it use for?It allows for fetching, caching or refetching data in realtime data using React Hooks. SWR, short for state-while-revalidate, is created exactly as the name implies.
📣
SWR’s goal…
-
How-to: Google Places Using Autocomplete in React
Let’s see how we can use the Google Places API within our simple React app.
And to start with, we would be using the React Places Autocomplete package to help us…
-
How to: React Hooks: useContext
(This is sort of a continuation of a previous article on useReducer. Now, we will look into continuing what we had previously built, and how, we can use useContext hook…