Design System Tutorial
Building a Layered Component Architecture with MUI
Late Night Coder
I’m a software ninja 🥷 who loves abstractions and spread functional programming everywhere.
Latest articles
Thinking in React
Layered Architecture Guidelines
Creating Tiptap Emoji Picker
When you are building a text editor for general-purpose writing, sooner or later you will need to support emoji’s for your users. In this blog post, we will learn to create an emoji picker for your tiptap-based editor. Let’s define the EmojiData Mod...
Scalable state management in React
State management is always a problem to solve in big applications. Many design patterns and libraries emerge to solve some issues by proposing different ways of doing things. In this article, our main focus is on the philosophy of managing your state...
Scale with rate limiters
Availability and reliability are important parts of systems; if you are exposing an API, it should be available and reliable to consumers. You must have experienced this when you grew your API endpoints and received more traffic. It is okay as the bu...
Optimize JavaScript, simple trick and techniques - Part 1
When I come across a huge codebase, I often feel that it can be optimised without changing the core of the programme. I'm listing a set of techniques that I have found useful in the past. In computers, every solution has a trade-off; mostly, performa...
Creating component variants with ease
There are times when you are writing your UI component and want to add style variants to it. A button component can be a "primary" button with a "blue" background or a "secondary" button with an "orange" background. If I asked you to create a button ...
Creating database and tables | PostgreSQL
You create a database to store all your data and information in one place. The database is like an envelope containing and enclosing many sheets of data called tables. The sheets represent the tables in the database where your data is stored. Dat...
Extending our CSS-in-JS to support style-component syntax
In the previous post, we made our css emotion like function and in this blog post, we are going to extend our css function to support the following style-components syntax. const Button = styled('button')( { backgroundColor: "blue", color:...
