DEV Community: Mas'ud Ali

Automating Travel Planning with n8n and Real-time scrape using Bright Data

Mas'ud Ali — Sun, 31 Aug 2025 18:51:15 +0000

This is a submission for the AI Agents Challenge powered by n8n and Bright Data

What I Built

I created an AI-powered Travel Planner using n8n and Bright Data to streamline the process of finding flights and accommodations. This agent takes user input via a form, fetches real-time flight data from Google Flights, scrapes accommodation listings from Airbnb, Booking.com, and Agoda, and uses Google Gemini AI to generate personalized travel recommendations. The recommendations are delivered as professional, mobile-friendly HTML emails, making it easy for users to review and book their ideal travel options.

The agent solves the problem of time-consuming travel planning by automating data collection, analysis, and recommendation generation, ensuring users receive tailored flight and hotel suggestions based on their preferences, such as budget, location, and special requirements (e.g., pet-friendly accommodations).

Preview Workflow

Demo

n8n Workflow

Gist Github : link

Technical Implementation

System Instructions: The agent is designed to act as a professional travel advisor. It processes user form submissions, transforms data for API compatibility, fetches flight and accommodation data, and generates HTML emails with curated recommendations. Instructions are embedded in Google Gemini nodes to ensure precise data transformation and recommendation logic.
Model Choice: The workflow uses Google Gemini (models/gemini-2.0-flash for form data transformation and models/gemini-2.5-flash for recommendation generation) due to its ability to handle structured JSON transformations and generate professional HTML content.
Memory: The workflow maintains context through n8n’s node-based data flow, passing JSON objects between nodes. No external memory storage is used, as n8n’s internal data handling suffices.
Tools Used:
- n8n Form Trigger: Captures user input (e.g., origin, destination, dates, traveler counts).
- SerpApi: Queries Google Flights for flight data.
- Bright Data Verified Node: Scrapes accommodation data from Airbnb, Booking.com, and Agoda.
- Google Gemini: Transforms form data and generates recommendation emails.
- Gmail: Sends HTML emails with flight and hotel recommendations.
- n8n Nodes: Code, If, Merge, Loop, Wait, Edit, and Aggregate nodes for data processing, conditional logic, and workflow control.

Bright Data Verified Node

The Bright Data Verified Node is integral to the accommodation search process. It is used in three nodes to scrape data from major platforms:

Airbnb Properties Information: Sends a POST request to Bright Data’s API (https://api.brightdata.com/datasets/v3/trigger) with parameters like location, check-in/check-out dates, and number of travelers/pets to discover pet-friendly homestays.
Booking Hotel Listings with Pricing: Queries Booking.com with similar parameters, focusing on hotel listings with pricing details.
Agoda Properties Listings with Pricing: Queries Agoda for additional accommodation options.

The node outputs a snapshot_id for each platform, which is monitored by the Check the status snapshot node until the status is ready. The Download the snapshot content node then retrieves the scraped data, which is analyzed by Google Gemini to select the best hotel match. Bright Data’s ability to handle real-time web scraping ensures up-to-date and accurate accommodation data, critical for reliable recommendations.

Journey

Building this travel planner was an exciting challenge. My goal was to create a tool that simplifies the overwhelming process of planning a trip, especially for families with specific needs like pet-friendly accommodations.

Process

Planning: I started by mapping out the user journey: submitting a form, fetching data, analyzing options, and delivering recommendations. I chose n8n for its flexibility and Bright Data for its robust web scraping capabilities.
Form Design: I designed a comprehensive form to capture essential travel details, ensuring fields like "Pets" and "Travel Preferences" allowed for nuanced preferences.
Data Integration: Integrating SerpApi for flights and Bright Data for accommodations was straightforward, but transforming form data into API-compatible formats required careful configuration of the Google Gemini node.
Recommendation Logic: I leveraged Google Gemini’s AI to analyze flight and hotel data, scoring options based on user preferences (e.g., proximity to public transport, pet-friendliness).
Email Design: Crafting mobile-friendly, professional HTML emails was critical. I used inline CSS and tested the output to ensure compatibility with Gmail.

What I Learned

n8n’s Power: n8n’s node-based architecture is incredibly versatile for orchestrating complex workflows involving multiple APIs.
Bright Data’s Capabilities: The Bright Data Verified Node simplified web scraping, allowing me to focus on data analysis rather than scraping mechanics.
AI Prompt Engineering: Writing precise prompts for Google Gemini was key to achieving accurate data transformations and high-quality recommendations.
User-Centric Design: Designing the form and email outputs with the user in mind (e.g., mobile-friendly emails, clear booking links) significantly improved the workflow’s usability.

Conclusion

This AI-powered Travel Planner demonstrates how n8n and Bright Data can transform a complex task like travel planning into a seamless, automated experience. By integrating real-time data scraping, AI analysis, and email delivery, the agent delivers personalized travel recommendations that save time and meet user needs. I’m excited to share this project with the DEV community and hope it inspires others to explore the possibilities of automation in travel and beyond!

Team Submission: This is a solo project, I’d like to thank the n8n and Bright Data communities for their excellent documentation and support.

Typing Challenge - realtime typing leaderboard, analytics, and active typers powered by Redis

Mas'ud Ali — Sun, 10 Aug 2025 14:06:01 +0000

This is a submission for the Redis AI Challenge: Beyond the Cache.

What I Built

Typing Challenge is a realtime typing practice app with persistent user profiles, per-user test histories, global analytics, leaderboards, and live active typers count. The frontend (React / Next.js) consumes a backend API and WebSocket events. The backend uses Redis 8 as the primary datastore and realtime engine not just as a cache but as the main source of truth for users, test results, leaderboards, active typers, and instant messaging.

Key features:

Persistent user profiles + last 100 test runs per user.
Global stats (avg WPM, avg accuracy, total tests, total users).
Multi-type leaderboards (WPM, accuracy, consistency) using Redis sorted sets.
Realtime active typers list and count using Redis Sets.
Realtime progress, session events, and broadcasts using Redis Pub/Sub + Socket.IO.
Efficient atomic updates using Redis pipelines.
Simple content store for typing texts (hash) and random text retrieval.

Demo

Demo: link
Backend repository: link
Frontend repository: link

Video Demo

How I Used Redis 8

I relied on Redis as the primary database and realtime layer. Below is a breakdown of the features I used and where they live in the code.

Primary database (data models)

Hashes for user profiles and global stats:
- user:<username> stores total_tests, avg_wpm, avg_accuracy, best_wpm, last_seen, etc.
- global:stats stores counters used to compute averages.
Lists store per-user test history (LPUSH + LTRIM to keep last 100 tests).
Sets track unique users for global stats.
Sorted Sets (ZSETs) power the leaderboards by storing scores for leaderboard:wpm, leaderboard:accuracy, leaderboard:consistency.

Realtime & messaging

Pub/Sub: publishes events like typing:updates when tests are submitted, stats change, users go online/offline, and typing progress updates.
Socket.IO integrates with Redis so multiple backend instances can stay in sync.

Realtime active typers

Sets are used to track currently active typers:
- When a user starts typing, their username is added to active_typers (SADD).
- When they stop or disconnect, they’re removed (SREM).
The count (SCARD active_typers) and list (SMEMBERS active_typers) are broadcast via Pub/Sub.
The frontend listens for active_typers_update events to instantly update the live counter/list.

Performance & correctness

Pipelines are used to make updates atomic and efficient.
Efficient reads: MGET / HMGET fetch multiple values at once.
Dedicated Pub/Sub client: keeps messaging independent from normal Redis operations.

Why this demonstrates “Beyond the Cache”

This project uses Redis as:

a primary data store (hashes, lists, sets, zsets),
a realtime event system (Pub/Sub + Socket.IO),
an analytics engine for aggregates and leaderboards,
and an operational presence tracker for active typers.

Architecture diagrams

Team Submission

I worked on this challenge individually.

Conclusion

The Typing Challenge project shows that Redis is far more than a cache it can serve as a primary data store, realtime event bus, analytics engine, and presence tracker all in one.

By combining Hashes, Lists, Sets, Sorted Sets, Pub/Sub, and pipelines, i built a system that delivers:

millisecond-latency leaderboards,
instant global stats updates, and
live active typer tracking all without a traditional SQL or NoSQL database.

Redis 8’s speed, versatility, and rich data structures made it possible to keep the experience fast, consistent, and engaging for users.

This approach can scale horizontally, handle spikes in activity, and power both persistent storage and ephemeral realtime events truly going beyond the cache.

Nenet: A Scalable Intranet Portal for the Modern Workplace

Mas'ud Ali — Sat, 26 Jul 2025 17:18:19 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

For this challenge, I built Nenet, a holistic and dynamic intranet dashboard designed to be the central nervous system for a modern organization. My goal was to move beyond a static information portal and create an interactive ecosystem that boosts productivity, enhances communication, and fosters a strong sense of community and engagement among employees.

To bring this vision to life, I chose a modern, high-performance tech stack: Next.js, Tailwind CSS, and shadcn/ui.

Next.js was the ideal framework for its powerful features like Server-Side Rendering (SSR) and file-based routing, ensuring the dashboard is fast, scalable, and provides a seamless user experience.
Tailwind CSS allowed me to rapidly build a custom, responsive, and visually consistent UI without writing custom CSS files. Its utility-first approach was perfect for crafting the complex, widget-based layout of Nenet.
shadcn/ui provided a set of beautifully designed, accessible, and unopinionated components. This allowed me to build the UI quickly while retaining full control over styling and functionality, which was crucial for achieving Nenet's unique look and feel.

Nenet provides a comprehensive, at-a-glance overview of everything an employee needs, from personal tasks to company-wide performance metrics.

Layout & Content

Sidebar Layout

1. Application Name/Logo

At the very top, the name "Nenet." is displayed in a large, bold font, serving as the brand identity for the platform.

2. User Profile Section

This area personalizes the experience for the user.

Profile Picture: A circular avatar user.
User Name: The name "Mas'ud Ali" is clearly displayed, identifying the user.
User Score/Metric: Below the name, there is a star icon next to the number "80.5". This performance metric within the application.

3. Main Menu

This section provides the primary navigation for the application.

Header Layout

On the Left Side:

1. Mini sidebar & open sidebar for mobile Toggle Icon

The icon on the far left, a rectangle with a line, is button to toggle mini sidebar or open sidebar for mobile

2. Search Bar

A prominent search field and placeholder text "Search something...". This allows users to easily find information, documents, or other content within the application. when type in input will showing the result.

On the Right Side:

1. Notifications

A bell icon, which is a universal symbol for notifications. The small red dot on top indicates that the user has new, unread notifications. on click the button will show popover ui and list notification user can mark all read, clear all, and search notifications its all working.

2. Launch pad

The nine-dot grid icon (often called a "waffle menu") on click opens a popover that allows users to open new tab for selected app.

3. Dark mode toggle

User can choose preferences between light and dark mode.

4. Team Members:

Clicking opens a popover with a searchable list of members, showing their avatar, name, birthday, and social media links.

Avatars: A stacked group of profile pictures representing the users or members of the current team, project, or workspace.
Member Count: The text "8 members" next to the avatars explicitly states the number of people.

In summary, this header is from a modern, collaborative application. It provides the user with essential tools at a glance: searching, checking notifications, and seeing who is part of their team. The design is project management tools, communication platforms, or company intranets like Slack, Notion, or Microsoft Teams.

Main Layout

1. Welcome Section

This UI is dedicated to greeting the user. It features a personalized, dynamic message. This greeting is contextually aware, appropriately using "Good evening" based on the current time. It also includes a brief description of the platform's purpose and The "Show current tasks" button clicking will show dialog provides a direct shortcut to the user's detailed task list.

2. Weekly Progress

This UI gives a quick, visual summary of the user's productivity. It uses a circular progress bar to show that 52% of the weekly goals have been met, further detailed as "3/6 tasks done". It's a motivational tool that provides immediate feedback on performance.

3. News & Announcement Carousel

Positioned in the top right, this large, eye-catching UI serves as the primary channel for news and announcements. It functions as a carousel, allowing multiple important items to be featured.

4. Projects in Progress

This is a task management module that displays the user's active projects. It uses a stacked card interface, with the top card showing detailed information about task. Avatar in bottom right indicate the reporter you can hover to see detail and contact the reporter.

5. Schedule

This component provides a clear timeline of the user's daily agenda. It lists appointments with specific times (13:00, 14:00, etc.), event titles, and the associated department or team (e.g., "Marketing," "Human Resources"). Avatar in bottom right indicate the reporter you can hover to see detail and contact the reporter.

5. Quick Links

This section provides single-click access to the most important areas of the intranet. It features five clearly labeled buttons: News, Spaces, People, Social Corner, and Handbook. This serves as a secondary, more visual navigation menu.

6. Spaces

"Spaces" are collaborative hubs or communities within the platform. This widget showcases several key spaces like Company Announcement, Human Resources, Information Technology, and the Paris Office. Each space is presented as a card with an icon and description, and a "View more" link allows users to browse all available spaces.

7. Stats

This widget provides high-level business intelligence with clear data visualizations. It includes two charts:

Project completed: A bar chart showing the trend of completed projects
New hires: A similar bar chart tracking new employee onboarding over the same period, This offers a transparent view of company growth and productivity.

8. Event

This is a comprehensive module for managing and viewing company events.
The main feature is a tabbed interface allowing users to filter events by Ongoing, Upcoming, and Finished status.

9. Your Performance

This UI provides the user with a private, detailed view of their own work patterns.

Chart Type: It uses a dual-line graph to compare performance over time.
Metrics: The Y-axis measures performance in hours (from 0h to 12h), likely representing hours worked or time logged on tasks. The X-axis tracks the days of the month.
Comparison: The two lines allow for easy comparison between "This month" (dark line) and "Last month" (green line), helping the user identify trends and changes in their daily productivity.

10. Top Performers

This fully-visible is the public-facing side of performance tracking and serves as a powerful tool for gamification and recognition.

Filtering: It features tabs to filter the leaderboard by different time frames: All Time, Last 30 Days, This Week, and Today..
Leaderboard: It ranks employees based on a performance score. Each entry includes: The employee's name, photo, and job title
Their total Score The positive or negative Change in their score over the selected period.

Purpose: This feature fosters motivation and friendly competition by publicly celebrating high achievers. It directly connects to the personal score seen in the user's sidebar profile.

Overall Dashboard Summary

the Nenet dashboard proves to be a comprehensive and well-designed hub for the modern workplace. It masterfully balances:

Personal Productivity (Welcome message, My Tasks, Your Performance chart).
Team & Company Collaboration (Spaces, Schedule, Events).
Information & News (Announcements, News links).
Performance & Engagement (Stats, Weekly Progress, Top Performers leaderboard).

The consistent design and thoughtful integration of these elements create a single, powerful tool that supports an user throughout their day.

Responsiveness

Responsive design is the practice of building a web that automatically adapts its layout to fit the user's screen size, providing an optimal experience on any device. This image showcases that principle beautifully:

Desktop and Laptop: On wide screens, the "Nenet" dashboard uses a multi-column layout to display many widgets side-by-side, making full use of the available space.
Tablet: On the mid-sized tablet screen, the layout intelligently collapses into a single, scrollable column. The content remains large, readable, and easy to interact with via touch.
Smartphone: On the smallest screen, the layout becomes even more compact and linear. Font sizes, buttons, and spacing are all adjusted to ensure usability on a narrow display.

Desktop Performance: Exceptional Quality

For this i using google page speed insights. in This report shows a near-perfect score for the desktop version of your application. The scores of 99 in Performance and a perfect 100 in Accessibility, Best Practices, and SEO. They prove that the application is extremely fast, fully accessible, and built to the highest professional standards for desktop users.

Mobile Performance: Strong and Responsive

For this i using google page speed insights. he mobile report also demonstrates excellent quality. A Performance score of 87 is very strong for mobile's stricter testing conditions, indicating a fast and responsive user experience. The perfect 100 in Accessibility, Best Practices, and SEO confirm that the application is perfectly optimized for users on any device, showcasing a high-quality, mobile-first approach.

Demo

Live Demo URL: link
Source code : link

Journey

My journey began when I discovered the challenge. I started by researching what an intranet workspace typically looks like. Later, Axero provided some template examples, which gave me a clearer direction and inspiration for the project.

Process

The process began with choosing the tech stack. I decided to use Next.js, as it offers scalability and is well-maintained. Alongside it, I used Tailwind CSS and shadcn/ui for styling and UI components.

I then searched online for UI inspiration and found several designs that worked well together, which helped me shape the overall look and feel. For the content, I referred to Axero’s intranet templates.

After building the core of the project, I reviewed the judging criteria and saw that Accessibility was important. I focused on improving accessibility, optimizing performance, and refining my code.

Finally, I worked on making the design responsive across various devices. I used the ResponsivelyApp to test and adjust the UI for different screen sizes. With everything polished, the project was complete.

What I'm Proud Of

The Polished UI/UX: I invested a lot of time, refining the user interface. I believe the final result is not just functional but also aesthetically pleasing and a joy to use.
The Performance Scores: Seeing scores of 99 on Desktop and a strong 87 on Mobile was incredibly rewarding. It's objective proof that the architectural and technology choices paid off, resulting in a high-quality, professional-grade application.
The Engagement System: I didn't want to build just another information portal. The interconnected system of personal performance charts, weekly progress trackers, and the public "Top Performers" leaderboard was my attempt at creating a truly engaging platform that motivates and recognizes employees.

Team Submission

I worked on this challenge individually.

LICENSE : MIT

I want to extend a huge thank you to Axero and the DEV Community for organizing this challenge. The "Office Edition" theme provided the perfect motivation and a clear, real-world problem to solve. Having a deadline and a community of fellow developers to share with was the catalyst I needed to push this project from a simple idea to a fully-realized, high-performance application. It was a fantastic experience!

Building a Custom Date Range Picker in React

Mas'ud Ali — Tue, 01 Jul 2025 12:22:11 +0000

Date pickers are a common feature in web applications, but sometimes the off-the-shelf solutions don't quite fit your needs. In this post, we'll walk through how to build a custom, reusable date range picker using React, Next.js, and the powerful date-fns library.

We'll break down the component structure from the inside out, starting with the core logic and building up to the final implementation on the main page.

Here's a quick look at what we'll be building: a clean, modern date range picker with hover previews and easy navigation.

Core Technologies

React & Next.js: For building our UI components.
date-fns: A lightweight and powerful library for date manipulation.It's like Lodash, but for dates.
Tailwind CSS: For styling our components.
TypeScript: For type safety.

Project Structure
the Date range picker is broken down into several key components:

app/page.tsx: The main page where our DateRange component is used.
components/DateRange/index.tsx: The main wrapper component that handles the state and logic for the date picker.
components/DateRange/Calendar.tsx: Renders the calendar grid, including the month header and days of the week.
components/DateRange/Days.tsx: Represents an individual day in the calendar. This is where most of the selection logic happens.
components/DateRange/PreviewMonth.tsx: A simple component to display the non-interactive days from the previous and next months.
types/DateRange.ts: A file to define TypeScript interfaces.
lib/utils.ts: A home for our utility functions.

Defining Types with TypeScript

To ensure our component is type-safe and that we're passing the correct props, we define an interface in types/DateRange.ts. This makes our code more predictable and easier to debug.

export interface DateRangeProps {
  startDate?: string;
  endDate?: string;
  onStart: (date: string) => void;
  onEnd: (date: string) => void;
  disablePast?: boolean;
}

This interface specifies that startDateand endDateare optional strings, while onStartand onEndare required functions. The disablePastprop is also an optional boolean. We'll import and use this interface across our components.

Creating a Class Name Utility (cn)

When working with Tailwind CSS in React, you often need to apply classes conditionally. A common pattern is to use a helper function to merge class names cleanly and avoid conflicts. We'll create a utility file at lib/utils.ts for this purpose.
This function uses two popular libraries:

clsx: For easily toggling classes based on state.
tailwind-merge: To intelligently merge Tailwind classes, preventing style conflicts (e.g., merging p-2 and p-4 results in p-4). You'll need to install them first:

npm install clsx tailwind-merge

Then, create the utility file:

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

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

We import this cn function in our components to build dynamic className strings for styling elements based on their state.

The `DateRange` Wrapper

This component is the brain of our date picker. It manages the state for the currently displayed month (monthOffset) and the hoveredDatefor the preview effect. It accepts the disablePast prop and passes it down to the Calendar.

'use client';
import React, { useState, useCallback, useMemo } from 'react';
import { addMonths } from 'date-fns';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import Calendar from './Calendar';
import { DateRangeProps } from '@/types/DateRange';

const DateRange = ({
  startDate,
  endDate,
  onStart,
  onEnd,
  disablePast,
}: DateRangeProps) => {
  const [monthOffset, setMonthOffset] = useState(0);
  const [hoveredDate, setHoveredDate] = useState<Date | null>(null);

  const currentDate = useMemo(
    () => addMonths(new Date(), monthOffset),
    [monthOffset]
  );

  const handlePrevMonth = useCallback(() => {
    setMonthOffset((prev) => prev - 1);
  }, []);

  const handleNextMonth = useCallback(() => {
    setMonthOffset((prev) => prev + 1);
  }, []);

  const handleHoveredDateChange = useCallback((date: Date | null) => {
    setHoveredDate(date);
  }, []);

  return (
    <div className="relative rounded-lg shadow-lg border p-6 bg-white max-w-md mx-auto">
      {/* Navigation Header */}
      <div className="flex justify-between items-center mb-4">
        <button
          type="button"
          onClick={handlePrevMonth}
          className="p-2 absolute cursor-pointer left-7 top-8 hover:bg-gray-100 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-200"
          aria-label="Previous month"
        >
          <ChevronLeft size={20} />
        </button>

        <button
          type="button"
          onClick={handleNextMonth}
          className="p-2 absolute cursor-pointer right-7 top-8 hover:bg-gray-100 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-200"
          aria-label="Next month"
        >
          <ChevronRight size={20} />
        </button>
      </div>

      <Calendar
        date={currentDate}
        startDate={startDate}
        endDate={endDate}
        onStart={onStart}
        onEnd={onEnd}
        hoveredDate={hoveredDate}
        setHoveredDate={handleHoveredDateChange}
        disablePast={disablePast}
      />
    </div>
  );
};

export default DateRange;

The `Calendar` Component: Assembling the Grid

The Calendar component is responsible for laying out the grid of days. It calculates which days belong to the previous, current, and next months, and then uses our Days and PreviewMonth components to render the complete calendar view.

'use client';

import React, { useMemo } from 'react';
import {
  format,
  startOfMonth,
  getDaysInMonth,
  getDay,
  setDate,
  subMonths,
  addMonths,
} from 'date-fns';
import Days from './Days';
import PreviewMonth from './PreviewMonth';
import { DateRangeProps } from '@/types/DateRange';

// --- Type Definitions ---
interface CalendarProps extends DateRangeProps {
  date: Date;
  hoveredDate: Date | null;
  setHoveredDate: (date: Date | null) => void;
}

// --- Constants ---
const WEEK_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// --- Helper Functions for Calendar Grid Generation ---

/**
 * Generates the array of day elements for the visible portion of the previous month.
 */
const generatePrevMonthDays = (date: Date, firstDayOfWeek: number) => {
  const prevMonth = subMonths(date, 1);
  const daysInPrevMonth = getDaysInMonth(prevMonth);

  return Array.from({ length: firstDayOfWeek }, (_, i) => {
    const dayNumber = daysInPrevMonth - firstDayOfWeek + i + 1;
    const day = setDate(prevMonth, dayNumber);
    return <PreviewMonth key={`prev-${dayNumber}`} day={day} />;
  });
};

/**
 * Generates the array of selectable day elements for the current month.
 */
const generateCurrentMonthDays = (
  date: Date,
  props: Omit<CalendarProps, 'setHoveredDate'> & {
    setHoveredDate: (date: Date | null) => void;
  }
) => {
  const daysInCurrentMonth = getDaysInMonth(date);

  return Array.from({ length: daysInCurrentMonth }, (_, i) => {
    const day = setDate(date, i + 1);
    return (
      <Days
        key={`current-${i + 1}`}
        day={day}
        startDate={props.startDate}
        endDate={props.endDate}
        onStart={props.onStart}
        onEnd={props.onEnd}
        hoveredDate={props.hoveredDate}
        setHoveredDate={props.setHoveredDate}
        disablePast={props.disablePast}
      />
    );
  });
};

/**
 * Generates the array of day elements for the visible portion of the next month.
 */
const generateNextMonthDays = (date: Date, totalDays: number) => {
  const remainingSlots = (7 - (totalDays % 7)) % 7;
  if (remainingSlots === 0) return [];

  const nextMonth = addMonths(date, 1);

  return Array.from({ length: remainingSlots }, (_, i) => {
    const day = setDate(nextMonth, i + 1);
    return <PreviewMonth key={`next-${i + 1}`} day={day} />;
  });
};

// --- Main Calendar Component ---

const Calendar = React.memo<CalendarProps>(({ date, ...props }) => {
  const calendarDays = useMemo(() => {
    const firstDayOfMonth = startOfMonth(date);
    const firstDayOfWeek = getDay(firstDayOfMonth); // 0 (Sun) - 6 (Sat)

    const prevMonthDays = generatePrevMonthDays(date, firstDayOfWeek);
    const currentMonthDays = generateCurrentMonthDays(date, { date, ...props });
    const nextMonthDays = generateNextMonthDays(
      date,
      prevMonthDays.length + currentMonthDays.length
    );

    return [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
  }, [date, props.startDate, props.endDate, props.hoveredDate, props]);

  return (
    <div className="flex flex-col">
      {/* Month/Year Header */}
      <h3 className="text-neutral-800 text-center font-semibold mb-4 text-lg">
        {format(date, 'MMMM yyyy')}
      </h3>

      {/* Week Day Headers */}
      <div className="grid grid-cols-7 gap-1 mb-2">
        {WEEK_DAYS.map((day) => (
          <div
            key={day}
            className="text-center text-xs font-medium text-gray-500 py-2"
          >
            {day}
          </div>
        ))}
      </div>

      {/* Calendar Grid */}
      <div className="grid grid-cols-7 gap-1">{calendarDays}</div>
    </div>
  );
});

Calendar.displayName = 'Calendar';

export default Calendar;

The `PreviewMonth` Component: Filler Days

To create a standard calendar grid, we often need to display the last few days of the previous month and the first few days of the next month. The PreviewMonth component handles this. It's a simple, non-interactive component that just displays a day number with a faded style.

import React from 'react';
import { format } from 'date-fns';

const PreviewMonth = ({ day }: { day: Date }) => {
  return (
    <button
      type="button"
      className="text-gray-300 relative z-0 flex w-full aspect-square transition duration-200 ease-in-out items-center justify-center text-sm font-medium rounded-lg"
      disabled
    >
      {format(day, 'd')}
    </button>
  );
};

export default PreviewMonth;

The `Days` Component: Core Logic

The Days component is where the magic happens. It handles user interactions and determines the styling for each day based on its state (e.g., start date, end date, in-range, hovered). This is also where we implement the logic for the disablePast prop. If disablePast is true, any date before today is rendered as a disabled button.

'use client';

import React, { useMemo, useCallback } from 'react';
import {
  format,
  isWithinInterval,
  isSameDay,
  startOfDay,
  isBefore,
  parseISO,
  isValid,
  isAfter,
} from 'date-fns';
import { cn } from '@/lib/utils';
import { DateRangeProps } from '@/types/DateRange';

// --- Type Definitions ---
interface DaysProps extends DateRangeProps {
  day: Date; // The specific day to render
  hoveredDate: Date | null;
  setHoveredDate: (date: Date | null) => void;
}

// --- Main Days Component ---
const Days = React.memo<DaysProps>(
  ({
    day,
    startDate: startStr,
    endDate: endStr,
    onStart,
    onEnd,
    hoveredDate,
    setHoveredDate,
    disablePast,
  }) => {
    // --- Memoized Date Logic ---
    const {
      startDate,
      endDate,
      disablePastDay,
      isStartDay,
      isEndDay,
      isInRange,
      isPreviewing,
    } = useMemo(() => {
      const today = startOfDay(new Date());
      const internaldisablePastDay = disablePast && isBefore(day, today);

      const start =
        startStr && isValid(parseISO(startStr)) ? parseISO(startStr) : null;
      const end = endStr && isValid(parseISO(endStr)) ? parseISO(endStr) : null;

      const internalIsStartDay = start && isSameDay(day, start);
      const internalIsEndDay = end && isSameDay(day, end);

      const internalIsInRange =
        start &&
        end &&
        isAfter(end, start) &&
        isWithinInterval(day, { start, end });

      // Is a date range being actively selected (i.e., start is set, but end is not)
      const internalIsPreviewing =
        start &&
        !end &&
        hoveredDate &&
        isAfter(hoveredDate, start) &&
        isWithinInterval(day, { start, end: hoveredDate });

      return {
        startDate: start,
        endDate: end,
        disablePastDay: internaldisablePastDay,
        isStartDay: internalIsStartDay,
        isEndDay: internalIsEndDay,
        isInRange: !!internalIsInRange,
        isPreviewing: !!internalIsPreviewing,
      };
    }, [startStr, endStr, day, hoveredDate, disablePast]);

    // --- Event Handlers ---
    const handleClick = useCallback(() => {
      if (disablePastDay) return;

      const formattedDay = format(day, 'yyyy-MM-dd');

      // If a start date exists, an end date doesn't, and the clicked day is after the start date
      if (startDate && !endDate && isAfter(day, startDate)) {
        onEnd(formattedDay);
      } else {
        // Otherwise, start a new selection.
        // This covers cases where:
        // 1. No dates are selected.
        // 2. Both dates are selected (resetting the range).
        // 3. The clicked date is before the current start date.
        onStart(formattedDay);
        onEnd(''); // Clear the end date
      }
    }, [disablePastDay, day, startDate, endDate, onStart, onEnd]);

    const handleMouseEnter = useCallback(() => {
      if (!disablePastDay && startDate && !endDate) {
        setHoveredDate(day);
      }
    }, [disablePastDay, startDate, endDate, day, setHoveredDate]);

    // --- Dynamic Class Names ---
    const dayClassName = cn(
      'relative z-0 flex w-full aspect-square items-center justify-center rounded-lg text-sm font-medium transition-colors duration-200 ease-in-out',
      {
        // Base states
        'cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-300':
          !disablePastDay,
        'text-gray-300 cursor-not-allowed': disablePastDay,

        // In-range and preview styling
        'bg-gray-100': (isInRange || isPreviewing) && !isStartDay && !isEndDay,
        'hover:bg-neutral-800 hover:text-white': isInRange || isPreviewing,

        // Start and End day styling (highest priority)
        'bg-neutral-800 text-white hover:bg-neutral-700':
          isStartDay || isEndDay,
      }
    );

    return (
      <button
        type="button"
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={() => setHoveredDate(null)} // Simplified mouse leave
        className={dayClassName}
        disabled={disablePastDay}
        tabIndex={disablePastDay ? -1 : 0}
      >
        {format(day, 'd')}
      </button>
    );
  }
);

Days.displayName = 'Days';

export default Days;

The Main Component: Putting It All Together

Finally, we use our DateRange component in our main page. The state for the startDate, endDate, and the disablePast prop is managed here.

'use client';
import DateRange from '@/components/DateRange';
import { useState } from 'react';

export default function Home() {
  const [startDate, setStartDate] = useState<string>('');
  const [endDate, setEndDate] = useState<string>('');
  const [disablePast, setDisablePast] = useState<boolean>(true);

  const handleReset = () => {
    setStartDate('');
    setEndDate('');
  };

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-8 text-center">Date Range Picker</h1>

      <div className="mb-8">
        <DateRange
          startDate={startDate}
          endDate={endDate}
          onStart={setStartDate}
          onEnd={setEndDate}
          disablePast={disablePast}
        />
      </div>

      {/* Control to toggle past dates */}
      <div className="flex items-center justify-center mb-8">
        <input
          type="checkbox"
          id="disable-past"
          checked={disablePast}
          onChange={(e) => setDisablePast(e.target.checked)}
          className="h-4 w-4 rounded border-gray-300 text-neutral-600 focus:ring-neutral-500"
        />
        <label
          htmlFor="disable-past"
          className="ml-2 block text-sm text-gray-900"
        >
          Disable Past Dates
        </label>
      </div>

      {/* Selected Range Display */}
      <div className="bg-gray-50 rounded-lg p-6">
        <div className="flex justify-between items-start mb-4">
          <h2 className="text-lg font-semibold">Selected Range</h2>
          {(startDate || endDate) && (
            <button
              onClick={handleReset}
              className="text-sm text-neutral-600 hover:text-neutral-800 underline"
            >
              Clear
            </button>
          )}
        </div>

        <div className="space-y-2 text-sm">
          <div>
            <span className="font-medium">Start:</span>{' '}
            <span className="text-neutral-700">
              {startDate || 'Not selected'}
            </span>
          </div>
          <div>
            <span className="font-medium">End:</span>{' '}
            <span className="text-neutral-700">
              {endDate || 'Not selected'}
            </span>
          </div>
          {startDate && endDate && (
            <div className="pt-2 border-t border-gray-200">
              <span className="font-medium">Duration:</span>{' '}
              <span className="text-neutral-700">
                {Math.ceil(
                  (new Date(endDate).getTime() -
                    new Date(startDate).getTime()) /
                    (1000 * 60 * 60 * 24)
                ) + 1}{' '}
                days
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

By managing the state in the parent component, DateRange picker becomes a controlled component, making it more reusable and predictable.

Result

Conclusion

Building a custom date range picker from scratch is a rewarding challenge. By breaking the problem down into smaller, manageable components, we can create a flexible and user-friendly solution. The use of date-fns simplifies date manipulation, while React's hooks (useState, useCallback, useMemo) help us manage state and optimize performance effectively.

Feel free to use this as a starting point for your own custom date pickers. You can extend it with features like presets, time selection, or multi-month views. Happy coding!

You can see the implementation in this GitHub: link
or live preview link

DEV Community: Mas'ud Ali

Automating Travel Planning with n8n and Real-time scrape using Bright Data

What I Built

Preview Workflow

Demo

n8n Workflow

Technical Implementation

Bright Data Verified Node

Journey

Process

What I Learned

Conclusion

Typing Challenge - realtime typing leaderboard, analytics, and active typers powered by Redis

What I Built

Demo

Video Demo

How I Used Redis 8

Primary database (data models)

Realtime & messaging

Realtime active typers

Performance & correctness

Why this demonstrates “Beyond the Cache”

Architecture diagrams

Team Submission

Conclusion

Nenet: A Scalable Intranet Portal for the Modern Workplace

What I Built

Layout & Content

Sidebar Layout

1. Application Name/Logo

2. User Profile Section

3. Main Menu

Header Layout

On the Left Side:

1. Mini sidebar & open sidebar for mobile Toggle Icon

2. Search Bar

On the Right Side:

1. Notifications

2. Launch pad

3. Dark mode toggle

4. Team Members:

Main Layout

1. Welcome Section

2. Weekly Progress

3. News & Announcement Carousel

4. Projects in Progress

5. Schedule

5. Quick Links

6. Spaces

7. Stats

8. Event

9. Your Performance

10. Top Performers

Overall Dashboard Summary

Responsiveness

Desktop Performance: Exceptional Quality

Mobile Performance: Strong and Responsive

Demo

Journey

Process

What I'm Proud Of

Team Submission

Building a Custom Date Range Picker in React

Defining Types with TypeScript

Creating a Class Name Utility (cn)

The DateRange Wrapper

The Calendar Component: Assembling the Grid

The PreviewMonth Component: Filler Days

The Days Component: Core Logic

The Main Component: Putting It All Together

Result

Conclusion

The `DateRange` Wrapper

The `Calendar` Component: Assembling the Grid

The `PreviewMonth` Component: Filler Days

The `Days` Component: Core Logic