DEV Community: Dev Gaurav Jatt

🚀 Building Lightning-Fast Search with search-plus-ts: A Full-Stack TypeScript Solution

Dev Gaurav Jatt — Tue, 17 Jun 2025 00:30:27 +0000

Building modern search experiences shouldn't be rocket science. Let me show you how to create a blazing-fast, real-time search system using TypeScript, Hono, and React.

The Problem

Ever tried implementing search functionality and ended up with a sluggish, overcomplicated mess? You're not alone. Most developers either:

Over-engineer with complex search engines like Elasticsearch
Under-deliver with basic string matching that feels broken
Get lost in the complexity of fuzzy search algorithms

What if I told you there's a sweet spot? A TypeScript-first solution that's both powerful and simple?

Meet search-plus-ts

search-plus-ts is a lightweight, TypeScript-native search library that brings intelligent search capabilities without the overhead. Today, I'll walk you through building a complete full-stack search application using:

Backend: Hono (the fast, lightweight web framework)
Frontend: React with Vite
Search Engine: search-plus-ts
Styling: Tailwind CSS

🎯 What We're Building

A real-time search interface for blog posts that features:

⚡ Instant search results as you type
🎨 Highlighted search matches
🔍 Multi-field searching (title, category, date)
📱 Responsive design
🚀 TypeScript throughout

Setting Up the Backend

Let's start with our Hono server. First, the data structure:

// hono-server/src/data.ts
const posts = [
  {
    title: 'Copyleaks Study Finds Explosive Growth of AI Content on the Web',
    categorie: 'Artificial Intelligence',
    date: 'May 1st 2024, 5:00:46 am',
  },
  {
    title: 'Musk\'s YouTube-Like TV Venture Faces Strong Challenges From Incumbents',
    categorie: 'Online Entertainment',
    date: 'March 12th 2024, 5:00:59 am',
  },
  // ... more posts
]

export default posts

Now, the server implementation:

// hono-server/src/index.ts
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import SearchPlusTs from 'search-plus-ts'
import posts from './data.js'
import { cors } from 'hono/cors'

const app = new Hono()
app.use(cors())

// Get all posts
app.get('/', (c) => {
  return c.json({ posts })
})

// Search endpoint - this is where the magic happens
app.get('/search', (c) => {
  const search = c.req.query().q
  if (!search) {
    return c.json({ posts: [] })
  }

  const SearchPlus = new SearchPlusTs({
    data: posts,
    keys: ['title', 'categorie', 'date'], // Fields to search
  })

  const results = SearchPlus.search(search)
  return c.json({ results })
})

serve({ fetch: app.fetch, port: 3000 }, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

Building the React Frontend

The frontend is where users interact with our search. Here's the complete component:

// vite-react-client/src/App.tsx
import { useEffect, useState } from 'react'
import { highlightWordsTag } from 'search-plus-ts'

const App: React.FC = () => {
  const [query, setQuery] = useState('')
  const [posts, setPosts] = useState<{
    title: string
    categorie: string
    date: string
  }[]>([])

  useEffect(() => {
    if (query.trim() !== '') {
      fetch('http://localhost:3000/search?q=' + query)
        .then((res) => res.json())
        .then((data) => setPosts(data.results))
    } else {
      fetch('http://localhost:3000')
        .then((res) => res.json())
        .then((data) => setPosts(data.posts))
    }
  }, [query])

  return (
    <div className='max-w-3xl mx-auto p-6'>
      <input
        type='search'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder='Search posts...'
        className='w-full p-3 border border-stone-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 mb-6 shadow-sm transition-all'
      />

      {posts.length === 0 ? (
        <p className='text-center text-stone-500 mt-10'>No results found.</p>
      ) : (
        posts.map((post, id) => (
          <div
            key={id}
            className='mb-6 p-6 bg-white hover:bg-stone-50 transition-colors duration-200 border border-stone-200 rounded-2xl shadow-sm'
          >
            <div className='text-xl font-bold text-stone-800 mb-2'>
              <span className='text-orange-600'>Title:</span>{' '}
              <span
                dangerouslySetInnerHTML={{
                  __html: highlightWordsTag(post.title, query, 'search-match'),
                }}
              />
            </div>

            <div className='flex justify-between items-center'>
              <div className='text-sm text-stone-600'>
                <span className='font-semibold text-orange-500'>Category:</span>{' '}
                <span
                  dangerouslySetInnerHTML={{
                    __html: highlightWordsTag(post.categorie, query, 'search-match'),
                  }}
                />
              </div>
              <div className='text-sm text-stone-600'>
                <span className='font-semibold text-orange-500'>Date:</span>{' '}
                <span
                  dangerouslySetInnerHTML={{
                    __html: highlightWordsTag(post.date, query, 'search-match'),
                  }}
                />
              </div>
            </div>
          </div>
        ))
      )}
    </div>
  )
}

export default App

The Secret Sauce: Highlighting Matches

Notice the highlightWordsTag function? This is what makes search results feel professional:

/* vite-react-client/src/index.css */
@import 'tailwindcss';

.search-match {
  @apply bg-yellow-300 font-semibold px-1;
}

This CSS class automatically highlights matching text in search results, creating that satisfying "Google-like" experience users expect.

Running the Application

The beauty of this setup is its simplicity. Just run:

# Clone the example
npx gitpick https://github.com/devgauravjatt/search-plus-ts/examples/with-server-and-client

cd with-server-and-client

# Install dependencies
npm install

# Start both server and client
npm run dev

The monorepo setup with workspaces means everything runs concurrently - your backend API at localhost:3000 and your React app at localhost:5173.

Why This Architecture Works

🎯 Separation of Concerns

Server handles search logic and data
Client focuses purely on UI/UX
Clean API contract between layers

⚡ Performance

search-plus-ts is optimized for speed
Hono is one of the fastest web frameworks
React's virtual DOM handles UI updates efficiently

🔧 Developer Experience

Full TypeScript support throughout
Hot reload on both ends
Simple, predictable data flow

📈 Scalability

Easy to add more search fields
Simple to extend with filters
Straightforward to optimize further

Real-World Applications

This pattern works great for:

Documentation sites with search
E-commerce product filtering
Blog platforms with post search
Admin dashboards with data lookup
Content management systems

Advanced Features You Can Add

Want to take this further? Consider adding:

Debounced search to reduce API calls
Search suggestions and autocomplete
Filter by category or date ranges
Pagination for large datasets
Search analytics and popular queries

Key Takeaways

Building great search doesn't require complex infrastructure. With the right tools:

search-plus-ts handles the intelligent matching
Hono provides a fast, modern backend
React delivers smooth user interactions
TypeScript keeps everything type-safe

The result? A search experience that feels instant, looks professional, and scales with your needs.

Try It Yourself

Ready to build your own search-powered application?

🔗 Get the complete code

🚀 Check out search-plus-ts

What kind of search features are you planning to build? Let me know in the comments below! 👇

🔥 200+ Dummy Blog Posts for UI Testing – Stop Wasting Time Writing Content!

Dev Gaurav Jatt — Tue, 10 Jun 2025 12:50:08 +0000

Building a blog demo? Prototyping a CMS? Testing pagination logic? Here's the game-changer you've been waiting for.

The Problem Every Developer Faces

Picture this: You're building a sleek new blog interface, and you need realistic content to test your pagination, search functionality, and category filters. What do you do?

❌ Create dozens of dummy posts manually (hours wasted)
❌ Copy-paste Lorem Ipsum everywhere (looks unprofessional)
❌ Build complex data generation scripts (reinventing the wheel)
❌ Scrape content from somewhere (legal nightmare)

There's a better way.

Meet `best-blog-data` - Your Blog's Best Friend

I built this lightweight NPM package to solve a problem I faced repeatedly: getting realistic blog data quickly for demos and prototypes.

npm install best-blog-data

That's it. You now have access to 200+ professionally written blog posts across 30+ categories with full SEO metadata, ready to power your next project.

What Makes This Package Special?

🎯 Realistic Content, Not Lorem Ipsum

Every post is carefully crafted with:

Engaging titles that sound like real blog posts
Proper SEO meta tags (title, description, image, URL)
Diverse categories from "React" to "Artificial Intelligence"
Realistic publication dates

⚡ Zero Configuration Required

import { getPosts } from 'best-blog-data';

const { posts, nextPageAvailable } = getPosts();
console.log(posts.length); // 10 posts, ready to render

🔍 Built-in Search & Filtering

No need to implement fuzzy search yourself:

import { getPostsBySearch, getPostsByCategory } from 'best-blog-data';

// Fuzzy search powered by Fuse.js
const searchResults = getPostsBySearch('React hooks');

// Category filtering with pagination
const { posts, categoryFound } = getPostsByCategory('javascript', 2);

🧩 TypeScript First

Full type safety out of the box:

interface Post {
  slug: string;
  title: string;
  content?: string;
  date: string;
  image: string;
  categorie: {
    slug: string;
    name: string;
  };
  meta_seo: {
    title: string;
    description: string;
    image: string;
    url: string;
  };
}

Real-World Use Cases

🏗️ Static Site Generators

Perfect for Gatsby, Next.js, or Nuxt projects where you need content during development:

// pages/blog/[slug].js
import { getFullPostBySlug } from 'best-blog-data';

export async function getStaticProps({ params }) {
  const post = getFullPostBySlug(params.slug);
  return { props: { post } };
}

🎨 Design System Demos

Showcase your blog components with realistic data:

import { getPosts } from 'best-blog-data';

function BlogGrid() {
  const { posts } = getPosts();
  return (
    <div className="grid grid-cols-3 gap-4">
      {posts.map(post => (
        <BlogCard key={post.slug} post={post} />
      ))}
    </div>
  );
}

🔧 CMS Prototyping

Test your content management interfaces with diverse, realistic posts across multiple categories.

The API That Just Makes Sense

Pagination Made Simple

const page1 = getPosts(1);     // First 10 posts
const page2 = getPosts(2);     // Next 10 posts
const hasMore = page1.nextPageAvailable; // Boolean

Category Management

const categories = getAllCategories();
// Returns: [{ slug: 'react', name: 'React' }, ...]

const reactPosts = getPostsByCategory('react');

Individual Post Retrieval

const post = getFullPostBySlug('understanding-react-hooks');
// Full post with HTML content

Why I Built This

As a developer, I was tired of:

Spending hours creating fake blog data for every project
Using unrealistic Lorem Ipsum that made demos look unprofessional
Rebuilding the same pagination and search logic repeatedly

This package is my solution - one install, infinite possibilities.

Performance & Bundle Size

📦 Lightweight: Minimal dependencies (only Fuse.js for search)
⚡ Fast imports: Tree-shakeable, import only what you need
🎯 Optimized: Smart pagination and efficient data structures

Get Started in 30 Seconds

npm install best-blog-data

import { getPosts, getPostsBySearch } from 'best-blog-data';

// Get first page of posts
const { posts } = getPosts();

// Search functionality
const results = getPostsBySearch('JavaScript');

// You're ready to build! 🚀

What's Next?

I'm actively working on:

🌍 Multi-language support
📊 More content types (tutorials, news, guides)
🎨 Rich media support (videos, code blocks)
📈 Analytics-friendly metadata

Try It Today

Stop wasting time on fake data. Start building amazing blog interfaces with realistic content from day one.

Links:

What's your biggest pain point when building blog interfaces? Let me know in the comments - I might add it to the package! 👇

🚀 Zero-Config Database Setup with Drizzle ORM - From Zero to Hero in 30 Seconds

Dev Gaurav Jatt — Tue, 10 Jun 2025 11:38:21 +0000

Are you tired of spending hours setting up database configurations every time you start a new project? What if I told you that you could have a fully configured Drizzle ORM setup with PostgreSQL, MySQL, or SQLite in just one command?

Meet Drizzle Setup CLI - the tool that transforms database setup from a tedious chore into a lightning-fast experience! ⚡

The Problem We All Face 😤

We've all been there:

Starting a new project and spending 2+ hours just setting up the database
Copy-pasting boilerplate code from previous projects
Manually updating package.json, .env, and config files
Getting stuck with database connection strings and environment variables
Repeating the same setup process over and over again

The Solution: One Command, Complete Setup ✨

npx drizzle-setup

That's it. Seriously. No kidding.

In less than a minute, you'll have:

✅ Complete database schema structure
✅ Drizzle configuration file (drizzle.config.ts)
✅ Environment variables automatically injected
✅ Package.json scripts for migrations and studio
✅ All dependencies installed
✅ Ready-to-use database connection

What Makes This Special? 🎯

🎨 Multiple Database Support

Choose your fighter:

PostgreSQL (Default, Neon, Vercel Postgres)
SQLite (Default, Turso, Bun SQLite)
MySQL (Coming with more providers)

🔧 Smart Configuration

The CLI intelligently configures everything based on your choices:

Database-specific connection strings
Optimized Drizzle configurations
Provider-specific environment variables
Tailored schema templates

📦 Package Manager Agnostic

Works seamlessly with:

npx drizzle-setup     # npm
bunx drizzle-setup    # bun
pnpm dlx drizzle-setup # pnpm

Perfect for Modern Stacks 🏗️

This tool shines especially bright with modern frameworks:

🚀 Astro Projects

# In your Astro project
npx drizzle-setup
# Choose PostgreSQL + Vercel
# Boom! Database ready for your Astro app

⚡ Next.js Apps

# Perfect for Next.js API routes
npx drizzle-setup
# Select your preferred database
# Start building features, not configs

🎯 Any JavaScript/TypeScript Project

Whether it's Express, Fastify, SvelteKit, or any other framework - this CLI has got you covered.

Live Demo: See It In Action 🎬

Here's what happens when you run the command:

$ npx drizzle-setup

🎯 Welcome to Drizzle Setup CLI!

? Choose your database:
❯ PostgreSQL
  SQLite  
  MySQL

? Select configuration preset:
❯ Default PostgreSQL
  Neon Database
  Vercel Postgres

? Target folder name: database

✨ Setting up your database structure...
📝 Creating drizzle.config.ts...
🔐 Updating .env file...
📦 Adding scripts to package.json...
🚀 Installing dependencies...

🎉 Setup complete! Your database is ready to use.

What Gets Generated? 📁

After running the CLI, your project structure looks like this:

your-project/
├── drizzle.config.ts      # 🔧 Drizzle configuration
├── .env                   # 🔐 Environment variables
├── database/              # 📁 Your chosen folder
│   ├── schema.ts         # 📋 Database schema
│   └── index.ts          # 🔌 Database connection
└── package.json          # 📦 Updated with scripts

Real-World Impact 📈

Before Drizzle Setup CLI:

⏰ 2-3 hours of setup time
🐛 Configuration errors and typos
📚 Constant reference to documentation
😫 Frustration and context switching

After Drizzle Setup CLI:

⚡ 30 seconds to complete setup
✅ Zero configuration errors
🎯 Focus on building features
😊 Happy developer experience

Try It Right Now! 🏃‍♂️

Don't just read about it - experience it yourself:

# Create a new project
mkdir my-awesome-app && cd my-awesome-app
npm init -y

# Set up your database
npx drizzle-setup

# Start building! 🚀

Community & Support 💝

📦 NPM Package
🐙 GitHub Repository
🐛 Found a bug? Open an issue
💡 Feature request? Start a discussion

What's Next? 🔮

Coming soon:

🔥 More database providers (PlanetScale, Supabase, Railway)
🎨 Custom template support
🔌 Framework-specific integrations
📱 Migration from other ORMs

The Bottom Line 💪

Stop wasting hours on database setup. Start building features that matter.

Your future self will thank you for discovering this tool. Your teammates will love you for sharing it. Your projects will launch faster than ever before.

Ready to supercharge your development workflow?

npx drizzle-setup

What's your biggest database setup pain point? Share in the comments below! 👇

If this tool saved you time, give it a ⭐ on GitHub and share it with your fellow developers!

drizzle #database #postgresql #sqlite #mysql #nodejs #typescript #cli #productivity #webdev

Zero-Config DB Setup with Drizzle ORM Using drizzle-setup CLI

Dev Gaurav Jatt — Sat, 07 Jun 2025 04:49:50 +0000

📚 Supercharge Your Drizzle ORM Workflow with `drizzle-setup` CLI

Setting up a modern ORM for your project should be fast, reliable, and flexible. That’s where drizzle-setup cli comes in — a powerful utility to automatically scaffold your Drizzle ORM setup for PostgreSQL, SQLite, MySQL, and more.

Whether you’re working on a side project or spinning up a production-ready stack, drizzle-setup ensures a frictionless experience from zero to fully-configured.

✨ Why Use `drizzle-setup`?

Here’s what makes this CLI a game-changer:

📦 Zero Config Setup – Get started with just a few prompts.
📜 Drizzle Scripts – Automatically populates your package.json with useful Drizzle CLI commands.
🔧 .env Auto Update – Adds all essential environment variables without manual hassle.
🧩 Multi-DB Support – Works with PostgreSQL, SQLite, MySQL, and more.
📁 Template Copying – Sets up your schema.ts and index.ts instantly.

📦 Installation

You can install globally using your favorite package manager:

npm install -g drizzle-setup
# or use npx for one-time setup
npx drizzle-setup

🚀 Quick Start

In your project root, run:

drizzle-setup

You’ll be guided through:

Selecting a database (PostgreSQL, SQLite, etc.)
Choosing a preset config
Setting the target folder
Copying boilerplate files
Generating drizzle.config.ts
Updating .env and package.json
Installing required dependencies

🧪 Supported Databases

PostgreSQL: Default, Neon, PlanetScale and more.
SQLite: Default, Turso, Bun SQLite and more.
MySQL: Default, Turso, Bun SQLite and more.

Each choice is tailored with optimal templates and .env configs.

🧱 Resulting Directory Structure

Once setup completes, your project might look like this:

project-root/
├── drizzle.config.ts
├── .env
├── [target-folder]/
│   ├── schema.ts
│   └── index.ts

🔗 Try it Now

Ready to skip the boilerplate and get building?

npx drizzle-setup

💬 Have Feedback?

Drop your suggestions or issues in the GitHub repo or tweet with the hashtag #DrizzleSetupCLI.

Creating an Interactive Color Picker with Svelte 5

Dev Gaurav Jatt — Wed, 23 Oct 2024 02:13:34 +0000

Creating an Interactive Color Picker with Svelte 5

Svelte 5 offers an elegant and efficient way to build interactive web applications, and a color picker is a perfect example to demonstrate its capabilities. In this blog post, we’ll explore how to create an interactive color picker using Svelte 5, focusing on a simple yet functional code snippet.

full code

<script>
    import Svg from '../lib/assets/circle.svg';
    let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);

    let fillings = $state(0);

    $effect(() => {
        console.log(fillings);
    });
</script>

<div>
    <div class="flex gap-2 mb-4">
        {#each colors as color, index}
            <div class="flex flex-col gap-2">
                <button
                    onclick={() => (fillings = index)}
                    style:background={colors[index]}
                    class="w-24 h-24 mb-3 rounded-full"
                >
                    {#if index === fillings}
                        <img src={Svg} alt={index.toString()} />
                    {/if}
                </button>
                <span>
                    <code>
                        {colors[index]}
                    </code>
                </span>
            </div>
        {/each}
    </div>
    <input bind:value={colors[fillings]} type="color" name="color" />
</div>

Full code url --- https://www.sveltelab.dev/sz2qatme9a8hjb5

Understanding the Code Structure

The provided code creates a color picker interface where users can select from a set of predefined colors. Here’s how it works:

SVG Image Import: The component starts by importing an SVG file, which will be displayed next to the selected color. This visual cue enhances the user experience.

   import Svg from '../lib/assets/circle.svg';

Color Array: An array of colors is defined using $state, which allows for reactive state management in Svelte.

   let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);

Current Filling State: Another state variable fillings keeps track of the currently selected color index.

   let fillings = $state(0);

Effect Hook: The $effect function logs the current value of fillings to the console, allowing developers to track changes in real-time.

   $effect(() => {
       console.log(fillings);
   });

Rendering the UI: The UI is built using a combination of each blocks and conditional rendering. For each color in the array, a button is created. When a button is clicked, it updates the fillings state to reflect the selected index. The selected color is highlighted with an SVG icon.

   {#each colors as color, index}
       <button onclick={() => (fillings = index)} style:background={colors[index]} class="w-24 h-24 mb-3 rounded-full">
           {#if index === fillings}
               <img src={Svg} alt={index.toString()} />
           {/if}
       </button>
   {/each}

Color Input: A color input element allows users to customize the selected color. It is bound to the currently selected color, ensuring that changes reflect immediately in the UI.

   <input bind:value={colors[fillings]} type="color" name="color" />

Enhancing User Experience

With this simple setup, users can easily choose a color, and the real-time feedback enhances engagement. The SVG icon provides a visual representation of the selected color, making the interface more intuitive.

Conclusion

Creating an interactive color picker in Svelte 5 is a straightforward process that showcases the framework's strengths in reactivity and simplicity. This example can serve as a foundation for more complex applications, allowing developers to build on this basic functionality with additional features, such as saving color preferences or integrating with design tools. With Svelte, the possibilities are endless, making it a fantastic choice for modern web development.

Advanced Data Fetching Techniques in Next.js

Dev Gaurav Jatt — Sat, 07 Sep 2024 03:56:11 +0000

Advanced Data Fetching in Next.js

Next.js provides powerful features for fetching data in your applications, including server-side rendering (SSR), static site generation (SSG), and client-side data fetching. By leveraging these techniques, you can build performant and scalable applications that provide a seamless user experience. This guide will explore advanced data fetching techniques in Next.js and demonstrate how to implement them in your projects.

Server-Side Rendering (SSR)

Example: Using `getServerSideProps`

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Static Site Generation (SSG)

Static site generation in Next.js allows you to pre-render pages at build time, ensuring that the content is static and can be served directly from a CDN. This can significantly improve performance and reduce the load on your server.

Example: Using `getStaticProps`

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default HomePage;

Incremental Static Regeneration (ISR)

Incremental static regeneration in Next.js allows you to update static content without rebuilding the entire site. This is useful for pages that need to be updated frequently, such as news articles or blog posts.

Example: Using `getStaticProps` with `revalidate`

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Client-Side Data Fetching

Next.js also supports client-side data fetching, which allows you to fetch data after the initial page load. This can be useful for fetching data that is not needed for the initial render or for handling user interactions that require data loading.

Example: Using `useEffect` and `useState` for Client-Side Data Fetching

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsPage;

Combining Data Fetching Methods

In many applications, you might need to combine different data fetching methods to optimize performance and user experience. For instance, you can use SSR or SSG for initial page load and client-side fetching for additional data or user interactions.

Example: Combining SSR and Client-Side Fetching

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>

      <h2>Posts</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {posts.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default UserPage;

Using SWR for Client-Side Fetching

SWR (stale-while-revalidate) is a React hook library created by Vercel for data fetching. It provides features like caching, revalidation, focus tracking, and more, making client-side data fetching more efficient and powerful.

Example: Using SWR

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return <p>Error loading posts.</p>;
  if (!data) return <p>Loading...</p>;

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default SWRPostsPage;

Conclusion

Next.js offers a variety of data-fetching techniques to cater to different use cases and performance requirements. By understanding and leveraging SSR, SSG, ISR, and client-side data fetching, you can build powerful, high-performance web applications that provide an excellent user experience. Combining these techniques effectively can help you optimize your Next.js applications for both speed and SEO, ensuring that your users have the best possible experience.

Boost Your Website's Social Engagement with Select Share JS

Dev Gaurav Jatt — Sat, 30 Dec 2023 03:37:21 +0000

🤗Introduction:
In the fast-paced digital age, making your website shareable is key to expanding its impact. Select Share JS simplifies this process, offering an easy-to-use solution for integrating social media share buttons. In this guide, we'll explore the user-friendly features of Select Share JS and walk you through the steps to boost your website's social engagement effortlessly. Let's dive in!

😏Why Select Share JS?
Select Share JS stands out for its simplicity and flexibility. Whether you're working with ReactJS, NextJS, SvelteJS, or traditional HTML pages, this library seamlessly integrates into your project. The inclusion of Twitter, LinkedIn, WhatsApp, Facebook, and email sharing options ensures your audience can spread the word across diverse channels.

🧻Getting Started:
To include SelectShareJS in your project, add the following code to your HTML file:

<div twitter="true" theme="light" id="select-share-js"></div>
<script src="https://cdn.jsdelivr.net/gh/devgauravjatt/select-share-js@main/build/v-1.0/main.js"></script>

For NextJS users, incorporating it into layout.js is a breeze:

import Script from 'next/script'

return (
  <html lang='en'>
    <body suppressHydrationWarning={true} className={inter.className}>
      {children}
      {/*@ts-ignore */}
      <div twitter='true' theme='dark' id='select-share-js'></div>
      <Script src='https://cdn.jsdelivr.net/gh/devgauravjatt/select-share-js@main/build/v-1.0/main.js' />
    </body>
  </html>
)

💦Options:
Select Share JS provides a range of customization options, allowing you to tailor the share buttons to match your website's aesthetics. The available parameters include:

Twitter: "true" (Include Twitter share button)
LinkedIn: "true" (Include LinkedIn share button)
Theme: "light" or "dark" (Choose the theme for buttons)
Read More: "true" (Include a "Read More" link for shared content)
WhatsApp: "true" (Include WhatsApp share button)

For instance, if you want Twitter, LinkedIn, and WhatsApp buttons with a dark theme and a "Read More" link, use the following code:

<div twitter="true" linkedin="true" theme="dark" whatsapp="true" readmore="true" id="select-share-js"></div>

😎Follow on GitHub for Updates:
Stay in the loop with the latest enhancements and updates to Select Share JS by following our GitHub repository. Your feedback and contributions are always welcome! 🌟

🤯Conclusion:
In conclusion, Select Share JS provides a hassle-free solution for integrating social media share buttons into your website. Its compatibility with various frameworks and ease of customization make it a go-to choice for web developers aiming to boost their site's social engagement. By following the user guide and incorporating this library, you're not just adding share buttons; you're enhancing your website's accessibility and connectivity.

ChatGPT Experience with the Dracula Theme Extension 🧛‍♂️

Dev Gaurav Jatt — Sat, 23 Dec 2023 10:52:07 +0000

Introduction

In the ever-evolving landscape of virtual interactions, ChatGPT stands as a powerful tool for natural language processing. But why settle for the default appearance when you can enrich your ChatGPT experience with the Dark and Mysterious Dracula Theme Extension? This extension doesn't just transform your ChatGPT interface; it adds a touch of sophistication and style. In this comprehensive guide, we'll walk you through the process of installing, customizing, and troubleshooting the Dracula theme extension.

Installation Process

Step 1: Download the Repository

Begin your journey by visiting the GitHub repository and downloading the Dracula Theme Extension. If you're familiar with Git, feel free to clone the repository using the command.

git clone https://github.com/devgauravjatt/chatgpt-dracula-theme

Step 2: Manual Installation for Chrome

Navigate through the intricacies of manual installation with ease by following the detailed instructions provided in this article. Whether you're a seasoned developer or a casual user, the process is streamlined for your convenience.

Customization for a Personal Touch

The true beauty of the Dracula Theme Extension lies in its adaptability. Make ChatGPT truly yours by customizing both the font selection and color scheme.

Font Selection 🌐

Choose Your Google Font: Explore the vast library of Google Fonts at Google Fonts, select a font that resonates with your style, and copy its URL from the "Embed" tab.

Update Font URL in content.js: Open ./ChatGpt Theme/scripts/content.js, locate line 35, and seamlessly replace the existing font URL with the one you've just copied.

Change Font Family in style.css: Open ./ChatGpt Theme/css/style.css, identify line 4, and modify the font family name to reflect your preferred choice.

Color Scheme 🎨

Immerse yourself in a world of color customization by tweaking variables in style.css (starting from line 10). Tailor the theme to your liking, making each interaction uniquely yours.

Troubleshooting for Seamless Conversations 🛠️

Encountering issues can be frustrating, but fear not! Navigate through any challenges with ease by following the troubleshooting steps outlined in this section. From minor glitches to more complex problems, we've got you covered.

Contribution Guidelines 🤝

Become a part of the Dracula Theme community by contributing your unique touch to the extension. Follow the guidelines meticulously outlined in the Contribution Guidelines, ensuring a collaborative and enriching experience for all.

Licensing Information 📜

We believe in the spirit of open collaboration. This project is licensed under the MIT License, empowering users to explore, adapt, and contribute freely.

In conclusion, the Dracula Theme Extension offers more than just a visual overhaul—it provides a platform for personal expression and collaboration. Elevate your ChatGPT experience today with the dark and mysterious allure of the Dracula theme! 🦇✨

ExpressJS - Cookies and Using Express.js Middleware for Cookie Handling

Dev Gaurav Jatt — Fri, 06 Oct 2023 16:06:12 +0000

Express.js is a popular Node.js web application framework known for its simplicity and flexibility. It allows developers to build powerful web applications quickly and easily. One essential aspect of web development is handling cookies, which are small pieces of data that can be stored on a user's computer. In this blog post, we will explore how to use Express.js middleware to handle cookies effectively.

What are Cookies?

Cookies are key-value pairs that are sent from a web server and stored on a user's device. They are commonly used for various purposes, such as session management, user authentication, and tracking user preferences. Cookies are an essential part of web development, especially when it comes to maintaining user sessions and personalizing user experiences.

Setting Up an Express.js Application

Before we dive into cookie handling, let's set up a basic Express.js application. Make sure you have Node.js installed on your machine, and then create a new directory for your project. Inside the project directory, run the following commands to initialize a new Node.js project and install the required dependencies:

npm init -y
npm install express cookie-parser

Now, create a JavaScript file (e.g., app.js) and add the following code:


// Import required modules
import express from "express";
import cookieParser from "cookie-parser";

// Create an Express app
const app = express();

// Middleware to parse cookies
app.use(cookieParser());

// Define a route to set a cookie
app.get("/set-cookie", (req, res) => {
  // Set a cookie named "user" with a value "John"
  const sixDays = 6 * 24 * 60 * 60 * 1000;
  res.cookie("user", "John", { maxAge: sixDays });
  res.send("Cookie set!");
});

// Define a route to read the cookie
app.get("/get-cookie", (req, res) => {
  // Retrieve the value of the "user" cookie
  const userCookie = req.cookies.user;

  if (userCookie) {
    res.send(`Hello ${userCookie}!`);
  } else {
    res.send("Cookie not found!");
  }
});

// Start the Express server
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);

});

This code sets up a basic Express.js server and defines two routes: one for setting a cookie and another for reading the cookie. We use the cookie-parser middleware to handle cookies in our application.

Setting a Cookie

In the /set-cookie route, we set a cookie named "user" with the value "John" and a maximum age of six days. This means the cookie will expire and be deleted from the user's device after six days.

Reading a Cookie

In the /get-cookie route, we retrieve the value of the "user" cookie and check if it exists. If the cookie is found, we send a personalized greeting; otherwise, we inform the user that the cookie is not found.

Conclusion

In this blog post, we've covered the basics of using Express.js middleware to handle cookies in your web applications. Cookies are a fundamental part of web development and are used for various purposes, including session management and user authentication. Express.js simplifies cookie handling with middleware like cookie-parser, making it easy to work with cookies in your applications.`

10 Best Dark Mode Extensions for Google Chrome in 2023

Dev Gaurav Jatt — Wed, 30 Aug 2023 23:56:42 +0000

Here, we’ll show you how to get a full dark mode on Chrome even without switching on the Dark Theme option in your computer. For that, we’ll use some of the best dark mode extensions on the Chrome web store. We’ll also show you how to turn on the native dark mode option hidden within Google Chrome and tell you about the best dark themes you can use to dress up your browser in Gothic finery. So without further delay, let’s check out the 10 best dark mode extensions for Google Chrome you should use in 2022.

1. Just Black

Just Black is not an extension, but a theme, which gives your entire browser a dark look, including the New Tab page, the top bar and more. It comes from the official Chrome team, which means it’s stable, reliable and without any bloat. This is the one to install if you want a no-nonsense dark theme on your Google Chrome. However, since it darkens the entire browser from head to toe, you may find it a bit overwhelming if you still want to retain a dash of color in your browser. It also doesn’t offer some of the more enhanced customization options offered by third-party themes.

Download: (Free)

2. Dark Reader

Dark Reader is probably the most-used and best-known dark mode extension on both Chrome and Firefox. In fact, it is the one that I have used for long on Firefox, and it works impeccably on about 99% of the sites. It inverts bright colors on website, making them high contrast and easy to read at night. You can adjust brightness, contrast, sepia filter, dark mode, font settings and ignore-list. The best part? It is free and open-source software (FOSS) that doesn’t show ads and doesn’t collect user data.

Download: (Free)

3. Night Eye

Unlike Dark Reader, Night Eye enables dark mode using its proprietary algorithm, instead of inverting the colors. In addition to simply enabling dark mode, it also gives you a plethora of options to control the built-in dark themes on sites that have it. For example, you can control the built-in dark themes of YouTube, Reddit, Twitch, 9gag, DuckDuckGo and many others. For all other websites that don’t have built-in dark mode, Night Eye will convert the colors for a smooth and consistent dark theme.

Download: (Free)

4. Dark Theme for Google Chrome

Like Just Black Dark Theme for Google Chrome is also a theme rather than an extension. It offers a simple, yet effective way to bring darkness to Google Chrome for enhanced productivity. It uses a background color that’s only 80% black instead of the dark black background on offer from Just Black. The developers say that the dark grey color makes it very convenient for reading during night without eye strain. It comes from the same developer that offers the next extension on our list.

Download: (Free)

5. Turn off the Lights

Offered by the same developer that brought you Dark Theme for Google Chrome, ‘Turn off the Lights’ is different from the other extensions and themes in this list. It’s meant for video-streaming sites, and focuses on the currently playing video while dimming the rest of the content to offer users a theatrical experience. You can use the dimming feature by clicking on a ‘lamp’ button that works as a toggle. Turn off the lights works for almost all known video sites such as YouTube, Vimeo, Dailymotion, Hulu, Metacafe, YouKu, etc. It can be used in conjunction with other dark mode extensions and themes as well.

Download: (Free)

6. Midnight Lizard

Like Dark Reader, Midnight Lizard is also an open-source project hosted on Github. However, it differentiates itself from others by offering not only a single dark theme, but a number of pre-defined and customizable greyscale and colorful color schemes. It is one of the best dark mode extensions for Google Chrome if you want granular controls for everything. You can set the same theme for all websites or different colors for different sites. It also lets you adjust the brightness, saturation, contrast and hues to improve readability. There’s also a blue light filter similar to smartphones, as well as the ability to change any particular color, configure background, text, buttons, links, borders, images and scrollbars.

Download: (Free)

7. Lunar Reader

Lunar Reader is yet another high-quality Chrome extension with a 4.7 rating on the Chrome web store. In addition to offering the standard dark theme for every website, it also allows to you customize your dark theme visual for brightness, contrast and saturation. There’s also a ‘Night Shift’ mode that can be auto-activated based on the time of day. Lunar Reader filters out the blue light and changes the website’s background color to warmer, making them much more soothing on the eye. It also supports keyboard shortcuts to quickly activate or deactivate the dark theme and night shift options.

Download: (Free)

8. Dark Night Mode

Dark Night Mode is another free and open source dark mode extension that does exactly what is promises. It uses what the developer claims is a ‘unique algorithm’ to apply dark mode to all the websites in real-time as you browse. It does so by detecting the color of each element of a website and converting it to a darker shade. Bright colors are darkened at more intensity than dark colors so that most of the colors are preserved. Unlike other similar extensions, Dark Night Mode does not invert the colors, so black websites will not change their color into white. An added benefit is that the images will also not be distorted.

Download: (Free)

9. Super Dark Mode

With more than 100,000 users, Super Dark Mode is a super popular dark mode extension for Google Chrome. It not only darkens websites to help relax your eyes, it also comes with a number of notable features, including automatic scheduling, site-based enabling/disabling, customized color schemes, options to reduce brightness/contrast and custom CSS. You can also add patterns of your choice to the dark backgrounds, making it one of the more unique and best dark mode extensions for Google Chrome.

Download: (Free)

10. Dark Mode

Last but definitely not the least, is the simplistically-named ‘Dark Mode’ that enables you to apply a global dark theme to websites. Like most of the other ones on our list, this extension also comes with a toolbar button that lets you easily and quickly turn the extension ON or OFF. In addition to the default dark mode, it also comes with over 50 different themes that can be enabled from the options page. There’s also a white-list feature which enables you to exclude a desired domain from dark mode. All in all, Dark Mode is right up there with the best dark mode extensions on Google Chrome.

Download: (Free)

How to Enable the ‘Hidden’ Dark Mode in Google Chrome

Google Chrome already contains a native dark mode, but it cannot be implemented from settings unlike most options. So here’s how you can turn on the native dark mode on Google Chrome in Windows PCs.

Open Chrome and type (or copy+paste) “chrome://flags” in the address bar and press ‘Enter’.

Now search for ‘dark mode’ in the flag search bar and find “Force Dark Mode for Web Contents”. Now, choose ‘Enabled’ from the drop-down menu, as seen below.

The Chrome flag trick works not only on Windows, but also on Android, Mac and Linux, so you can use this method to implement dark mode natively on Google Chrome on your computer or smartphone, irrespective of your operating system.

Use Dark Mode on Google Chrome For a Great Browsing Experience

So now you know how to implement full dark mode on Google Chrome via extensions, themes and flags. While all of them have their own uses and their own ways of doing things, they all get the job done. Some of the extensions mentioned here also offer more granular controls than others, which is something that advanced users will surely appreciate. So go ahead, try them out and let us know which one worked best for you.

Getting Started with Custom React Hooks - A Beginner's Guide 🚀

Dev Gaurav Jatt — Sun, 27 Aug 2023 09:46:44 +0000

Are you a React beginner looking to enhance your app development skills? Custom React hooks are a powerful tool that can help you simplify your code, improve its organization, and streamline the fetching of data from APIs. In this guide, we'll take you through the process of creating a custom hook to fetch API data, all while making your code cleaner and more reusable. Let's dive in!

What Are Custom React Hooks?

Custom React hooks are functions that encapsulate reusable logic and stateful behavior. They enable you to abstract away complex operations into easy-to-use functions. One common use case is fetching data from APIs, as we'll demonstrate. Hooks provide an elegant way to keep your component code clean and focused, while allowing you to reuse the same logic in multiple places.

Creating the Custom Hook: useFetchApi 🎣

Let's create a custom hook named useFetchApi that fetches data from an API and handles loading and error states for you. The beauty of this hook lies in its simplicity and reusability. Here's how you can create it:

import { useState, useEffect } from 'react';

function useFetchApi(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, error, loading };
}

export default useFetchApi;

Fetching Data Made Easy 🌐

Using the useFetchApi hook is a breeze. Let's assume you want to fetch and display a list of products from an online store API. Here's how you'd use the hook:

import React from 'react';
import useFetchApi from './useFetchApi'; // Make sure to adjust the path

function ProductList() {
  const apiUrl = 'https://fakestoreapi.com/products';
  const { data, error, loading } = useFetchApi(apiUrl);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div className="grid grid-cols-3 gap-4">
 {/* Display the fetched product data here */}
      {data.map(product => (
        <div key={product.id} className="p-4 border border-gray-300 rounded-md">
          <img src={product.image} alt={product.title} className="w-24 mx-auto mb-2" />
          <h3 className="text-lg font-semibold">{product.title}</h3>
          <p className="text-gray-600">${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

Supercharge Your React Apps with Hooks! 💡

By using custom hooks like useFetchApi, you're abstracting away the complexity of data fetching and focusing on what matters most: building engaging user interfaces. The hook's reusability means you can fetch data effortlessly across different components, keeping your codebase clean and efficient.

So, whether you're building a shopping app, a weather dashboard, or any other application that requires data from APIs, custom React hooks will be your new best friend. Embrace the power of hooks and elevate your coding game!

In just a few lines of code, you've learned how to create and use a custom React hook for fetching data. You're well on your way to becoming a more proficient React developer. Experiment with hooks, explore their potential, and continue building awesome applications!

Conclusion

Congratulations! You've embarked on your journey to harnessing the power of custom React hooks. With the useFetchApi example, you've learned how to create a hook that fetches data from an API while handling loading and error states. Remember, custom hooks are a versatile tool that can greatly enhance your React projects. As you continue to explore, you'll uncover new ways to simplify your code and build even more amazing applications. Happy coding! 🚀

The Difference Between a Framework and a Library in JavaScript

Dev Gaurav Jatt — Sat, 08 Jul 2023 00:27:06 +0000

Developers often use the terms “library” and “framework” interchangeably. But there is a difference.

Both frameworks and libraries are code written by someone else that is used to help solve common problems.

For example, let’s say you have a program where you plan on working with strings. You decide to keep your code DRY (don’t repeat yourself) and write some reusable functions like these:

    function getWords(str) {
       const words = str.split(' ');
       return words;
    }
    function createSentence(words) {
       const sentence = words.join(' ');
       return sentence;
    }

Congratulations. You’ve created a library.

There isn’t anything magic about frameworks or library. Both libraries and frameworks are reusable code written by someone else. Their purpose is to help you solve common problems in easier ways.

I often use a house as a metaphor for web development concepts.

A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.

A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.

The Technical Difference

The technical difference between a framework and library lies in a term called inversion of control.

When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

Let’s look at an example using jQuery (a library) and Vue.js (a framework).

Imagine we want to display an error message when an error is present. In our example, we will click a button, and pretend an error occurs.

With jQuery:

    // index.html
    <html>
       <head>
          <script src="https://code.jquery.com/jquery-3.3.1.min.js"
          </script>
          <script src="./app.js"></script>
       </head>
       <body>
          <div id="app">
             <button id="myButton">Submit</button>
           </div>
       </body>
    </html>

    // app.js
    // A bunch of our own code, 
    // followed by calling the jQuery library
    let error = false;
    const errorMessage = 'An Error Occurred';
    $('#myButton').on('click', () => {
      error = true; // pretend some error occurs and set error = true
      if (error) {
        $('#app')
           .append(`<p id="error">${errorMessage}</p>`);
      } else {
        $('#error').remove();
      }
    });

Notice how we use jQuery. We tell our program where we want to call it. This is much like going to a physical library and pulling certain books off the shelf as we want them.

That’s not to say jQuery functions don’t require certain inputs once we call them, but jQuery itself is a library of those functions. We are in charge.

With Vue.js

    //index.html
    <html>
       <head>
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
          <script src="./app.js"></script>
       </head>
       <body>
          <div id="app"></div>
       </body>
    </html>
    const vm = new Vue({
      template: `<div id="vue-example">
                   <button @click="checkForErrors">Submit</button>
                   <p v-if="error">{{ errorMessage }}</p>
                 </div>`,
      el: '#vue-example',
      data: {
        error: null,
        errorMessage: 'An Error Occurred',
      },
      methods: {
        checkForErrors()  {
          this.error = !this.error;
        },
      },
    });

With Vue, we have to fill in the blanks. The Vue constructor is an object with certain properties. It tells us what it needs, and then behind the scenes, Vue decides when it needs it. Vue inverts the control of the program. We plug our code into Vue. Vue is in charge.

The difference whether it is a library or framework is whether or not there is an inversion of control.

A note on being “opinionated”

You’ll often hear frameworks and libraries described as “opinionated” or “un-opinionated.” These terms are subjective. They attempt to define the level of freedom a developer has when structuring their code.

Frameworks are more opinionated than not since — by definition — the inversion of control requires a concession of application-design freedom.

Again, the degree to which something is opinionated is subjective. For example, I personally would consider Angular a highly opinionated framework, and Vue.js a less-opinionated framework.

In summary

Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way.
A framework inverts the control of the program. It tells the developer what they need. A library doesn’t. The programmer calls the library where and when they need it.
The degree of freedom a library or framework gives the developer will dictate how “opinionated” it is.

Thanks for reading!

DEV Community: Dev Gaurav Jatt

🚀 Building Lightning-Fast Search with search-plus-ts: A Full-Stack TypeScript Solution

The Problem

Meet search-plus-ts

🎯 What We're Building

Setting Up the Backend

Building the React Frontend

The Secret Sauce: Highlighting Matches

Running the Application

Why This Architecture Works

🎯 Separation of Concerns

⚡ Performance

🔧 Developer Experience

📈 Scalability

Real-World Applications

Advanced Features You Can Add

Key Takeaways

Try It Yourself

🔥 200+ Dummy Blog Posts for UI Testing – Stop Wasting Time Writing Content!

The Problem Every Developer Faces

Meet best-blog-data - Your Blog's Best Friend

What Makes This Package Special?

🎯 Realistic Content, Not Lorem Ipsum

⚡ Zero Configuration Required

🔍 Built-in Search & Filtering

🧩 TypeScript First

Real-World Use Cases

🏗️ Static Site Generators

🎨 Design System Demos

🔧 CMS Prototyping

The API That Just Makes Sense

Pagination Made Simple

Category Management

Individual Post Retrieval

Why I Built This

Performance & Bundle Size

Get Started in 30 Seconds

What's Next?

Try It Today

Tags

🚀 Zero-Config Database Setup with Drizzle ORM - From Zero to Hero in 30 Seconds

The Problem We All Face 😤

The Solution: One Command, Complete Setup ✨

What Makes This Special? 🎯

🎨 Multiple Database Support

🔧 Smart Configuration

📦 Package Manager Agnostic

Perfect for Modern Stacks 🏗️

🚀 Astro Projects

⚡ Next.js Apps

🎯 Any JavaScript/TypeScript Project

Live Demo: See It In Action 🎬

What Gets Generated? 📁

Real-World Impact 📈

Try It Right Now! 🏃‍♂️

Community & Support 💝

What's Next? 🔮

The Bottom Line 💪

drizzle #database #postgresql #sqlite #mysql #nodejs #typescript #cli #productivity #webdev

Zero-Config DB Setup with Drizzle ORM Using drizzle-setup CLI

📚 Supercharge Your Drizzle ORM Workflow with drizzle-setup CLI

✨ Why Use drizzle-setup?

📦 Installation

🚀 Quick Start

🧪 Supported Databases

🧱 Resulting Directory Structure

🔗 Try it Now

💬 Have Feedback?

Creating an Interactive Color Picker with Svelte 5

Creating an Interactive Color Picker with Svelte 5

full code

Full code url --- https://www.sveltelab.dev/sz2qatme9a8hjb5

Understanding the Code Structure

Enhancing User Experience

Conclusion

Advanced Data Fetching Techniques in Next.js

Advanced Data Fetching in Next.js

Server-Side Rendering (SSR)

Example: Using getServerSideProps

Static Site Generation (SSG)

Meet `best-blog-data` - Your Blog's Best Friend

📚 Supercharge Your Drizzle ORM Workflow with `drizzle-setup` CLI

✨ Why Use `drizzle-setup`?

Example: Using `getServerSideProps`

Example: Using `getStaticProps`

Example: Using `getStaticProps` with `revalidate`

Example: Using `useEffect` and `useState` for Client-Side Data Fetching