DEV Community: Joseph Muchai

Understanding Tanstack Query: A Brief Guide

Joseph Muchai — Thu, 07 Aug 2025 08:49:59 +0000

Introduction

Imagine you're running a busy coffee shop, and every time a customer orders, you have to check the stockroom for ingredients, update the inventory, and serve the coffee, all while keeping the line moving. Managing all this manually can get chaotic.

React applications, fetching and managing data from a server is a similar challenge. You have to juggle loading states, error handling, and even cache management.

Tanstack Query (formerly React Query) makes all of these easier. It's a powerful library that simplifies how you fetch, cache, and update data in your React apps, making them faster and more reliable. Instead of manually writing useEffect hooks, managing multiple state variables, and implementing caching logic from scratch, TanStack Query provides hooks that automatically handle loading states, error management, background updates, and intelligent caching

Core Concepts

At its heart, TanStack Query revolves around two main concepts: queries for fetching data and mutations for updating data.

Queries in Tanstack Query are like having a personal assistant who manages your app's data. When you use the useQuery hook, you're telling your assistant, "Fetch this data, keep it up to date, and let me know if anything changes." This means Tanstack Query handles all the hard work behind the scenes. It stores the data (caching) to avoid unnecessary requests to the server and refreshes it when it's outdated. This keeps your app fast and your code simple.
Query keys in Tanstack Query are like labels on folders in a filing cabinet. Each label uniquely identifies a specific set of data, so Tanstack Query knows exactly which data you're asking for. When the key changes, it triggers the fetching of a different set of data. This system ensures your data stays synchronized with your UI state
Mutations handle data updates: creating, updating, or deleting server data. Unlike queries that run automatically, mutations only execute when you explicitly trigger them, like when a user submits a form. You use the useMutation hook to define the update operation, specifying how to send the request (e.g., via axios.post). The hook provides tools to track loading or error states and can refresh related queries to keep your app's data consistent after the update.

Example:

Let's build a simple React app that fetches some user data from a public API using Tanstack Query.
First, set up the query client in your main app file:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  )
}

Now, fetch user data with remarkable simplicity:

function UserList() {
  // Fetch data using useQuery
  const { data, isLoading, isError } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      return response.data;
    },
  });

  // Handle loading state
  if (isLoading) return <div>Loading...</div>;

  // Handle error state
  if (isError) return <div>Error: {error.message}</div>;

  // Render data
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

To break it down:

Importing Dependencies: We import React, Tanstack Query hooks, and axios for HTTP requests.
QueryClient Setup: We wrap our app in QueryClientProvider to make it available everywhere.
useQuery Hook: This hook fetches data. The queryKey: ['users'] uniquely identifies this data. The queryFn defines how to fetch the data using axios.
State Handling: Tanstack Query gives us isLoading, isError, and data to manage the fetch process. We show "Loading…" while fetching, display errors if they occur, and render the user list when data arrives.
Rendering: We map over the data array to display each user's name in a list.

The beauty here is that TanStack Query automatically caches this data. If another component needs the same users list, it won't make another network request, it'll use the cached version instantly

Common Pitfalls

Some of the mistakes devs make when working with Tanstack Query are:

Copying TanStack Query data to Redux or Context: Many developers coming from Redux backgrounds make the mistake of immediately dispatching TanStack Query results to their existing state management. This creates two sources of truth and defeats the purpose of using TanStack Query. A better way is to use the data from Tanstack Query directly instead of copying it elsewhere.
Misusing the refetch function: Beginners often use refetch()when they should be updating the query key. The refetch function should only be used when you want to re-run the exact same query with identical parameters. When your parameters change (like filters or pagination), include them in your query key instead.
Not understanding when queries run: TanStack Query automatically refetches data in certain situations (like when the window regains focus), which can be surprising for newcomers. Configure staleTime and cacheTime to control when your data is considered fresh and how long it stays in cache. For data that doesn't change often, increase the staleTime.
Reusing Query Keys: Each query needs a unique queryKey. Using the same key for different data can cause caching issues.
Forgetting Dependencies: Ensure you install @tanstack/react-query and wrap your app in the QueryClientProvider, or the hooks won't work.

Conclusion

TanStack Query transforms React data fetching from a manual, error-prone process into an automated, reliable system. By handling caching, background updates, error states, and loading management automatically, it lets you focus on building features instead of managing data infrastructure.

It's like having a helper who handles the messy parts of server communication, while you focus on building a great app. Start with small examples like the one above, and as you get comfortable, explore features like mutations (for updating data) or optimistic updates.

Happy coding!

The only thing I'm confident enough to push on a Friday evening, check it out!

Joseph Muchai — Fri, 18 Jul 2025 13:05:10 +0000

Joseph Muchai

Jul 18 '25

Introduction to Web Design for Web Developers

#design #beginners #webdev

Comments 1

17 min read

Introduction to Web Design for Web Developers

Joseph Muchai — Fri, 18 Jul 2025 12:59:28 +0000

Introduction

The web development scene has evolved significantly over the past few years, and the aesthetic essence of a website is now as important as its essential functionality. In today's digital landscape, the success of web applications relies not only on robust functionality but also on visually appealing and intuitive user interfaces. The binding of sleek design and efficient functionality enhances the overall usability and user experience, making it a key factor in the success of any web application.

As a web developer, this emphasizes the need to develop a keen eye for web design and attain a solid grasp of user experience principles. Furthermore, given the competitive tech landscape, developers with web design skills stand out significantly. Not only can they create more intuitive and user-friendly interfaces, but they are also more versatile and valuable to employers, as they can contribute to both the technical and visual aspects of a project. Understanding design principles also fosters better communication and collaboration with designers, allowing for more seamless integration of design and development processes.

This guide will serve as a basic introduction to web design. We'll delve into key web design principles such as visual design fundamentals, typography, color theory, and responsive design. We'll also explore how to cultivate a design mindset, leverage popular design tools like Figma, and integrate these tools into your development workflow.

Let's dive right in!!

Key Web Design Principles to Master

We will begin by learning about the essential principles for good design. Just like in programming, there are a number of fundamental foundations of design that one should learn. Understanding and applying these principles will help you create cohesive, attractive, and intuitive interfaces.

In this section, we will explore the fundamental aspects of visual design, typography, color theory, and responsive design.

Visual design principles

Visual design principles are the fundamental guidelines that dictate how the basic elements of design, such as line, shape, color, texture, space, and volume, are organized and combined to create effective, aesthetically pleasing, and functional visual compositions.

These principles help designers arrange elements in a way that communicates messages clearly, guides the viewer’s attention, and enhances usability.

They include:

1. Contrast

Contrast is the difference between two or more adjacent elements in a design. This difference allows some elements to stand out more than others, which helps create visual interest and draw attention to specific areas. It makes your design "POP".

Contrast can be created using color, size, or shape. By applying contrast, you can guide the user's eye and highlight important information. High color contrast, for example, is used to highlight important buttons on a website.
Insufficient contrast, on the other hand, especially when dealing with text, can result in poor readability and legibility issues.

This website applies contrast by using a dark background with a bookshelf image against light text and a bright yellow headline, creating a striking visual hierarchy and emphasizing key elements.

2. Alignment

Alignment involves arranging elements in a way that creates a visual flow and connection. It can help users understand how elements relate to each other by creating a sense of structure, harmony, and visual appeal.

You can apply different types of alignment to various design aspects, such as typography, grid systems, and graphic elements. A good rule of thumb is to apply consistent alignment across interfaces. For example, you can choose to align all headings on a page to the left to create a sense of familiarity and predictability.
Poor alignment in a design results in a page that looks cluttered and unfinished.

This design applies alignment by organizing the "Latest Article" section with a consistent left-aligned text layout for the title and description, while the blog post previews are evenly spaced and centered within their respective cards, creating a structured and visually balanced grid.

3. Balance

Balance refers to the distribution of visual weight in a design. It plays a crucial role in influencing where the viewer's eye lands and is most focused on. The visual weight of an element is based on its size, color, and texture.

Elements with a higher visual weight (larger size, brighter color, etc.) draw the viewer's eye more than those with a lower visual weight. Hence, you should aim to create a sense of stability and harmony in your designs to ensure no part feels heavy or overwhelming compared to the rest.

There are 2 main types of balance in web design:

Symmetrical: Elements are mirrored on either side of a central axis, creating a formal and organized look. It is often used where order and predictability are key. For example, if you have a design where the left and right sides have equal visual weight, it feels stable and harmonious.

The design features a central axis with the "Hardware Infrastructure" and "Management Tools" sections mirrored on either side, each with similar shapes, sizes, and layouts—both have a heading, descriptive text, and a linked word ("About firewall" and "Documentations") creating an even distribution of visual weight and a harmonious, mirrored composition.

Asymmetrical: Elements of differing sizes, colors, or shapes that are arranged in a way that still creates a sense of equilibrium. Instead of mirroring, it relies on contrast and scale to achieve balance.

This design achieves balance by distributing visual weight unevenly across the layout while maintaining harmony.

4. Hierarchical proximity

This refers to the arrangement of design elements based on their importance and relationship. The closer the related elements are placed, the stronger the perceived connection between them.

By creating a visual association between related items, information is rendered in a way that improves readability as well as understanding. For instance, placing headings close to corresponding text in designs not only ensures a logical flow through our pages but also a smoother user experience.

In web design, we can apply hierarchical proximity by grouping related content, like text and images, to create clear sections, placing buttons near relevant actions to encourage clicks, organizing navigation menus logically, and spacing out unrelated elements to reduce clutter and improve readability.

This design demonstrates hierarchical proximity by grouping the text "Find cheap flights and deals..." with the world map and hand graphic, and the building photo with the text "Book hotels, apartments, houses...", using tight spacing to create a clear visual hierarchy and guide the viewer's eye logically from flights to accommodations.

5. Repetition

This is the use of the same or similar elements, such as colors, fonts, and shapes, throughout a composition to create unity and consistency. It is key in creating a cohesive and recognizable visual identity in our designs.

By repeating certain visual elements such as colors, shapes, fonts, and patterns, we can create emphasis, drawing attention to key messages or features in a design. Repetition also helps convey a sense of familiarity, which fortifies the overall brand identity and creates a powerful, enduring presence. For instance, the strategic color repetition of Google in branding its applications.

It can take various forms:

Pattern: This involves the repeated use of identical or similar shapes and colors to create a visual rhythm. Patterns can enhance the aesthetic appeal of a design and contribute to its overall texture.
Rhythm: In design, rhythm refers to the spacing and arrangement of repeated elements, creating a sense of movement and flow. This can guide the viewer's eye through the composition, making it more engaging.
Visual Elements: Repetition can be applied to specific visual components, such as icons, buttons, or typography, ensuring that these elements are consistently presented across a design or a series of designs.

This dashboard design from Donezo exemplifies repetition as a visual principle through consistent green buttons, uniform card layouts, and repeated circular avatars, creating a cohesive and unified user interface.

Typography

Typography in web design refers to the skillful and deliberate selection, arrangement, and implementation of typefaces to enhance a website's aesthetic appeal and readability.

Typography is crucial for readability, hierarchy, and branding. For example, choosing a clean sans-serif typeface like Roboto can create a modern, approachable tone, while a serif typeface like Georgia may evoke tradition and elegance. Clear typefaces improve comprehension, and strategic choices guide users’ attention while reflecting a site’s personality.

Beyond aesthetics and readability, typography must prioritize:

Skimmability, as users often scan web pages for specific information.
Accessibility, ensuring text is legible for all users, such as those using screen readers or requiring high-contrast displays.
Multiple screen sizes, making text clear and adaptable across devices, from smartphones to desktops.

However, selecting a typeface is just the start. Decisions like line length (the width of a text block) and line height (the space between lines) significantly impact readability and user experience. Optimal line lengths, typically 50–75 characters, and balanced line heights prevent strain and ensure a cohesive design.

Here are some guidelines to improve your typography implementations:

1. Pair fonts thoughtfully

Use compatible typefaces, especially if they use different fonts within the typeface for different purposes, such as headings, body text, button text, etc. You can leverage tools like FontJoy and Typ.io to get good font combination recommendations.

2. Choose readable fonts

Opt for clear, legible typefaces, for example, sans-serif fonts like Roboto, Open Sans, or serif fonts like Georgia for body text.
Ensure fonts are optimized for digital screens, avoiding overly decorative or thin fonts that strain the eyes

3. Establish a typographic hierarchy

Use varying font sizes, weights (bold, regular, light), and styles to guide users through content, e.g., larger headings, smaller subheadings, and body text.
This helps readers scan through pages for the target content.

4. Maintain proper contrast

Ensure high contrast between text and the background, for example, dark text on light backgrounds or vice versa, for accessibility.
Follow the Web Content Accessibility Guidelines (WCAG) guidelines on a minimum of 4.5:1 contrast ratio for most text and 3:1 for large, bolded text.
Use free tools such as Colourcontrast.cc to check the contrast between your font and background color.

5. Use appropriate font sizes

Set body text to between 16–24px for desktop and scale appropriately for mobile, e.g., 14–18px.
Also, use responsive typography such as relative units like rem or vw, to adapt to different screen sizes.

6. Mind line spacing and length

Set line height (leading) to 1.4–1.8 times the font size for comfortable reading and keep line lengths to 50–75 characters per line to avoid reader fatigue.

7. Test across all devices

Preview typography on various devices and browsers to ensure consistency.
Use tools like BrowserStack or Google DevTools to simulate different screen sizes.

Color Theory

Color theory is the art and science of how colors interact and affect human emotions and perceptions. In web design, color theory serves as a framework that enables you to pick colors that not only go well together but also convey the right mood and message in your website.

It lets you guide visitors’ eyes to key elements, reinforcing a brand’s personality, and creating an emotional connection that keeps people engaged. When applied thoughtfully, color theory transforms a simple layout into an immersive experience.

Some of the key concepts of Color theory you should be familiar with include:

1. The Color Wheel and Relationships

The color wheel is the basis of all color theory as it shows the relationship between colors. It was invented in 1666 by Isaac Newton by mapping the color spectrum onto a circle.

There are 2 types of the color wheel:

The RYB(red, yellow, blue) color wheel, typically used by artists, as it helps with combining paint colors.
The RGB(red, green, blue) color wheel, designed for digital screen use, as it refers to mixing light.

Our main focus will be the RGB color wheel.

RGB color wheel.

By systematically categorizing colors, the RGB color wheel defines three major color groups:

Primary colors: These are red, green, and blue. They form the bedrock of every color palette and give rise to every shade and tint you see. They cannot be created by mixing other colors.
Secondary colors: These emerge when you blend 2 primaries. Red and green make yellow, green and blue make cyan, and blue and red make magenta.
Tertiary colors: These are formed by mixing a primary and a secondary color. They are 6 in total and include: orange, chartreuse green, spring green, azure, violet, and rose.

Source: Canva

It is from the above color groups and how they are aligned on the color wheel that we get key color relationships/schemes. These color schemes are what we use when creating a color palette for our designs. Some of them include:

Complementary: Complementary colors are opposite each other on the color wheel, for example, blue and orange. This combination provides a strong contrast, making things "pop". This is why it's great for highlighting key parts of your design. At full saturation, complementary hues can be extremely vibrant. Thus, it's advisable to moderate the intensity by incorporating tints, tones, and shades to extend the palette and make it more palatable for a wide range of projects.

Source: Clay

Monochromatic: A monochromatic color scheme involves using different shades, tints, and tones of one color. By adding touches of white, gray, or black, a single color can be expanded into a comprehensive color palette. It is extremely versatile, harmonious, and easy on the eye.

Source: ColorHunt

Analogous: An analogous color scheme is created with three colors that are side by side. It starts with a base hue and is extended using two neighboring colors. The combination of these hues has a harmonious appeal, making it the perfect scheme for a soothing and serene vibe.

Source: Figma

Triadic: A triadic color scheme uses three colors that are evenly spaced around the color wheel. This provides a high contrast color scheme, but less so than the complementary color scheme, making it more versatile. Most triadic palettes are vibrant, contrasting, and can be difficult to balance. A good place to start is to assign one base hue, then use the remaining two hues as accent colors.

Source: Canva

Tetradic: A tetradic color scheme uses four colors that are evenly spaced on the color wheel. This scheme works best when you let one color be dominant and use the rest as accents. It’s good for when you want variety but still need harmony in your design.

Source: Binus

2. Color Psychology

Color psychology involves examining the influence of colors on people's behaviors and moods. Different colors often evoke different emotions in the person perceiving them. To create a great design, you have to know what different colors mean and the emotional effect they have on users.

Blue often signifies trustworthiness, serenity, and reliability. For that reason, it is a perfect choice for brands looking to depict professionalism and dependability. Companies like Facebook and LinkedIn use different shades of blue in their logos to develop user trust.

On the other hand, red is known for being energetic, passionate, and attention-grabbing. This is a typical color used by brands that want an optimistic or demanding feel, like Netflix.

Yellow stands for joyfulness, positivity, and warmth. However, its brightness can be overpowering if overused, so it's typically used for highlights and accents.

Green signifies nature, growth, and harmony. It also signifies growth and prosperity, making it suitable for finance-related websites.

Lastly, purple symbolizes luxury, creativity, royalty, or nobility. It is often used in beauty, luxury, and innovative technology websites to provide a sophisticated and unique feel.

It is also nice to remember that a user's perception of color is dependent on factors such as their age, gender, culture, and religious beliefs. Colors can have many meanings that resonate differently with each user. Therefore, it is crucial to have your target audience in mind when choosing color palettes for web design.

3. Color Properties

Color properties are the fundamental characteristics that define and distinguish one color from another. In web design and color theory, the main properties of color are:

Hue: Hue refers to the basic color family or the name of the color itself, such as red, blue, yellow, or green. It is what most people think of as "color" and is determined by the wavelength of light
Saturation: Saturation (also called intensity or chroma) describes the purity or vividness of a color. Highly saturated colors are bold and vibrant, while low-saturation colors appear muted, grayish, or washed out. Saturation affects the mood and energy of a design, with high saturation often used for excitement and low saturation for calmness or sophistication
Value: Value (sometimes called brightness or lightness) indicates how light or dark a color is, ranging from pure white to pure black. High-value colors are lighter, while low-value colors are darker. Value is crucial for creating contrast, depth, and visual hierarchy in web design
Temperature: Color temperature refers to whether a color feels warm (reds, oranges, yellows) or cool (blues, greens, purples). Warm colors evoke energy and passion, while cool colors are calming and serene. Temperature helps set the emotional tone and balance of a website.

Tools for creating color schemes and palettes

There is a wide range of tools available to help you generate, refine, and experiment with color schemes and palettes. Most of these tools apply color theory principles, offer palette previews, as well as features for accessibility and export.
Here are some of the most popular and effective options out there:

Coolors : A fast and user-friendly color palette generator. It also lets you extract color schemes from images.
Colormind: A palette generator that leverages AI and deep learning to generate harmonious palettes, even from images or popular media.
Adobe Color : A comprehensive palette generator based on color theory. It features a color wheel, a palette from image extraction, and an online library to explore trending color schemes.
Paletton: A robust tool for creating color schemes based on color theory. It provides you with a color wheel, preview modes, harmony rules, and an accessibility simulation.
ColorHunt: This is a community-driven platform for finding inspiration and trendy, curated palettes or generating new ones from a base color.

Responsive web design

Responsive web design is an approach that ensures web pages render well and function optimally across a wide range of devices and screen sizes, from desktop monitors to tablets and smartphones.

Coined by web designer and developer Ethan Marcotte in 2010, the primary goal of responsive web design is to provide users with a seamless and user-friendly experience, regardless of the device used to access the website.

To create adaptable and flexible responsive web designs, below are some of the core principles and techniques you can apply:

1. Fluid Grids

Fluid grids use relative units like percentages or viewport widths(vw) instead of fixed units like pixels. This allows layouts to scale proportionally to the screen size.
For example, a two-column layout might use width:50% for each column, ensuring they resize smoothly across devices.

2. Flexible images

In a responsive design, images should scale within their containers to prevent overflow or distortion. One way to achieve this is by setting max-width: 100% in CSS for media elements to ensure they scale down within their containing element.

3. Media queries

Media queries are the backbone of responsive web design. They allow you to apply different styles at different screen widths by leveraging breakpoints. Breakpoints define where a layout changes based on screen size. Common breakpoints align with standard device widths (e.g., 576px for mobile, 768px for tablets, 992px for desktops). This means that by using media queries, your design adapts to fit various devices.

4. Mobile-first approach

A mobile-first approach means designing for smaller screens first, then progressively enhancing the features to suit larger layouts as well. This strategy often leads to cleaner, more focused designs and better performance on mobile devices.

5. The Viewport Meta Tag

The viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">) tells the browser how to control the page's dimensions and scaling, ensuring your responsive design is rendered correctly on mobile devices.

Cultivate a design mindset

A design mindset is a human-centered approach to problem-solving that emphasizes empathy, experimentation, and iterative progress.
In the context of web design, it involves a way of thinking that prioritizes understanding user needs and continuously seeking innovative solutions to create intuitive, aesthetically pleasing, and functional websites.

It emphasizes building user-driven solutions that genuinely resonate with target audiences. This requires you to shift from thinking primarily about technology and features to considering the user's perspective, emotions, and goals when interacting with an application.

You can cultivate a design mindset by adopting practices that bridge technical expertise with design principles. Here are actionable steps to achieve this:

Develop user empathy

Try to engage directly with users through interviews, surveys, and observations to understand their needs and pain points. This firsthand exposure to users helps to align development decisions with user expectations and wants.
Learning user experience(UX) basics, such as user personas and journey mapping, is also a good starting point for gaining more insight into user perspectives and how to design more inclusive web applications.
Shift from Technology-First to Problem-First thinking

Instead of starting each project or feature with technical specifications, try to start with user-focused questions. For example, "How might we make the sign-up process much easier for users?" rather than "How can we implement this authentication module?"
Also, instead of measuring success by technical achievements, evaluate projects based on user satisfaction and goal completion. This shift helps prioritize features that genuinely add value for users
Embrace prototyping early and often

Before investing in full development, try to create low-fidelity prototypes to test your ideas quickly. Observe how users interact with these prototypes and gather feedback to inform design decisions. This will help you design and develop programs that are user-oriented from the start.
Develop visual design awareness

Spend time browsing design showcase sites like Dribbble and Awwwards to develop an eye for effective interface design. You can also use these sites as a reference point for your designs. Learning and understanding the design fundamentals we covered earlier is also an effective way to develop this type of awareness.
Build cross-functional collaboration skills

If you have the privilege of being in a team with UX/UI designers, try to work closely with them and not only understand their process but also contribute your technical insights during the design phase. This collaboration will grow your insight on how to design interfaces that are both user-friendly and technically feasible.
Curiosity and Inspiration

Foster curiosity by keeping your mind on the lookout for interesting design solutions in your daily life, from cafe menus to app interfaces. Or explore award-winning websites on Awwwards, Dribbble, or Behance. Doing this will keep you motivated and spark more creative ideas for your designs.

Leverage design tools and software

A more practical way to get better at design is to integrate design tools and software into your development workflow. Before jumping into code, use design tools to create wireframes, mockups, and prototypes that help you visualize your end product. This upfront investment saves significant development time by identifying potential issues early and establishing clear visual requirements.
This approach will also help you directly apply most of the design principles we covered earlier.
Some popular design tools you can use are:

Figma: A cloud-based design tool known for its real-time collaboration and robust prototyping capabilities. It’s widely used for UI/UX design and is accessible on any platform via a web browser, making it ideal for cross-functional teams.
Sketch: Sketch is a Mac-exclusive design tool renowned for its vector editing capabilities and extensive plugin ecosystem.
Framer: A powerful prototyping and design tool that combines visual design with code-based interactivity, ideal for developers comfortable with React or JavaScript.
InVision: A prototyping and collaboration tool focused on creating interactive mockups and facilitating design feedback.

Conclusion

In this comprehensive guide, we have covered basic guidelines on how to develop your design skills as a developer.
We've delved into the key web design principles: visual design, typography, color theory, and responsive design. We've also looked at each principle in depth, from how to apply contrast, pick fonts, choose colors, to how to keep our designs adaptive and flexible.
We've also learnt how to cultivate a design mindset by looking into practices that bridge technical expertise with design principles.
Lastly, we've gone through how to incorporate modern design tools into your dev workflow. All of these guidelines will help you create more polished, user-centered applications while developing valuable design skills that are increasingly essential in modern development roles.
In conclusion, I hope this blog helps you level up your design skills as a developer. Happy coding!

TypeScript FullStack project - BookVerse

Joseph Muchai — Mon, 23 Jun 2025 09:14:45 +0000

I recently built my first full-stack TypeScript project, blending modern web development with AI-powered features to redefine the digital reading experience!

What is BookVerse?
BookVerse is a web app that acts as your digital bookshelf. It lets you search for books, manage your book lists(favorites, reading lists, completed), access instant download links (Consumet API), and engage with an AI-powered chatbot for book summaries, insights, and recommendations.

Check out the live preview: https://bookvs.pages.dev/

Tech Stack

Frontend: React, TypeScript
Backend: Express, Node, TypeScript
Styling: Tailwind CSS
APIs: Google Books API (for books and metadata), Consumet API for download links, and the new Google GEN-AI SDK for the chatbot.

This project was a challenging yet rewarding journey into modern web development, streaming AI interactions with Server-Sent Events, and advanced API integrations. I’m excited to keep pushing the boundaries of what’s possible!

Curious? Explore the code:
Frontend: https://github.com/Joseph-kdev/BookVerse
Backend: https://github.com/Joseph-kdev/bookverse-server

I’d love to hear your thoughts or feedback! What’s a feature you’d add to a digital bookshelf? Or how would you build it?

Getting started with Shadcn/UI in React: A practical guide

Joseph Muchai — Mon, 09 Sep 2024 08:01:12 +0000

Introduction

The front-end development world is ever-changing. Front-end developers seek new ways to create high-quality, accessible, visually appealing user interfaces for websites and apps. This drives React developers to constantly search for tools and libraries that can simplify their development process and help them create amazing user interfaces. This is where Shadcn/UI comes in.

It is a collection of beautifully designed user interface (UI) components that you can easily copy and paste into your applications. Developers can use it with any framework that supports React, like Next, Gatsby, Remix, and others.

In this practical guide, let us explore some of its key features, how to get started, and implement some hands-on examples. To fully understand the contents of this guide, you should have a good understanding of React and Tailwind CSS.

What is Shadcn/UI?

It is an open-source UI library that offers a comprehensive list of reusable front-end components designed for modern React applications. It takes a distinctly different approach from the more opinionated UI libraries like Material UI (MUI) or Bootstrap. While those libraries often have rigid, predefined styles and components, Shadcn/UI aggressively focuses on minimalism, accessibility, and customizability.

It is not distributed via the node package manager (npm) as a dependency. Most UI libraries (such as MUI, Bootstrap, Chakra UI, etc.), are distributed as npm packages which means you install them using npm install "library-name", and then you get all of the library UI components added to your code in the node_modules as dependencies.

However, for Shadcn/UI, developers run commands on the shadcn command line interface(shadcn-cli) to selectively add components directly into their project. The npx command, which allows running a package without needing to install the package globally, is used. For example, npx shadcn-ui@latest add button fetches the latest shadcn-cli version and runs the command to copy a button component's code directly into your project, not the node_modules.

This approach allows you to selectively integrate only the necessary components, providing greater flexibility and customization. When developers package components in an npm package, they couple the style with the implementation, resulting in less customizable code.

To clarify, running npm install shadcn-ui installs the shadcn-cli and not the actual UI library. This is unnecessary since you can execute the shadcn-cli using npx without installing it globally.

It is built with Tailwind in its foundation and incorporates components and techniques from the Radix UI. This combination of Tailwind and Radix UI allows for a unique blend of design flexibility, accessibility, and development speed. Developers can leverage the utility-first classes provided by Tailwind to style their components quickly.

Why use Shadcn/UI?

Using it in your React projects offers several key benefits. Let's explore each one:

Accessibility: The components adhere to the Web Content Accessibility Guidelines (WCAG), and provide keyboard navigation, screen reader support, and other accessibility features out of the box.
Customizability: Developers can tailor the look and feel of each component to ensure it harmonizes with their application's overall design language. By decoupling component design from implementation, you get easier updates, scalability, and style swapping without affecting core functionality.
Modularity: Developers can select specific components to copy and paste directly into their projects. This approach promotes modularity and maintainability, making developers update, scale, and style components more easily.
Ease of use: Components offer a simple copy-paste approach that empowers developers with ownership and granular control over the codebase. Developers can now shape and style the components according to their unique preferences and requirements.
Utility-first design: By leveraging Tailwind, there is a utility-first design approach, allowing you to apply styles and customize the appearance of your components quickly. Hence, faster development times and a more streamlined design process, as you don't write as much custom CSS.
Amazing documentation: The documentation is great, with clear explanations, code examples, and guidelines for using the library effectively.

Getting Started

Now, let us cover how to set up Shadcn/UI in a React project using Vite without Typescript. You can check out the documentation for more instructions on integrating with other frameworks.

Use your terminal or command line interface to create a new React project.
```
npm create vite@latest my-shadcn-app -- --template react
```
A new directory called my-shadcn-app is created with a basic React project structure.
Add Tailwind.

After navigating to the my-shadcn-app project with your IDE, in the terminal run the commands below to install Tailwind and its peer dependencies.
```
npm install -D tailwindcss postcss autoprefixer
```
This will generate thetailwind.config.js and postcss.config.js files.
```
npx tailwindcss init -p
```

Create and edit a jsconfig.json file: Since we are not using typescript we do not have a tsconfig.json file like in the documentation. Hence, create a jsconfig.json file. In this file, add the following code to tell the JavaScript language service to map the@ symbol to the ./src/ directory, allowing you to use the @ symbol when importing components or modules from your project's src directory:

Update vite.config.js:

First, install one more required dependency:
```
npm i -D @types/node
```
Add the following configuration to ensure that Vite can resolve the paths using the @ symbol in your imports:

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Add Shadcn/UI

To install dependencies and set up the necessary files and structure for you to start using the reusable components, run:
```
npx shadcn-ui@latest init
```
The terminal will then prompt you for additional configurations. A preview of my responses:

Add a component: You can create a component by copying its code from the specified documentation or adding it through the terminal.

As an illustration, let us install a button component using the terminal. This component's code will be in the components folder after installation. It will provide everything you need to create your Button component template.
Run the command:
```
npx shadcn-ui@latest add button
```
The result:

To use the Button component in your code import it like any other regular React component. You can customize its appearance by passing in the variant and size props.

import "./App.css";
import { Button } from "./components/ui/button";

function App() {
  return (
    <>
      <Button variant="ghost" size="lg">
        Click me
      </Button>
    </>
  );
}

export default App;

More on themes and the theme editor

Shadcn/UI offers a unique approach to theming by providing hand-picked themes that developers can copy and paste into their applications. You can customize these themes manually in your code by tweaking the default variables or using the theme editor online.

The online theme editor is more developer-friendly and provides a visual interface for configuring the style, color, border-radius, and mode (light/dark). A preview of the theme editor:

Sample implementations with real-world UI examples

Now, we will dive into some real-world UI scenarios to explore the components:

Carousel and Card: A simple product gallery

A common UI element used in e-commerce websites is the carousel or image slider, which allows customers to preview product images. In this section, we will build a 'trending products' section for an online sneaker store.

The Carousel component from Shadcn/UI is built using the Embla carousel library. We will use this and the Card component to create a smooth and responsive image slider for product showcasing.

To begin, add the Carousel and Card components to your project:

npx shadcn-ui@latest add card

and

npx shadcn-ui@latest add carousel

After installation, import these components from @/components/ui. The Card, CardContent, and CardTitle will structure and style the individual product cards. For the scrollable and interactive product showcase, import the Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious.

import * as React from "react";
import { Card, CardContent, CardTitle } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

The App function in the App.jsx is the main React component that will render the UI. The products array initializes dummy product data, where each object represents a product with a name and an image.

In the return statement place a div container styled with Tailwind to center the content and provide padding and a h1 element displaying the title "Trending Products".
The Carousel component wraps all the product items, setting constraints for its width at different screen sizes.

function App() {
  const products = [
    {
      name: " Air max 90 PREMIUM Curry",
      image: "/src/assets/Air-max.jpg",
    },
    {
      name: "Air Jordan 1 High OG",
      image: "/src/assets/Air-1.jpg",
    },
    {
      name: "Puma RSX Pink",
      image: "/src/assets/puma-rsx-pink.jpg",
    },
    {
      name: "Air Force 1",
      image: "/src/assets/shoe.jpg",
    },
    {
      name: "Nike SuperRep Go",
      image: "/src/assets/super.jpg",
    },
    {
      name: "Air Jordan 12",
      image: "/src/assets/jordan-12.jpg",
    },
    {
      name: "Puma RSX Pink",
      image: "/src/assets/puma-rsx-pink.jpg",
    },
  ];

  return (
    <>
      <div className="flex flex-col items-center justify-center py-8">
        <h1 className="text-2xl font-bold mb-6">Trending Products:</h1>
        <Carousel className="w-full max-w-[90%] md:max-w-[80%] lg:max-w-[80%]">
            // Carousel content will go here...
        </Carousel>
      </div>
    </>
  );
}

export default App;

Within the Carousel component wrap the entire image slider with the CarouselContent component. The products.map() method iterates over each product in the array, creating a CarouselItem for each. The key attribute will ensure that each item is uniquely identifiable.

The Tailwind utility class basis in the CarouselItem sets the number of products shown at different screen sizes. Each product item in CarouselItem will be wrapped in a Card component containing the img element to showcase the product image and a CardContent component that overlays the image with the product name.
Outside of the CarouselContent, the CarouselPrevious and CarouselNext components are used to navigate through the carousel items.

<Carousel className="w-full max-w-[90%] md:max-w-[80%] lg:max-w-[80%]">
  <CarouselContent>
    {products.map((product, index) => (
      <CarouselItem
        key={index}
        className="sm:basis-1/1 md:basis-1/2 lg:basis-1/3"
      >
        <Card className="h-full">
          <div className="relative h-[300px]">
            <img
              src={product.image}
              alt={product.name}
              className="h-full w-full object-cover"
            />
            <CardContent className="absolute bottom-0 left-0 right-0 bg-white/70 p-4">
              <CardTitle>{product.name}</CardTitle>
            </CardContent>
          </div>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2" />
  <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2" />
</Carousel>;

This implementation creates a responsive product gallery with a carousel, displaying product images and names in a visually appealing manner:

Accordion: A Frequently Asked Questions(FAQ) section

A Frequently Asked Questions (FAQ) page is an integral part of any SaaS (Software as a Service) platform. It addresses the user's most common questions, removing the need to search through extensive documentation for information.

The accordion is a vertically stacked set of interactive headings that reveal a section of content. It is the perfect component for building a FAQ section or page. Here, we will implement a responsive FAQ page for an artificial intelligence SaaS platform.

Start by installing the Accordion component:

npx shadcn-ui@latest add accordion

The components Accordion, AccordionItem, AccordionTrigger, and AccordionContent will be imported from the ui folder under components and into the App.jsx. These components will be essential for creating an accordion-style interface.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

In the App function, initialize the faqs array with a set of FAQ objects, each containing a question and an answer. This data structure will allow for easy iteration and dynamic rendering of each FAQ item.

In the return statement, a div container houses our entire implementation. Within this div we will have a h2 element displaying the title "Frequently Asked Questions," centered and styled for emphasis. Another div will be used to wrap around the actual Accordion component.

function App() {
  const faqs = [
    {
      question: "How does your AI SaaS platform work?",
      answer:
        "Our AI SaaS platform leverages advanced machine learning algorithms to provide intelligent solutions for our customers. Users can access a wide range of features and tools to enhance their workflows and decision-making processes.",
    },
    {
      question: "What kind of AI models does the platform support?",
      answer:
        "The platform supports a variety of AI models, including natural language processing, computer vision, and predictive analytics. We are constantly expanding our AI capabilities to meet the evolving needs of our customers.",
    },
    {
      question: "How secure is the data on your platform?",
      answer:
        "Data security and privacy are our top priorities. We employ industry-leading encryption and access controls to ensure the confidentiality and integrity of our customer's data. Our platform is regularly audited and certified to meet the highest security standards.",
    },
    {
      question: "Do you offer any integration options?",
      answer:
        "Yes, our AI SaaS platform integrates seamlessly with several business software and tools, including CRM, ERP, and project management systems. This allows our customers to incorporate the AI into their existing workflows.",
    },
  ];

  return (
    <>
      <div className="max-w-5xl mx-auto py-12">
        <h2 className="text-3xl font-bold mb-8 text-center mb-10">
          Frequently Asked Questions.
        </h2>
        <div className="md:flex gap-2">
          // image and accordion component will be here...
        </div>
      </div>
    </>
  );
}

export default App;

In the div that will wrap around the Accordion component, initialize two divs:

The first div will have an image element visible only on medium and larger screens (md:block). The image will be aligned to take half the available width (md:w-1/2), providing a visual complement to the FAQs.

The second div will also take half the width on medium and larger screens and contain the Accordion component. The Accordion component will be initialized with the type="single" and collapsible props, meaning only one accordion item can be open at a time, and the user can collapse the open item.

The faqs.map() method iterates through the array of FAQ objects, generating an AccordionItem for each. Inside each AccordionItem, the AccordionTrigger will display the question (faq.question) as a clickable heading (h3). The AccordionContent reveals the corresponding answer (faq.answer) when the item is expanded.

<div className="md:flex gap-2">
  <div className="md:w-1/2 hidden md:block h-8 m-9">
    <img
      src="/src/assets/artAI.jpg"
      alt="AI Assistant"
      className="w-64 h-auto"
    />
  </div>
  <div className="md:w-1/2">
    <Accordion type="single" collapsible>
      {faqs.map((faq, index) => (
        <AccordionItem value={`item-${index}`} key={index}>
          <AccordionTrigger>
            <h3 className="text-lg font-medium">{faq.question}</h3>
          </AccordionTrigger>
          <AccordionContent>
            <p>{faq.answer}</p>
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  </div>
</div>;

Finally, export the App component as the default export:

export default App;

The outcome is a clean and organized FAQ section which users can easily interact with:

Aspect ratio: Responsive YouTube Video Embed

Embedding YouTube videos is common in many web applications, especially content-driven ones like blogs, tutorials, or educational platforms. Implementing video embeds in React applications can sometimes be a pain since you apply extra CSS styles to achieve responsiveness.

The AspectRatio component allows us to create consistent and visually appealing display layouts. You can use it with images or videos. In this section, we implement a simple blog that embeds a YouTube video.

First, add the AspectRatio component:

npx shadcn-ui@latest add aspect-ratio

Then, import the AspectRatio component from our project's UI components directory. This component will help maintain a consistent aspect ratio for our embedded video.

import { AspectRatio } from "./components/ui/aspect-ratio";

Next, define a VideoEmbed function component. This component will render a YouTube video embedded within an AspectRatio wrapper to maintain a 16:9 aspect ratio.

The iframe element within the AspectRatio component will embed the YouTube video. Set various attributes on the iframe to control its behavior and appearance, including the video source, title, and allowed features.

function VideoEmbed() {
  return (
    <AspectRatio ratio={16 / 9}>
      <iframe
        src="https://www.youtube.com/embed/AqmMx_JidGo?si=1A9BJFdRBaq5axwv"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        className="w-full h-full"
      />
    </AspectRatio>
  );
}

The main App function component will structure the layout of our page. Wrap the content in a div container with Tailwind CSS classes to set maximum width, center the content, and add padding. Inside this container, place a h1 element for the main title, styled with Tailwind for size, weight, and margin, and a paragraph of lorem ipsum text above the video embed. Also, place the VideoEmbed component defined earlier and a paragraph of text below the video embed.

function App() {
  return (
    <>
      <div className="max-w-5xl mx-auto py-2 px-5">
        <h1 className="text-3xl font-bold mb-4">A glimpse into Shadcn/ui</h1>
        <p className="mb-8">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
          suscipit semper neque sed imperdiet. Suspendisse ac urna luctus,
          tincidunt mauris sit amet, fringilla enim. Etiam quis neque in leo
          sollicitudin maximus. Aenean at pulvinar elit. Morbi viverra quam
          tempor nunc sollicitudin fringilla. Nullam malesuada vestibulum
          congue. Aliquam ac ante gravida, dapibus ante nec, congue nisl.
          Maecenas orci purus, porttitor non enim non, ultrices faucibus est.
          Nullam vitae odio fringilla, molestie ante ut, luctus ante.
        </p>
        <VideoEmbed />
        <p>
          Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
          consectetur, adipisci velit...
        </p>
      </div>
    </>
  );
}

Finally, export the App component as the default export:

export default App;

This implementation creates a page with a title, introductory text, an embedded YouTube video maintained at a 16:9 aspect ratio, and a concluding text. The layout is responsive and centered on the page, providing a clean and organized content presentation.

The result:

Command and Sheet: Collapsible sidebar

A popular UI navigation pattern is the sidebar. For easier accessibility on smaller devices, it is made collapsible. We will implement it using the command and sheet components.

The command component allows us to create a command menu for react that offers functionality like displaying suggestions, settings, and more in a command-like interface. It uses the cmdk component, a combo box search, and command component.

The sheet component extends the dialog component to display content that complements the main content of the screen from the official documentation. It is a good option when building components that require user interaction, such as menus and modal dialogs.

In our example, we will combine these 2 to build a collapsible sidebar for a project management tool.

First, install the needed components. Using the npm command line interface:

npx shadcn-ui@latest add sheet

and then,

npx shadcn-ui@latest add command

Then, import the necessary components from our project's UI components folder. These include the Command components for creating a command palette interface, Sheet components for a sliding panel, and the Button component for our menu trigger. We will also import several icons from the lucide-react library to enhance our UI.

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "./components/ui/button";
import {
  BriefcaseIcon,
  FolderClosedIcon,
  LayoutDashboardIcon,
  LogOutIcon,
  MenuIcon,
  ReceiptEuroIcon,
  SettingsIcon,
  UserIcon,
  UsersIcon,
} from "lucide-react";

In our App function in App.jsx, structure a sliding menu panel using the Sheet component. The SheetTrigger will contain a Button component with a MenuIcon, which will open the sliding panel when clicked.

Inside the SheetContent, set up the structure of our sliding panel. Use SheetHeader to display the user's name and role, followed by a Command component to create an interactive command palette.

function App() {
  return (
    <>
      <Sheet>
        <SheetTrigger>
          <Button variant="ghost">
            <MenuIcon name="menu" className="h-6 w-6" />
          </Button>
        </SheetTrigger>
        <SheetContent side="left" className="w-[370px]">
          <SheetHeader>
            <SheetTitle>John Doe</SheetTitle>
            <SheetDescription>Project Manager</SheetDescription>
            <Command>
              // Command input and list components will go here...
            </Command>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </>
  );
}

Within the Command component, add a CommandInput for user searches, and a CommandList to display various options. Use CommandGroup components to organize our options into categories, and CommandItem components for individual menu items. Each CommandItem will contain an icon and a link.

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <LayoutDashboardIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Dashboard
        </a>
      </CommandItem>
      <CommandItem>
        <BriefcaseIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Projects
        </a>
      </CommandItem>
      <CommandItem>
        <FolderClosedIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Tasks
        </a>
      </CommandItem>
      <CommandItem>
        <UsersIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Team
        </a>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <UserIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Profile
        </a>
      </CommandItem>
      <CommandItem>
        <ReceiptEuroIcon className="h-6 w-6" />{" "}
        <a href="#" className="px-4">
          Billing
        </a>
      </CommandItem>
      <CommandItem>
        <SettingsIcon className="w-6 h-6" />{" "}
        <a href="#" className="px-4">
          Settings
        </a>
      </CommandItem>
      <CommandItem>
        <LogOutIcon className="w-6 h-6" />{" "}
        <a href="#" className="px-4">
          Logout
        </a>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

To style the components, add custom theme tokens to the index.css file. These tokens will define the background, accent, and accent foreground colors for our theme.

@layer base {
  :root {
    --background: 0 0% 100%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
  }
}

This implementation creates a sliding menu panel with a command palette interface, allowing users to navigate quickly through sections of the application. The panel is triggered by a menu button and slides in from the left side of the screen. The command palette provides a search input and categorized menu items, each with an associated icon for easy recognition.

The result:

Dialog and Tabs: Sign-up/Sign-in pop-up

The dialog component is a modal window that appears above the main app content to provide critical contextual information or ask for a decision. It can create interactive command menus, modal dialogs, and other UI elements that require user interaction.

The tabs component allows for the creation of tabbed navigation in a user interface. Tabbed navigation helps conserve screen real estate, which is particularly useful for mobile applications or websites where space is limited.

We will use these components to create a Sign-up/Sign-in pop-up section.

To begin, install the required components:

npx shadcn-ui@latest add tabs

npx shadcn-ui@latest add dialog

npx shadcn-ui@latest add input

and

npx shadcn-ui@latest add label

Then, import the necessary components. These include the Button, Dialog, Input, Label, and Tabs components, along with their related subcomponents. These will create an interactive sign-up and sign-in form within a modal dialog.

import { Button } from "./components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

In the App function, structure a modal dialog using the Dialog component. The DialogTrigger will contain a Button component with the text "Join in", which will open the modal when clicked.

Inside the DialogContent, set up a tabbed interface using the Tabs component. This will allow users to switch between sign-up and sign-in forms. The defaultValue="Sign up" ensures that the "Sign up" tab is selected by default when the dialog opens. Use the TabsList and TabsTrigger components to create the tab navigation.

function App() {
  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          <Button>Join in</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[455px]">
          <Tabs defaultValue="Sign up" className="w-[400px]">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="Sign up">Sign up</TabsTrigger>
              <TabsTrigger value="Sign in">Sign in</TabsTrigger>
            </TabsList>
            // Tab content will go here...
          </Tabs>
        </DialogContent>
      </Dialog>
    </>
  );
}

Within each TabsContent, create form fields using the Label and Input components.

The TabsContent with value="Sign up" contains the form fields for signing up, including inputs for the user's name, email, and password. Similarly, the TabsContent with value="Sign in" includes form fields for signing in, with inputs for the user's email and password. Each form will end with a submit button.

<TabsContent value="Sign up">
  <div className="space-y-2">
    <Label htmlFor="name">Your Name</Label>
    <Input placeholder="Name" />
  </div>
  <div className="space-y-1">
    <Label htmlFor="email">Your email address</Label>
    <Input placeholder="Email" />
  </div>
  <div className="space-y-1">
    <Label htmlFor="password">Build a password</Label>
    <Input placeholder="Password" type="password" />
  </div>
  <Button className="w-full my-4">Sign up</Button>
</TabsContent>

<TabsContent value="Sign in">
  <div className="space-y-2">
    <Label htmlFor="email">Your email address</Label>
    <Input placeholder="Email" />
  </div>
  <div className="space-y-1">
    <Label htmlFor="password">Remember your password</Label>
    <Input placeholder="Password" type="password" />
  </div>
  <Button className="w-full my-4">Sign in</Button>
</TabsContent>

To style the component, add custom theme tokens to our index.css file. These tokens will define various color and style properties for our theme, including background colors, text colors, border styles, and more.

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
}

This implementation creates an interactive modal dialog with tabbed sign-up and sign-in forms. The dialog is triggered by a "Join in" button. The forms are styled consistently with the custom theme, providing a cohesive and visually appealing user interface. The tabs allow for a compact design that accommodates new and existing users within the same modal, improving the overall user experience.

The result:

Best Practices

Shadcn/UI ensures a streamlined development experience when working with React. However, for it to be as effective, there are some best practices developers should try to uphold. These include:

Performance optimization: Leverage the built-in performance optimizations provided, such as lazy loading and code splitting. Implement efficient state management within the components and use dynamic imports to load components on demand.
Maintainability: Adhere to implementation conventions, such as component-based structures, to ensure consistency throughout your codebase. Document your custom components, to make it easier for other developers to understand and contribute to the codebase.
Customization and extensibility: Familiarize yourself with the various customization options provided, such as theme configuration and component override. Extend the existing components by creating custom variants or adding new functionality to suit your project's needs. While still adhering to the same design principles and accessibility standards.

Wrapping Up

We have explored the Shadcn/UI library from what makes it stand out from other UI libraries/frameworks to why you should use it as a React developer. The reasons are the unrivaled focus on customizability, accessibility, modularity, ease of use, a utility-first design, and clear documentation.

We have also demonstrated its versatility by building examples using some components. We have implemented a product gallery, a FAQ section, a responsive YouTube embed, a collapsible sidebar, and a sign-up/sign-in pop-up. The code for all the implementations can be found here.

Lastly, we have looked at the best practices, such as optimizing the performance, ensuring maintainability, and carrying out customizations and extensions. All these ensure we leverage it to build robust, visually appealing, and accessible user interfaces.

In conclusion, I hope this blog helps build a better understanding of the library. Happy coding!

A Guide to Higher-Order Functions in JavaScript

Joseph Muchai — Tue, 02 Jul 2024 14:35:35 +0000

Photo by Growtika on Unsplash

If you work with JavaScript, then you might have encountered higher-order functions. This is not to mean that they are only limited to JavaScript alone. On the contrary higher-order functions are a fundamental aspect of functional programming that can be found in various programming languages.

The ability to use higher-order functions is more linked with the language’s support for functional programming and the programming paradigm in play.

In this article we’ll dig deeper into what higher-order functions are, their use case scenarios, benefits, and some common mistakes encountered while using them in JavaScript.

What is a higher-order function?

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result.

In that definition lies the key characteristics of identifying a higher-order function:

Takes a function as an argument.
Returns a function.

This whole concept of higher-order functions in programming is borrowed from mathematics, specifically from the field of functional programming and lambda calculus (a little nerdy note 😁).

In lambda calculus and mathematical logic, functions are considered first-class citizens, meaning they can be treated as values, passed as arguments to other functions, and returned as results from functions.

For example, the derivative operator in calculus is a higher-order function that maps a function to its derivative, which is also a function. Similarly, in JavaScript, filter() is a higher-order function that works on an array and takes another function as an argument that it’ll use to return a new filtered version of the array.

Now that we know what higher-order functions are, let’s move on to their applications:

Common Use Cases

1. Callback functions

A callback function is simply a function that is passed as an argument to another function and is executed inside the outer function to complete some routine or action.

This technique allows a function to call another function.

Callback functions are commonly used in asynchronous programming to handle tasks that may take time to complete such as a network request or handling an event for example a button click or a timer expiration.

Let’s implement a simple instance of callbacks in play within an asynchronous task:

// Asynchronous application of a callback function

function getDataFromServer(callback) {
  // Simulating a server request with a setTimeout
  setTimeout(function() {
    const data = 'Data from the server';
    callback(data);
  }, 2000);
}

// Callback function to handle the data
function displayData(data) {
  console.log('Data received: ' + data);
}

// Calling the function with the callback
getDataFromServer(displayData);

In this example, we use the getDataFromServer function to simulate a server request using setTimeout and then call the callback function with the data after 2 seconds. The displayData function is the callback that handles the received data. When getDataFromServer is called with displayData as the callback, it logs the received data after 2 seconds.

This demonstrates the asynchronous nature of the callback, as the data is handled after the server request is complete.

2. Array Methods

Array methods are functions that can be called on an array object to perform various operations on the array.

They are quite a number but not all of them are higher-order functions it should be noted. The higher-order array methods are:

forEach()
map()
sort()
filter() and
reduce()

Let’s take a quick look at each:

1. forEach()

This is a higher-order function that iterates over each item of an array executing the function passed in as an argument for each item of the array. Illustration:

const numbers = [1, 2, 3, 4]; 
numbers.forEach((num) => console.log(num));
// Output: 1, 2, 3, 4

2. map()

This higher-order function returns a new array based on the results from the function passed in as an argument and called on each element of the original array.

Illustration:

const numbers = [1, 2, 3, 4, 5];  
const doubledNumbers = numbers.map((num) => num * 2);  
console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]

Each element from the numbers array is multiplied by 2 to create a new array through the map() method.

3. sort()

As the name suggests when called on an array it sorts it and returns it in default ascending order. Under the hood though, it changes each element into a string and compares their sequence.

You could use sort without passing a function in as an argument, however, this only works well for string arrays but not for numbers.

Hence if you’re going to use sort on numbers you pass in a compare function as an argument. The compare function takes 2 arguments. Illustration:

const numbers = [6, 9, 3, 1]; 
numbers.sort((a, b) => a - b); 
// After sorting: [1, 3, 6, 9]

In the code above:

The negative value (a < b) => a will be placed before b

The zero value (a== b) => No change

The positive value (a > b) => a will be placed before b

4. filter()

This method returns a new array with all elements that satisfy the condition implemented by the function passed. The function passed should always return a boolean value.

const numbers = [1, 2, 3, 4]; 
const evenNumbers = numbers.filter((num) => num % 2 === 0); 
// Result: [2, 4]

The condition in the body of the passed in function is evaluated for each element in the numbers array to return a new array of only values that satisfy it.

5. reduce()

This method takes in 2 arguments a callback function and an initial value. The callback function takes 2 parameters an accumulator (which is set to the initial value at the start) and current value that run on each element in the array to return a single value in the end.

Illustration:

const numbers = [1, 2, 3, 4, 5]; 
const sum = numbers.reduce(function(acc, num) { 
                              return acc + num; 
                           }, 0);

console.log(sum); 
// Output: 15

The value of acc is 0 and that of num is the first item of the array at the start of execution. As reduce iterates over the array the acc value changes to the value returned after summation. This new value of acc is then applied to the next iteration. This continues until the end of the array.

3. Functional composition

Functional composition is the act of combining multiple smaller functions by chaining them together to obtain a single more complex function.

In this approach, a function in the chain operates on the output of the previous function in the composition chain.

To enable functional composition in JavaScript we use the compose function. A compose function is a higher-order function that, takes in two or more functions and returns a new function that applies these functions in right-to-left order.

Let's dive into an example:

The first step is to define the compose function:

const compose = (...functions) => {
     return (input) => {
         return functions.reduceRight((acc, fn) => {
             return fn(acc);
         }, input);
     };
   };

In the above implementation, the compose function takes in any number of functions as arguments by using the spread operator.

It returns a new function that iterates over the functions in reverse order using reduceRight, applying each function to the accumulated result.

The next step is to now use the compose function:

const addOne = x => x + 1; 
const multiplyByTwo = x => x * 2;
const addOneAndMultiplyByTwo = compose(multiplyByTwo, addOne); 
console.log(addOneAndMultiplyByTwo(5)); 
// Output: 11

Above the entered value is first multiplied by 2 then added a one by applying the functions passed to compose from right to left.

Benefits of Higher Order Functions

We have seen that there are quite several applications for higher-order functions. This indicates that they do offer some benefits to programmers to warrant their use.

Let’s take a look at these benefits:

Abstraction: Higher order functions allow you to hide the implementation details behind clear function names improving the readability and understanding of code. For instance, without this type of functions iterating over arrays would need the use of loops which can clutter code, especially in a large codebase, and make it more complicated.
Reusability: Higher-order functions encapsulate the same logic into reusable functions. This means they can be reapplied throughout the codebase without the need to create them from scratch at every instance.
Immutability: Many higher-order functions operate on data immutably, creating new structures instead of modifying existing ones. This helps avoid unintended side effects and makes your code more predictable and easier to debug.
Modularity: Higher-order functions facilitate breaking down complex problems into smaller, manageable parts, promoting modular design.

Common mistakes when working with Higher Order Functions (HOFs)

Higher-order functions do offer numerous benefits as seen above, but it’s essential to be aware of the potential pitfalls that can cause bugs and unexpected results.

Some common mistakes to avoid:

Not returning a value: Most HOFs like map, filter, and reduce expect the function passed in as an argument to return a value for each element processed. In this instance forgetting to return a value can disrupt the chain and lead to undefined results.
Not using the correct syntax: HOFs can be complex and it’s easy to make syntax errors when creating or using them. A good rule of thumb is to double-check the syntax and ensure functions are properly defined and called.
Not using pure functions: HOFs should not cause any side effects thus they should return the same output for a given input, to be pure functions. Using them in an impure manner could lead to unexpected behavior that makes debugging a nightmare.
Overusing composition: Functional composition is a powerful programming technical but excessive nesting of HOFs can increase the complexity of code making it harder to read and understand. Aim for a balance between conciseness and clarity, breaking down complex transformations into smaller, more readable steps if necessary.

Conclusion

As we reach the end, some key takeaways are:

Higher-order functions are functions that either take other functions as arguments or return them as output.

2. Higher-order functions do have a lot of use cases some of them being in:

Callback functions,
Array methods,
Functional composition etc.

3. Higher-order functions benefit programmers by providing:

Abstraction
Reusability
Immutability
Modularity

4. As programmers, there are common mistakes that we may encounter when working with Higher-Order Functions.

I hope this blog inspires a deeper understanding of higher-order functions and how you might be able to leverage them to solve real-world problems. The journey of learning is never-ending. Happy coding!

What is Big-O?

Joseph Muchai — Sat, 15 Jun 2024 09:29:13 +0000

Photo by Conny Schneider on Unsplash
This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

It's a way to compare the efficiency of an algorithm in terms of its worst-case performance. Takes 2 forms:

Time complexity: How well the running time scales with the input size.
Space complexity: How well the memory usage scales with the input size.

Additional Context

Big-O ignores implementation details and constants, focusing solely on how algorithms scale. It enables high-level comparison of algorithms' efficiency, guiding choices for optimal performance across diverse problem sizes and computing environments. Understanding Big-O is crucial for designing effective and scalable solutions in computer science.

How I learned JavaScript

Joseph Muchai — Wed, 12 Jun 2024 09:39:27 +0000

“Has anyone ever finished learning JavaScript?” I highly doubt any developer’s answer to that question will ever be a profound YES.

I for one question my understanding of JavaScript with every Codewars kata I try to solve.

I got into web development after bouncing off multiple programming languages in my early days as an aspiring developer. This is where I first picked up JavaScript. I had already explored enough with HTML and CSS and my curiosity drove me to seek out some dynamism for my static web pages.

The best candidate for such was JavaScript given its vast application in web dev.

My JavaScript learning path has been plagued by quite a number of inconsistencies — most of which were of my own making. The result of this is going through multiple learning materials and resources (most of which are free) as a result of all the recaps I subjected myself to.

Here are the resources I have utilized in my learning journey so far:

Sololearn
Javascript Essentials | Lawrence Turton
FreeCodeCamp
A Smarter Way To Learn Javascript | Mark Myers

Sololearn

Sololearn is an easily accessible learning platform that offers on-the-go bit-size lessons on several programming languages (js included) and concepts with quizzes and challenges to test and improve your programming skills. It has an active community where you can connect with other learners on the platform and ask questions, share your projects, participate in challenges and competitions, or just share your coding journey.

The basic plan has some limited features but it’s still a good bargain considering all certifications earned upon course completion are free. However, if you do wish to access the other added features you can pay for the pro version.

Sololearn is available on the iOS Apple Store, Google Play store, and on desktop via a browser

Javascript Essentials | Lawrence Turton

This is a brilliant introductory course to Javascript that is available for free on Udemy. It has up to six hours of content and covers the basics of JavaScript as well as DOM manipulation and much more. The instructor also delivers the content with utmost simplicity and provides clear explanations in a way that is easy to understand.

Even though the course does not offer a certification at the end it is still a good way to acquire some javascript knowledge and skills.

FreeCodeCamp

FreeCodeCamp is among the most popular learning websites for novice programmers. The main reason is that it offers free coding lessons in various programming languages and certifications upon successful completion. It is also a proven path into beginner roles in the tech industry considering the numerous testimonials from its highly successful alumni.

The quite extensive freecodecamp curriculum has also undergone some amazing updates in recent months ensuring that it is up to date with modern programming methods and practices. The curriculum provides 300+ hours of hands-on learning and programming practice in the javascript path alone making it a good and effective learning tool in the mastery of javascript.

A Smarter Way To Learn JavaScript

“A Smarter Way to Learn JavaScript” is a book by Mark Myers that quoting the author’s words, “uses a new approach to teach JavaScript with technology to cut your effort in half”. This is achieved simply by cutting down on the time a learner spends passively reading the book and getting them more actively involved in the learning process by providing interactive exercises after each concept on the author’s website. This ensures clear understandability is achieved before moving on to a new concept.

The exercises are free and finding the book online for free isn’t that much of a hassle either. You can also find it on multiple online bookstores like Amazon, Goodreads ...etc. It has received a lot of positive reviews and is a good place to recap or start learning JavaScript.

Conclusion

In conclusion, there are many great online resources available for learning JavaScript. This is by no means an exhaustive list considering I have covered only what I am familiar with. If you have a favorite resource that you’d like to share, please mention it in the comments. As developers, we’re always looking for new and effective ways to learn and improve our skills. Happy coding!

What is the useRef() Hook?

Joseph Muchai — Tue, 28 May 2024 18:12:38 +0000

React as a frontend framework encourages a reactive programming model where changes in state lead to component re-rendering. This is what allows React to efficiently keep the UI in sync with changes to underlying data.

However, there are scenarios in which you may be required to store and access values that should not trigger re-renders when they change. It is in such instances that you require the useRef() hook.

What is the useRef() hook?

In this blog, I will answer this question and provide some insight into the best use cases and common pitfalls when working with the useRef().

Introduction

The useRef is a react hook that takes an ‘initial value’ as its argument and returns a mutable ref object whosecurrent property is initialized to the passed argument. The 'initial value' can be of any type. The returned ref object is similar to a normal JavaScript object.

The ref object persists for the full lifetime of the component and can be used to reference a value that's not needed for rendering. This allows the persisting of values between renders. Thus, refs are perfect for storing information that doesn't affect the visual output of your component.

Ref objects are useful when you need to access and manipulate elements or components outside the regular React component lifecycle, such as focusing an input element, accessing component methods, or managing state across renders.

Syntax

To initialize the useRef hook you begin by importing it at the top level like other react hooks:

 import { useRef } from 'react';

After that, you can use it in your functional components:

const MyComp = () => {    
   //initialize a new ref whose object has the value null 
   const myRef = useRef(null)
   //Change the value of the current property in the myRef object    
   myRef.current = 'Hello'
}

In the code above, we create a new useRef object with a value of null and then proceed to update its value using the current property. It should be noted that changing the value of this ref object doesn't trigger a re-render.

What is the purpose of the useRef()?

1. Creating references

One of the primary uses of the useRef is to create references to DOM elements as well as to a React component. These references allow you to interact with and manipulate these elements or components in a controlled and declarative way.

Let's have a look at each one:

a. Using the useRef() to reference DOM elements.

The fact that DOM elements are also objects means that you can reference them using the useRef. React has built-in support for this. To undertake this:

First, import the useRef function from React and create a new ref with an initial value of null:

import { useRef } from 'react';

const myComponent = () => {    
  const myRef = useRef(null);    
  //...
}

Next, you attach the myRef ref to the desired DOM element, say, in this case, input, by assigning it to the ref attribute within your JSX.

//..
return (
  <input ref = {myRef} />
)

With the ref in place, you can access and manipulate the input element and perform actions such as retrieve properties, measure dimensions, or modify styles.

For example, you can invoke the focus() method on the input element by pressing a button, as shown in the following better-organized code:

import { useRef } from 'react';

const MyComponent = () => {
    const myRef = useRef(null);

    const handleClick = () => {
        myRef.current.focus();
    }

 return (
    <div>
       <input ref={ myRef } />
           <button onClick={handleClick}>
           Focus
        </button>
     </div>
 );
}

Some applicable use cases where referencing the DOM using useRef may come in handy are:

Dynamic Styling: Adjusting styles and classes based on user interactions becomes straightforward with direct access to DOM elements.
Dimension Measurements: You can measure the dimensions of elements, allowing for responsive design and layout adjustments.
Validation and Feedback: Validate user inputs and provide feedback by interacting with the DOM.
Smooth Animations: Effortlessly trigger animations and transitions by changing element properties using refs.

b. Using the useRef() to reference React components.

The useRef() hook provides a way for directly accessing and interacting with a React component from another component (kind of like a more direct, component-to-component communication).

You can use it to call methods, access properties or manage component state without involving the component's parent.

While it is possible to use the useRef to access a child component’s methods and properties, it is generally not recommended as it goes against the principles of React’s uni-directional data flow. If you need to manage a child component’s state from a parent component, it is recommended you apply props.

The useRef is most suitable when you need to reference and interact with a specific instance of a component, particularly in managing behavior.

A good scenario is when you need to call a child component method from the parent component. Props cannot be used in this instance since they only work one way, from parent to child.

To do this though you also need the forwardRef function in React which allows you to forward a ref from a parent component to one of its child components. forwardRef allows you to maintain encapsulation in the child's component's implementation while still allowing the parent component to reference it.

Here’s a code example:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const MyChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    greeting: () => {
      alert("Greetings from the Child component");
    }
  }));

  return (
    <div>Child component here!!!</div>
  );
});

const App = () => {
  const myRef = useRef();

  const handleClick = () => {
    myRef.current.greeting();
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <MyChildComp ref={myRef} />
    </div>
  );
}

export default App;

A brief breakdown:

We define a myRef ref, which will be used to create a reference to the child component (MyChildComp) in the App component.
The MyChildComp is a child component created with the forwardRef function allowing it to accept a ref attribute.
Inside MyChildComp, we use the useImperativeHandle hook to define a function, greeting, that can be called from the parent component. The purpose of this function is to display an alert with the message "Greetings from the Child component."
The handleClick function is also defined. When the "Click" button is clicked, it calls myRef.current.greeting(), which in turn triggers the greeting function in the child component resulting in an alert message being displayed.
The child MyChildComp also renders some simple text: "Child component here!!!"

Output

2. Persisting data through renders

The useRef is also used in storing a value and persisting it across renders of a component. The values are stored in the current property of the useRef object.

Changing these values does not trigger a re-render. Thus, the useRef is a suitable way for storing values that shouldn't affect the component's UI but need to be reserved.

It is therefore appropriate to use in instances such as when caching data, managing previous state, or in form input validations.

For a better understanding, here is an example:

import React, { useRef, useEffect } from 'react';

const Previous = () => {
    const previousValue = useRef(null);
    const [value, setValue] = useState('Hello')

    useEffect(() => {
        previousValue.current = value
    }, [value])

    return (
    <div>
        <p>Previous value: {previousValue.current}</p>
        <p>Current value: {value}</p>
    </div>
    )
}

We initialize a previousValue ref and set its initial value to null. We also create a state variable value using useState and initialize it with the string 'Hello'.
In the useEffect, you update the previousValue.current with the current value of the value state variable whenever it changes. This explains why we have it set as a dependency in the useEffect.
The UI displays both the previous value and the current one. When the value state changes, the useEffect updates previousValue.current, allowing you to display both the previous and current values in the UI.

Common Pitfalls when using the useRef hook.

The useRef() hook is a useful hook as described above, but it also has some potential pitfalls that you should be aware of.

Some of them include:

Not triggering a re-render: Unlike useState, useRef does not cause a re-render when its value changes. This can be useful for performance reasons, but it can also lead to stale or inconsistent UI if you rely on the refvalue for rendering. To avoid this, you should always use useState or useEffect to update the UI when the ref value changes.
Not Using It for DOM Manipulation: useRef is often associated with DOM manipulation as shown earlier, precisely when referencing DOM elements. However, it's important to ensure that you're using it appropriately and not modifying the DOM directly outside of React's virtual DOM.
Using refs for derived state: Refs are meant to store values that are not directly related to the UI state, such as DOM nodes, timers, or subscriptions. However, sometimes you may be tempted to use refs for values that are derived from props or state, such as computed values or previous values. This can lead to bugs and confusion, as refs do not participate in the React data flow and do not update automatically when props or state change. To avoid this, you should use useMemo or usePrevious hooks instead of refs for derived state.
Using refs for anti-patterns: Refs can also be used for anti-patterns that violate the React principles of declarative programming and unidirectional data flow. For example, you may use refs to store global variables, manipulate props or state directly, or call child component methods imperatively. These practices can make your code harder to understand, test, and maintain. To avoid this, you should follow the React best practices and use hooks like useContext, useReducer, or custom hooks instead of refs for these scenarios.

Conclusion

The useRef as seen in this blog is best suited for when you need to persist values across renders and also when you need to create references.

It is a rather peculiar React hook in that for effective use, you as the programmer are required to fully understand when and where to use it for the best outcome in your program while keeping in mind the expected React programming principles to avoid pitfalls (tiny crazy incidents😞).

I hope this blog helps in building that understanding. Happy coding!

DEV Community: Joseph Muchai

Understanding Tanstack Query: A Brief Guide

Introduction

Core Concepts

Example:

Common Pitfalls

Conclusion

The only thing I'm confident enough to push on a Friday evening, check it out!

Introduction to Web Design for Web Developers

Introduction to Web Design for Web Developers

Introduction

Key Web Design Principles to Master

Visual design principles

1. Contrast

2. Alignment

3. Balance

4. Hierarchical proximity

5. Repetition

Typography

1. Pair fonts thoughtfully

2. Choose readable fonts

3. Establish a typographic hierarchy

4. Maintain proper contrast

5. Use appropriate font sizes

6. Mind line spacing and length

7. Test across all devices

Color Theory

1. The Color Wheel and Relationships

2. Color Psychology

3. Color Properties

Tools for creating color schemes and palettes

Responsive web design

1. Fluid Grids

2. Flexible images

3. Media queries

4. Mobile-first approach

5. The Viewport Meta Tag

Cultivate a design mindset

Develop user empathy

Shift from Technology-First to Problem-First thinking

Embrace prototyping early and often

Develop visual design awareness

Build cross-functional collaboration skills

Curiosity and Inspiration

Leverage design tools and software

Conclusion

TypeScript FullStack project - BookVerse

Tech Stack

Getting started with Shadcn/UI in React: A practical guide

Introduction

What is Shadcn/UI?

Why use Shadcn/UI?

Getting Started

More on themes and the theme editor

Sample implementations with real-world UI examples

Carousel and Card: A simple product gallery

Accordion: A Frequently Asked Questions(FAQ) section

Aspect ratio: Responsive YouTube Video Embed

Command and Sheet: Collapsible sidebar

Dialog and Tabs: Sign-up/Sign-in pop-up

Best Practices

Wrapping Up

A Guide to Higher-Order Functions in JavaScript

What is a higher-order function?

Common Use Cases

1. Callback functions

2. Array Methods

1. forEach()

2. map()

3. sort()

4. filter()

5. reduce()

3. Functional composition

Benefits of Higher Order Functions

Common mistakes when working with Higher Order Functions (HOFs)

Conclusion

What is Big-O?

Explainer

Additional Context

How I learned JavaScript