Bits to Qubits

Writing conditional tailwind classNames.

Satishkumar — Thu, 25 Jan 2024 15:01:37 GMT

You want to add a style to a div when a particular state in your app is true? You can achieve this using this library.

In your Next.js or React app create a folder in root directory and name it as "lib". Inside lib folder create a file named "utils.ts" or "utils.js" based on the language of your choice.

Installing packages

Run this below command to install these npm package:

npm i clsx
npm i tailwind-merge

Below it's explained what these libraries do? skip this section if not interested.

Tailwind Merge.

If you use Tailwind CSS with a component-based UI renderer like React or Vue, you're probably familiar with the situation that you want to change some styles of a component, but only in a one-off case.

// React components with JSX syntax used in this example

function MyGenericInput(props) {
    const className = `border rounded px-2 py-1 ${props.className || ''}`
    return 
}

function MyOneOffInput(props) {
    return (
        "p-3" // ← Only want to change some padding
        />
    )
}

When MyOneOffInput is rendered, an input with the className border rounded px-2 py-1 p-3 gets created. But because of the way the CSS cascade works, the styles of the p-3 class are ignored. The order of the classes in the className string doesn't matter at all and the only way to apply the p-3 styles is to remove both px-2 and py-1.

This is where tailwind-merge comes in.

function MyGenericInput(props) {
    // ↓ Now `props.className` can override conflicting classes
    const className = twMerge('border rounded px-2 py-1', props.className)
    return 
}

tailwind-merge overrides conflicting classes and keeps everything else untouched. In the case of the MyOneOffInput, the input is now rendered with the classes border rounded p-3.

CLSX:

Usage

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

API

clsx(...input)

Returns: String

input

Type: Mixed

The clsx function can take any number of arguments, each of which can be an Object, Array, Boolean, or String.

Importa**nt:**Any falsey values are discarded!
Standalone Boolean values are discarded as well.

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''

Modes

There are multiple "versions" of clsx available, which allows you to bring only the functionality you need!

`clsx`

Size(gzip): 239 bytes
Availability: CommonJS, ES Module, UMD

The default clsx module; see API for info.

import { clsx } from 'clsx';
// or
import clsx from 'clsx';

`clsx/lite`

Size(gzip): 140 bytes
Availability: CommonJS, ES Module
CAUTION: Accepts ONLY string arguments!

Ideal for applications that only use the string-builder pattern.

Any non-string arguments are ignored!

import { clsx } from 'clsx/lite';
// or
import clsx from 'clsx/lite';

// string
clsx('hello', true && 'foo', false && 'bar');
// => "hello foo"

// NOTE: Any non-string input(s) ignored
clsx({ foo: true });
//=> "

After installing the above packages, paste this code in utils.ts file.

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Now we will create a component to understand how we can use this cn function we created.

Our goal is to create a button that changes it's color from blue to green or green to blue when clicked on it. The completed work will look like this.

Now create a file named "Demo.tsx" and paste this below code in it.

'use client';

import { useState } from 'react';

interface DemoProps {}

export const Demo = ({}: DemoProps) => {
  const [state, setState] = useState(true);
  return (
    'flex'>
      
    
  );
};

Add this above component to your main component, in our case it's: 'src/app/page.tsx'.

import { Demo } from '@/components/Demo';

export default function Home() {
  return (
    'w-full h-screen flex items-center justify-center'>
      
    
  );
}

Now the app looks like this.

Clicking on it will do nothing as of now.

Now go to Demo.tsx and import cn function to it.

import { cn } from '@/lib/utils';

Modify your button to below code.

<button
    type='button'
    onClick={() => setState(!state)}
    className={cn(
        'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800',
        state &&
        'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'
        )}
>
    Click me to change the color of me
button>

In the above code we added an onClick event to the button that negates the state value when clicked on it. we modified className to use cn function. The final code looks like this.

'use client';

import { cn } from '@/lib/utils';
import { useState } from 'react';

interface DemoProps {}

export const Demo = ({}: DemoProps) => {
  const [state, setState] = useState(false);
  return (
    'flex'>
      
    
  );
};

The above code is a React component named Demo. It is a functional component that doesn't take any props. Let's break down the code step by step:

useState Hook: The component uses the useState hook from React to create a state variable state and a function setState to update this state. The initial value of state is false.
JSX: Inside the return statement, the component returns JSX, which represents the UI. It consists of a div element with a class name of 'flex' and a button element.
Button: The button has an onClick event handler that toggles the value of state when clicked. It also has a dynamic class name based on the value of state. The cn function is used to conditionally apply class names based on the value of state.
Conditional Class Names: The cn function is used to conditionally apply class names to the button based on the value of state. When state is false, it applies a set of classes related to the blue color scheme, and when state is true, it applies a set of classes related to the green color scheme.
Button Text: The button text says "Click me to change the color of me".

In summary, this component renders a button that changes its color when clicked, toggling between blue and green, and the color change is reflected in the button's appearance based on the state value.

Summary

Using 'clsx' and 'tailwind merge' we can write conditional classes.

What is useRef hook and where to use it?

Satishkumar — Wed, 27 Dec 2023 13:02:09 GMT

In React, the useRef hook is used to create a mutable reference that can be attached to a DOM element or any mutable value. This reference persists for the entire lifecycle of the component, and changing the reference does not trigger a re-render. This makes useRef useful for accessing the DOM directly within functional components, storing mutable values, and more.

Here's a detailed explanation with an example:

Basic Syntax:

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(initialValue);
  // ...
}

Explanation:

We import the useRef hook from the 'react' package.
Inside the functional component MyComponent, we call useRef and pass an optional initialValue as an argument. This creates a mutable reference, initialized with the provided value.

Example: Let's consider an example where we use useRef to access and focus on an input field when the component mounts.

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

function InputFocusExample() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Inputbutton>
    div>
  );
}

Explanation of the Example:

We import the useRef and useEffect hooks from 'react'.
Inside the InputFocusExample component, we create a mutable reference inputRef using the useRef hook and initialize it with null.
We use the useEffect hook to focus on the input element when the component mounts. We do this by accessing the DOM element using inputRef.current and calling the focus method.
We return a JSX element that includes an input field with the ref attribute set to inputRef, and a button that, when clicked, also focuses on the input field using inputRef.current.focus().

In this example, we've used the useRef hook to access and interact with a DOM element directly within a functional component, demonstrating its practical use for managing DOM interactions.

Use cases of useRef hook.

Certainly! Let's go through each of the use cases of the useRef hook with examples:

Accessing DOM Elements: Use useRef to access and interact with DOM elements directly within functional components. This is useful for scenarios like focusing on an input field, measuring the size of an element, or integrating with third-party DOM libraries.

Example:
```
 import React, { useRef, useEffect } from 'react';

 function MyComponent() {
   const inputRef = useRef(null);

   useEffect(() => {
     inputRef.current.focus();
   }, []);

   return <input ref={inputRef} />;
 }
```

Storing Previous Values: useRef can be used to store values that need to persist across re-renders without causing a re-render when the value changes. This is useful for storing previous values, such as the previous state or props, for comparison in subsequent renders.

Example:

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

 function MyComponent({ value }) {
   const previousValueRef = useRef();

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

   return <div>Previous value: {previousValueRef.current}div>;
 }

Caching Values: You can use useRef to cache values that need to persist for the entire lifecycle of the component, without causing re-renders when the value changes. This is useful for storing values that are expensive to compute.

Example:

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

 function MyComponent() {
   const dataCache = useRef(null);

   useEffect(() => {
     if (!dataCache.current) {
       dataCache.current = fetchData(); // Expensive operation
     }
     // Use dataCache.current
   }, []);

   return <div>Data: {dataCache.current}div>;
 }

Storing Mutable Values: useRef can store mutable values that do not trigger a re-render when they are changed. This is useful for managing values that need to persist across re-renders but don't need to trigger a component update.

Example:

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

 function MyComponent() {
   const renderCount = useRef(0);
   const [state, setState] = useState(0);

   renderCount.current++;

   return (
     <div>
       <div>Render count: {renderCount.current}div>
       <button onClick={() => setState(state + 1)}>Update Statebutton>
     div>
   );
 }

Referencing Unchanging Values: Use useRef to reference values that do not change over time, such as event handlers or other callback functions, to avoid unnecessary re-renders.

Example:

 import React, { useRef } from 'react';

 function MyComponent() {
   const clickHandler = useRef(() => {
     console.log('Button clicked');
   });

   return <button onClick={clickHandler.current}>Click mebutton>;
 }

These examples demonstrate the various use cases of the useRef hook in React, showcasing its versatility in managing state, optimizing performance, and interacting with the DOM.

useEffect vs useLayoutEffect

Satishkumar — Mon, 25 Dec 2023 11:00:51 GMT

Hooks

In React, hooks are functions that allow functional components to "hook into" React state and lifecycle features. They enable you to use state and other React features without writing a class. Hooks were introduced in React 16.8 to address complex scenarios like state management, side effects, and context usage in functional components.

The most commonly used hooks include useState for managing state, useEffect for handling side effects, useContext for accessing context, and useReducer for more complex state management. These hooks provide a more concise and readable way to work with React components, promoting reusability and composability.

By using hooks, developers can write more modular and maintainable code, making it easier to share logic across multiple components. This approach also aligns with the functional programming paradigm, allowing for better separation of concerns and improved code organization.

What is useEffect?

The useEffect is a hook in React, which allows you to perform side effects in function components. Side effects may include data fetching, subscriptions, or manually changing the DOM in React components.

When you use the useEffect hook, you are telling React that your component needs to do something after it renders. React will remember the function you passed and call it after performing the DOM updates.

The useEffect hook takes two arguments: a function and an optional array of dependencies. The function passed to useEffect is the actual effect you want to perform, and it can optionally return a cleanup function. The second argument, the array of dependencies, is used to specify what values the effect depends on. If any of the values in the dependencies array change, the effect function will be re-executed.

Data Fetching: You can use the useEffect hook to fetch data from an API when a component mounts. For example:

 useEffect(() => {
     const fetchData = async () => {
         const result = await axios.get('https://api.example.com/data');
         setData(result.data);
     };
     fetchData();
 }, []);

Subscriptions: If your component needs to subscribe to some external event source, you can use the useEffect hook to set up and clean up the subscription. For example:

 useEffect(() => {
     const subscription = eventSource.subscribe('event', eventData => {
         // Handle event data
     });
     return () => {
         subscription.unsubscribe();
     };
 }, []);

Document Title Update: You can use the useEffect hook to update the document title based on the state of the component.
```
 useEffect(() => {
     document.title = `You clicked ${count} times`;
 }, [count]);
```
Cleanup: If your effect needs to clean up after itself, you can return a function from the effect. This function will be called when the component unmounts or when the dependencies change.
```
 useEffect(() => {
     const subscription = someStream.subscribe();
     return () => {
         subscription.unsubscribe();
     };
 }, [someStream]);
```

These are just a few examples of how the useEffect hook can be used in React to handle various side effects in function components. It's a powerful tool for managing side effects and keeping your components clean and efficient.

What is useLayoutEffect?

The useLayoutEffect is a hook in React that is very similar to the useEffect hook. The primary difference is when it is executed in relation to the render phase.

While the useEffect hook runs after the render is committed to the screen, the useLayoutEffect hook runs synchronously immediately after the DOM has been updated but before the browser has had a chance to paint those changes on the screen. This makes it suitable for operations that need to be performed synchronously and may affect the layout of the page.

The signature of useLayoutEffect is the same as useEffect, taking a function as the first argument and an optional array of dependencies as the second argument. The function passed to useLayoutEffect will be executed synchronously after the DOM has been updated.

It's important to note that while useLayoutEffect can be more performant in certain cases, it can also block the browser's painting process if not used carefully. Therefore, it should be used with caution and only when the synchronous nature of the effect is necessary.

Measuring DOM Elements: If you need to measure the size or position of a DOM element and use that information synchronously, you can use useLayoutEffect. For example:

 useLayoutEffect(() => {
     const { width, height } = someDOMElement.getBoundingClientRect();
     // Use the width and height synchronously
 }, [someDependency]);

Synchronous DOM Manipulation: If you need to perform synchronous DOM manipulations that affect the layout, you can use useLayoutEffect. For example:
```
 useLayoutEffect(() => {
     // Perform synchronous DOM manipulations
 }, [someDependency]);
```
Scroll Position Restoration: If you need to restore the scroll position of a container after a re-render, you can use useLayoutEffect to ensure that the scroll position is restored synchronously.
```
 useLayoutEffect(() => {
     containerRef.current.scrollTop = savedScrollPosition;
 }, [savedScrollPosition]);
```
Synchronous State Updates: If you need to perform state updates that affect the layout synchronously, you can use useLayoutEffect. For example:
```
 useLayoutEffect(() => {
     setDimensions(calculateDimensions());
 }, [someDependency]);
```

These are just a few examples of how the useLayoutEffect hook can be used in React to handle synchronous operations that may affect the layout of the page. It's important to use useLayoutEffect judiciously, as it can impact performance and should only be used when synchronous layout-affecting operations are necessary.

useEffect vs useLayoutEffect

The primary difference between useEffect and useLayoutEffect lies in when they are executed in relation to the render phase.

useEffect:
- Runs asynchronously after the render is committed to the screen.
- It does not block the browser from updating the screen, making it suitable for most side effects that do not require immediate synchronous updates to the DOM.
- Use useEffect for data fetching, subscriptions, or other side effects that do not need to be performed synchronously and do not affect the layout of the page.
useLayoutEffect:
- Runs synchronously immediately after the DOM has been updated but before the browser has had a chance to paint those changes on the screen.
- It can block the browser's painting process if not used carefully, so it should be used with caution.
- Use useLayoutEffect when you need to perform synchronous operations that may affect the layout of the page, such as measuring DOM elements, performing synchronous DOM manipulations, restoring scroll positions, or performing synchronous state updates.

In summary, useEffect is suitable for most side effects that do not require immediate synchronous updates to the DOM, while useLayoutEffect is used for synchronous operations that may affect the layout of the page and need to be performed immediately after the DOM has been updated. It's important to choose the appropriate hook based on the timing and nature of the side effect you want to perform.

When to use useEffect and when to use useLayoutEffect?

You should use useEffect when you need to perform side effects that do not require immediate synchronous updates to the DOM. This includes data fetching, subscriptions, or other side effects that do not need to be performed synchronously and do not affect the layout of the page.

On the other hand, you should use useLayoutEffect when you need to perform synchronous operations that may affect the layout of the page and need to be executed immediately after the DOM has been updated. This includes tasks such as measuring DOM elements, performing synchronous DOM manipulations, restoring scroll positions, or performing synchronous state updates.

In general, if your side effect does not require immediate synchronous updates to the DOM, and it does not affect the layout of the page, you should use useEffect. If your side effect requires immediate synchronous updates to the DOM and may affect the layout of the page, then use useLayoutEffect.

It's important to consider the timing and nature of the side effect you want to perform when choosing between useEffect and useLayoutEffect to ensure that the side effect is executed at the appropriate phase of the component lifecycle.

Helpful links:
https://www.youtube.com/watch?v=wU57kvYOxT4 (simple explanation)

What are Microservices? - Explained for newbies.

Satishkumar — Thu, 14 Dec 2023 02:23:58 GMT

Understanding the problem with an example.

Let's assume that you are going to build a physical teaching space for around 30 students. How will you execute this task? You will first start by maintaining a ledger to document the details of the students. There may be different types of ledgers based on various requirements. For example, you may use different ledgers for admitting the students and then for maintaining their academic performance. As of now, you can handle 30 students and their admission process as well as academic-related work. Coming to physical resources, you have rented a decent-sized room.

The current size of the teaching space:

Students: 30
Services: Admission, Teaching
Faculty: 1
Rooms: 1

With time, thanks to your teaching skills, you started receiving admission requests from 100 students. You don't want to miss the opportunity of growing your new hustle. So now you have to scale up your teaching space to accommodate these extra students. You alone can't handle all the tasks of teaching and administration work, so you start hiring employees to manage the other required tasks. Now you have two people to handle the admission process and to teach students. You rent another room to accommodate the extra students.

The current size of the teaching space:

Students: 130
Services: Admission, Teaching
Faculty: 3
Rooms: 2

Let's say for the next episode of admissions, you get a request from 1000 students. Now it becomes quite difficult for the current system to handle this many students. The idea of one faculty member handling multiple tasks can become quite an obstacle when building a teaching space for a large number of students. This idea of building an application or designing a system is called a Monolithic model.

In software engineering, a monolithic application is a single unified software application that is self-contained and independent from other applications but typically lacks flexibility. There are advantages and disadvantages of building applications in a monolithic style of software architecture, depending on the requirements. You can see how difficult it can become to handle a huge number of people. The solution that engineers came up with for this problem is Microservices architecture.

Now you can build a large-scale teaching space as big as a university using this Microservices concept. In a university, there are separate departments providing different services for the university. Each department is independent from each other. They can use services provided by other departments but are independent in terms of scaling up and down.

Departments and their services:

Admission Department: Admitting students, verifying students, and authorizing them (ID cards).
Accounts Department: Handling the fees and other money-related tasks.
Security Department: Provides physical security to the university.
Administration Department: Handles administrative work.
Computer Science Department: Uses services provided by the Admission department to check whether a student is authorized to attend classes. The department has internal independent services that it uses to run the department, such as teaching, etc.

Using this approach, you can add other departments/services and also scale up each department to handle as many people as required.

Monolithic architecture

In a monolithic architecture, all the components of an application are interconnected and interdependent. This means that the entire application is built as a single unit, including the user interface, server-side processing, and data access.

If we were to use Instagram as an example of a monolithic architecture, the server would handle various routes for different functionalities of the application. For instance, the server would handle routes for user authentication, profile management, image uploading, feed generation, and interactions such as likes and comments.

Here are some example routes that the server in a monolithic Instagram architecture might handle:

User authentication:
- Route: /login, /logout, /signup
Profile management:
- Route: /profile, /edit-profile, /change-password
Image uploading:
- Route: /upload-image, /delete-image, /edit-image
Feed generation:
- Route: /feed, /explore, /search
Interactions (likes, comments):
- Route: /like, /unlike, /comment, /delete-comment

In a monolithic architecture, all these routes would be handled within the same codebase and deployed as a single unit. This architecture can make it easier to develop and test the application as a whole, but it can also lead to challenges in scalability and maintenance as the application grows.

Microservices architecture

In a microservices architecture, the application is broken down into a collection of loosely coupled services, each responsible for a specific set of functionalities. Using Instagram as an example, the various functionalities of the application would be divided into separate microservices, each with its codebase and database.

In the context of Instagram, the microservices architecture might be structured as follows:

User service:
- Responsible for user authentication, profile management, and user-related functionalities.
- Routes: /login, /logout, /signup, /profile, /edit-profile, /change-password
Image service:
- Handles image uploading, editing, and deletion.
- Routes: /upload-image, /delete-image, /edit-image
Feed service:
- Generates user feeds, and handles explore and search functionalities.
- Routes: /feed, /explore, /search
Interaction service:
- Manages user interactions such as likes, comments, and notifications.
- Routes: /like, /unlike, /comment, /delete-comment

Each of these services would have its own database and can be developed, deployed, and scaled independently. This architecture allows for greater flexibility, scalability, and resilience. However, it also introduces complexities in terms of inter-service communication, data consistency, and deployment orchestration.

In a microservices architecture, the focus is on creating small, focused services that can be developed and maintained by small, autonomous teams. This approach can lead to better scalability, fault isolation, and the ability to use different technologies for different services. However, it also requires careful design and management of inter-service communication and data consistency.

Advantages vs Disadvantages

Advantages of Monolithic Architecture:

Simplicity: Easier to develop, test, and deploy as the entire application is contained within a single codebase.
Performance: Lower latency as there is no inter-service communication overhead.
Debugging: Easier to debug and trace issues as the entire application is in one codebase.
Development Environment: Simplicity in setting up the development environment as there is only one application to run.

Disadvantages of Monolithic Architecture:

Scalability: Difficult to scale specific modules independently, which can lead to over-provisioning.
Technology Stack: Limited flexibility in choosing different technologies for different modules.
Maintenance: Changes to one part of the application may require redeployment of the entire application.
Team Collaboration: Larger teams may find it challenging to work on the same codebase without conflicts.

Advantages of Microservices Architecture:

Scalability: Each service can be scaled independently based on its specific needs.
Flexibility: Different services can use different technologies, allowing for flexibility in choosing the right tool for the job.
Fault Isolation: Failures in one service do not necessarily affect the entire application.
Team Autonomy: Small, autonomous teams can work on individual services, leading to faster development and deployment.

Disadvantages of Microservices Architecture:

Complexity: Introduces complexities in inter-service communication, data consistency, and deployment orchestration.
Testing: End-to-end testing becomes more complex due to the distributed nature of the application.
Operational Overhead: Requires additional effort to manage and monitor multiple services.
Latency: Inter-service communication can introduce latency compared to monolithic architecture.

It's important to carefully consider these factors and the specific requirements of the application when choosing between monolithic and microservices architectures. Each has its own set of trade-offs, and the decision should be based on a thorough analysis of the application's needs and the team's capabilities.

Conclusion

In conclusion, both monolithic and microservices architectures have their advantages and challenges. The monolithic architecture offers simplicity in development and testing, but it can become complex and challenging to scale as the application grows. On the other hand, the microservices architecture provides flexibility, scalability, and fault isolation, but it introduces complexities in terms of inter-service communication and data consistency.

When choosing between these architectures, it's important to consider the specific needs of the application, the development team's expertise, and the long-term scalability requirements. Both architectures have been successfully used by various applications, including Instagram, and the decision should be based on a thorough analysis of the trade-offs involved.

Some useful links:

https://www.spiceworks.com/tech/devops/articles/what-are-microservices/

https://www.openlegacy.com/blog/microservices-architecture-patterns/

What is ShadcnUI? and how you can use it to improve your UI development experience?

Satishkumar — Thu, 12 Oct 2023 16:12:17 GMT

What are UI libraries?

UI libraries, also known as User Interface libraries, are collections of pre-designed and pre-built components, styles, and functionalities that developers can use to create user interfaces for their applications. These libraries provide a set of reusable UI elements, such as buttons, forms, menus, and cards, that follow consistent design patterns and guidelines.

By using UI libraries, developers can save time and effort by leveraging pre-built components instead of creating them from scratch. These libraries often come with customizable options, allowing developers to tailor the UI components to match their application's specific design requirements.

UI libraries are commonly used in web development, where they are implemented using HTML, CSS, and JavaScript. They provide a foundation for building visually appealing and user-friendly interfaces, enabling developers to focus more on the application's logic and functionality.

Some popular UI libraries for React include Material-UI, Chakra UI, Ant Design, and Tailwind CSS. These libraries offer a wide range of components and styles that can be easily integrated into React applications, making the development process more efficient and consistent.

What is ShadcnUI?

"Shadcn UI is NOT a component library. It's a collection of reusable components that you can copy and paste into your apps." This is what you see when you open the docs of ShadcnUI.

To gain a better understanding of the statement, let's compare MUI with shadcnUI. When utilizing MUI's components, it is necessary to install the required dependencies and directly import the components from those dependencies. However, this approach has a drawback: it limits our control over the components used to construct our application. Developers are unable to modify the styling or customize the components to suit their specific requirements.

ShadcnUI, on the other hand, addresses this issue by offering components that can be easily modified, styled, and utilized based on individual needs. Now, you might wonder how shadcnUI accomplishes this.

Exploring ShadcnUI.

Shadcn offers the advantage of installing only the required components when needed, eliminating the need to install all components at once. Whether you need a button component or an input component for your app, you can simply install them individually. The process of installing these components is as easy as running a command in your Terminal.

Let's say that you are building a React app using Next.js. Let's assume that you have already installed Next.js. Once Next.js is installed, you can proceed with initializing ShadcnUI. To do this, open your terminal and navigate to the root directory of your Next.js project. Then, run the following command:

npx shadcn-ui@latest init

This command will initialize ShadcnUI in your project and guide you through the configuration process. You'll be prompted with options to customize the installation according to your needs.

You will be asked a few questions to configure components.json

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

For a more detailed installation guide specific to Next.js apps, you can refer to the official ShadcnUI documentation or visit their website.

Here's a recommended folder structure for Next.js apps. You can use this as a reference:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

When you install the components, they will be added to the components/ui folder. In the example folder structure above, you can see three components already included: alert-dialog.tsx, button.tsx, and dropdown-menu.tsx. These components serve as examples and can be modified to suit your specific requirements. Once customized, you can import them into any part of your application as needed.

Adding components to your Next.js app.

To add the Button component to your app, follow these simple steps:

Visit the ShadcnUI documentation website.
Navigate to the components section of the documentation.
Locate the Button component and copy the command provided.
Open the root directory of your project.
Paste the copied command into your terminal or command prompt.

npx shadcn-ui@latest add button
Run the command to add the latest version of the ShadcnUI Button component to your project.

Once the Button component is successfully added, you can easily incorporate it into any part of your application. This streamlined process ensures a seamless integration of the Button component into your project, saving you time and effort.

https://codesandbox.io/p/sandbox/condescending-poitras-dsggds?file=%2Fapp%2Flayout.tsx%3A1%2C1

I have prepared a CodeSandbox for you to practice ShadcnUI. Please take some time to explore and familiarize yourself with its features. This hands-on experience will help you gain proficiency in utilizing ShadcnUI effectively.

I want to build a really cool planner App.

Satishkumar — Tue, 08 Aug 2023 23:13:05 GMT

Introduction

I am interested in developing a planner application that incorporates additional features to greatly enhance daily life. While I am aware of the existence of apps similar to Notion, I find Notion to be overly intricate for my preferences. My goal is to create an app that exudes simplicity, productivity, and a sense of coolness. It is imperative that users can effortlessly comprehend the app's functionality and features, enabling them to maximize its potential and derive significant benefits from its usage.

I will regularly update my blog with the latest developments on the app, providing insights into the technologies I will be utilizing and the resources I will be leveraging to acquire knowledge in those areas. As I am relatively new to blogging, there may be instances where the user experience may not be optimal while navigating through my content. I apologize in advance for any inconvenience this may cause.

The Vision: Creating a simple yet productive App

The application is an enhanced version of a TO-DO app, designed to seamlessly integrate into users' daily lives. My goal is for this app to become the go-to choice for individuals seeking productivity tools. Looking ahead, I envision incorporating artificial intelligence to enhance the application's features. Currently, the final product will include robust task scheduling capabilities, allowing users to prioritize tasks and schedule them using calendars. Additionally, users will have the ability to create weekly or monthly timetables, take notes, and easily share them through links. Furthermore, I am considering implementing real-time collaboration for note-taking, enabling users to collaborate in real time. Lastly, users will be able to schedule meetings using popular platforms such as Google Meet or Zoom.

Some stand-out features.

Real-time collaboration.

I envision the application to incorporate a real-time collaboration feature for note-taking purposes. This functionality would enable a group of users to seamlessly contribute to tasks simultaneously, allowing for the addition of various content types such as text, images, and more. The inclusion of this feature would undoubtedly enhance the effectiveness of note-taking, providing users with a valuable tool for collaborative and efficient information capture.

An ai powered chat system.

Integrating an AI-powered chat system would be a valuable enhancement for the application. To illustrate the benefits, let's consider a scenario: Imagine you are utilizing this app and engaging in a conversation with another user or a group through the built-in chat system. While discussing various topics, you encounter a question or uncertainty that requires clarification. In such instances, having the ability to directly consult an AI would not only expedite the learning process but also add an element of enjoyment to the experience. By incorporating an AI-powered chat system, users can seamlessly seek assistance and gain valuable insights, thereby enhancing the overall functionality and user satisfaction of the application.

Final thoughts

The concepts are still vivid in my mind, and it is imperative that I meticulously outline the application in a more structured manner. It is crucial to ensure scalability, enabling seamless integration of new features as the project evolves. In my upcoming post, I will delve into the technology stack I am contemplating, followed by a comprehensive discussion of the app's design.