DEV Community: Deepak Mardi

Mastering Pagination: From Beginner to Pro

Deepak Mardi — Sat, 09 May 2026 07:15:55 +0000

If you've ever built an app that shows a list of things—whether it's blog posts, products, or users—you've likely hit a wall: as your list grows, your app gets slower. Eventually, it might even crash.

The solution to this problem is Pagination. To truly master it, we need to look at it through three lenses: Why we need it, What it actually is, and How we implement it.

You can also read other blogs on my website

1. WHY: The Problem of "Too Much Data"

Before we learn how to build pagination, we have to understand the disaster that happens without it. Imagine you have a database with 100,000 users. If you try to fetch all of them at once:

The Server Chokes: Your database has to read 100,000 rows from the disk, package them into a massive JSON file, and send it over the internet. This takes a lot of time and CPU power.
The Internet Connection Struggles: Sending a 50MB file to a user on a mobile phone will take forever. The user will see a loading spinner (or a blank screen) and likely leave your site.
The Browser Crashes: Once the phone finally receives that 50MB file, it has to turn that data into 100,000 rows of HTML. Most mobile browsers will run out of memory and simply crash the tab.

In short: We use pagination for speed, stability, and to save on server costs.

2. WHAT: The Definition of Pagination

Pagination is the process of dividing a large dataset into smaller, manageable chunks (pages) and providing a way for the user to navigate through them.

Instead of asking for "all users," you ask for "the first 20 users." When the user is ready for more, you fetch the "next 20 users."

Think of it like a book. If a book was just one long, continuous scroll of paper, it would be impossible to handle. By breaking it into pages, the author makes the content "consumable." You can read a little, stop, and come back later to exactly where you were.

3. HOW: The Three Main Strategies

There isn't just one way to "paginate." Depending on your app's needs, you will choose one of these three implementation methods.

Method A: Offset Pagination (The \"Page Number\" Approach)

This is the most common \"How.\" You tell the database to skip a certain number of items and then take a specific amount.

The Logic: \"Skip 40 items, and give me the next 20.\" (This would be Page 3).
Best For: Simple apps where you need to jump to a specific page (e.g., \"Go to Page 10\").

The Code (SQL):

-- Fetch 20 items for Page 3
SELECT * FROM products
ORDER BY created_at DESC
LIMIT 20 OFFSET 40;

Method B: Cursor Pagination (The \"Bookmark\" Approach)

Instead of counting how many items to skip, you use a specific item as a pointer.

The Logic: \"Give me the next 20 items that come after the item with ID #505.\"
Best For: Large, constantly changing datasets (like a Facebook or Twitter feed).

The Code (SQL):

-- Fetch the next 20 items after a specific ID
SELECT * FROM products
WHERE id < 505
ORDER BY id DESC
LIMIT 20;

Method C: Infinite Scroll (The \"Automatic\" Approach)

This is actually a frontend \"How\" that usually uses Cursor Pagination in the background.

The Logic: As the user's screen reaches the bottom of the list, the app automatically triggers a request for the \"next page.\"

The Code (JavaScript):

// Simple logic to fetch more data when scrolling
window.onscroll = function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // We hit the bottom! 
    // Use the last item's ID as our 'cursor'
    const lastId = document.querySelector('.item:last-child').dataset.id;
    fetchMoreData(lastId);
  }
};

Summary Comparison

	Why use it?	What is it?	How is it built?
Offset	Simplicity	Page Numbers	`LIMIT` and `OFFSET`
Cursor	Performance	Bookmarks	`WHERE id > last_seen_id`
Infinite Scroll	Engagement	Continuous Feed	Auto-fetching more data

Introducing Habitly: A Modern Habit Tracker to Help You Build Lasting Routines

Deepak Mardi — Tue, 09 Sep 2025 05:54:12 +0000

Struggling to build and maintain new habits? You're not alone. The digital landscape is full of tools, but many are either overly complex, locked behind a paywall, or lack the features you truly need to stay motivated.

That's why I built Habitly, a modern habit tracking application designed to be simple, beautiful, and effective.

Habitly isn't just another app; it's a tool built to help you achieve your goals by focusing on core functionality and a clean, intuitive user experience.

✨ Key Features that Make Habitly Stand Out

From the start, the goal was to create a tool I would genuinely want to use every day. Habitly's features are centered around a straightforward philosophy: make habit tracking effortless and insightful.

Daily Tracking: Mark habits as complete with a single click. No convoluted menus or extra steps.
Streak Tracking: Automatically see your progress with consecutive day counts, a powerful motivator.
Progress Visualization: Beautiful heatmaps give you a clear, at-a-glance view of your habit history.
Analytics Dashboard: Get a comprehensive overview of your habit performance and identify trends.
Secure User Authentication: Log in with Google OAuth, so you can start tracking in seconds.

🛠️ The Technology Behind Habitly

For the developers out there, here's a look at the tech stack that powers Habitly. The project is built on modern, widely-used technologies, making it easy to understand and work with.

Frontend: Next.js 14, React, and a clean, responsive design built with Tailwind CSS and shadcn/ui.
Backend: Next.js API Routes for fast and efficient data handling.
Database: PostgreSQL, managed with Prisma ORM for reliable and type-safe database access.
Authentication: NextAuth.js provides a secure and easy-to-implement authentication system.
Charts: Progress heatmaps and other data visualizations are powered by Recharts.

🚀 Get Started and Connect

If you're interested in using Habitly, you can check out the GitHub repository or Website:

Explore the project: Learn about the features and future plans.
Report issues: Found a bug? Have an idea for a new feature? Let me know!
Connect with me: I have a lot of ideas for the future, including reminders, advanced analytics, and more.

Habitly is a passion project, and I'm excited to see where it goes. I hope it helps you build the lasting habits you're looking for.
If you have any questions or want to discuss the project, feel free to leave a comment or open an issue on GitHub. Happy tracking!

Building FeedbackSense: How I Solved the Customer Feedback Analysis Problem with AI

Deepak Mardi — Mon, 07 Jul 2025 08:25:18 +0000

Building FeedbackSense: How I Solved the Customer Feedback Analysis Problem with AI

The Problem That Sparked Everything
During my conversations with several small business owners, I noticed a recurring frustration. Sarah, who runs an e-commerce store, told me she spends hours every week manually reading through customer reviews, support emails, and survey responses scattered across different platforms. "I know there are insights in all this feedback," she said, "but I just don't have the time to analyze it properly."

This resonated with me because it's a problem that affects countless businesses. Customer feedback arrives through multiple channels - email support tickets, Google reviews, social media comments, survey responses, and direct messages. While this feedback contains valuable insights about customer satisfaction, product issues, and improvement opportunities, most businesses lack the tools to analyze it efficiently at scale.

The traditional approach involves manually reading through hundreds of responses, trying to identify patterns, and categorizing feedback by sentiment or topic. This process is not only time-consuming but also prone to human error and bias. Important insights often get lost in the noise, and by the time patterns are identified, the opportunity to act on them may have passed.
I realized there was an opportunity to build a solution that could automate this analysis process using modern AI technology, while still maintaining the human touch that businesses need to understand their customers deeply.

My Solution: FeedbackSense
I decided to build FeedbackSense, an AI-powered customer feedback analysis platform that addresses these pain points head-on. The core idea was simple: create a centralized platform where businesses can upload their feedback data and receive instant, actionable insights through AI analysis.

Key Features That Make a Difference
Smart Data Import and Column Mapping
One of the first challenges I tackled was data flexibility. Real-world CSV files come in all shapes and sizes, with different column names and structures. Instead of forcing users to reformat their data, I built a Smart Column Mapping system that automatically detects CSV structure and lets users map their existing columns to feedback fields. Only the main feedback text is required, while fields like source, category, and date can be optional or auto-generated by AI.

Intelligent Batch Processing
To balance performance with cost-effectiveness, I implemented a batch processing system that analyzes 15 feedback items at a time, with a maximum limit of 100 rows per upload. This approach keeps AI processing costs reasonable while maintaining fast response times of 1-2 seconds per batch. The system provides real-time progress updates, so users always know what's happening behind the scenes.

Comprehensive AI Analysis
Each piece of feedback goes through multiple layers of AI analysis using Google's Gemini AI. The system performs sentiment classification to determine whether feedback is positive, negative, or neutral, and automatically categorizes content by topic. This dual approach gives businesses both emotional context and topical insights from their customer data.

Visual Dashboard and Reporting
The results are presented through an intuitive dashboard that shows sentiment distribution, trending topics, and key performance indicators. Users can drill down into individual feedback items or view aggregate trends over time. The system also generates comprehensive AI-powered reports that provide actionable recommendations based on the analysis.

Technical Decisions That Shaped the Platform
Why Next.js for the Frontend
I chose Next.js because it provides excellent performance out of the box with server-side rendering, built-in API routes, and excellent developer experience. The framework's file-based routing and API integration made it easy to build both the user interface and backend endpoints in a cohesive manner.

Supabase as the Backend Foundation
Rather than building custom backend infrastructure, I opted for Supabase as my backend-as-a-service platform. This decision gave me access to PostgreSQL database, authentication, real-time subscriptions, and storage without the complexity of managing servers. Supabase's real-time features were particularly valuable for showing live updates during the batch processing workflow.

Gemini AI for Natural Language Processing
For the AI analysis component, I integrated Google's Gemini AI, which provides excellent performance for sentiment analysis and text categorization tasks. I also built the system to be compatible with OpenAI's API, providing flexibility for future model switching based on performance or cost requirements.

AWS for Deployment and Scalability
I deployed the application on AWS to ensure reliability and scalability. The cloud infrastructure provides the performance needed for real-time processing while maintaining cost efficiency for a growing user base.

Screenshots and User Journey

Screenshot 1: Landing Page

Screenshot 2: Project Creation

Screenshot 3: CSV Upload Interface

Screenshot 4: Smart Column Mapping

Screenshot 5: Batch Processing in Action

Screenshot 6: All Feedback View

Screenshot 7: Dashboard Analytics

Screenshot 8: AI-Generated Report

The Development Journey
Building FeedbackSense taught me valuable lessons about balancing user experience with technical complexity. The most challenging aspect was designing the batch processing system to be both efficient and user-friendly. I went through several iterations before landing on the current approach that processes 15 items per batch with clear progress indicators.

The Smart Column Mapping feature was another interesting challenge. I had to anticipate various CSV formats while keeping the interface intuitive. The solution involved building flexible parsing logic that could handle different column names, data types, and missing values gracefully.

Integrating AI analysis required careful consideration of rate limits, error handling, and cost optimization. I implemented retry logic for failed requests and built the system to gracefully handle API failures without losing user data.

Real-World Impact
The platform successfully demonstrates how modern web technologies can solve real business problems. Users can process 100 feedback items in under 2 minutes with over 95% accuracy in sentiment detection. The automated categorization and reporting features save hours of manual analysis work, allowing business owners to focus on acting on insights rather than finding them.

The batch processing approach keeps AI costs reasonable while maintaining high performance, making the solution accessible to small and medium businesses that need these insights most.

What's Next
This project opened my eyes to the potential of AI-powered business tools. Future enhancements I'm considering include real-time collaboration features for teams, advanced analytics with trend prediction, and mobile application development for on-the-go insights.

The experience of building FeedbackSense from problem identification to deployment has been incredibly rewarding. It reinforced my belief that the best software solutions come from understanding real user problems and applying technology thoughtfully to solve them.

Try It Yourself
🚀 Live Demo: FeedbackSense Live Application
💻 Video Demo: Link

Feel free to explore feedbacksense, try the live demo, or reach out if you have any questions about the implementation.

Built with Next.js, Supabase, Gemini AI, and deployed on AWS. This project represents my approach to full-stack development, AI integration, and solving real-world business problems through technology.

I'd love to hear your thoughts on this project or discuss how similar solutions could address other business challenges. You can reach me on LinkedIn or Twitter for any questions or collaboration opportunities.

This case study is part of my portfolio showcasing full-stack development skills and practical problem-solving with modern web technologies.

What is your goto tailwind UI Component library for landing pages?

Deepak Mardi — Wed, 06 Mar 2024 12:31:40 +0000