DEV Community: dhruv

Structuring a Lightweight React Kanban UI (Vanilla CSS & Vite)

dhruv — Thu, 24 Sep 2026 02:04:10 +0000

When building internal tools or dashboard prototypes, it can be tempting to immediately install heavy component libraries like Material-UI or Ant Design.

While these libraries are powerful, for many early-stage prototypes a lightweight setup using Vite, React, and Vanilla CSS can be simpler to customize and easier to maintain.

In this tutorial, we'll look at the frontend architecture of a light-themed CRM dashboard featuring a Kanban-style sales pipeline layout.

Technical Scope

Before looking at the code, it's important to define what this example actually includes.

What this is:

A static frontend UI prototype
A React application built with Vite
A responsive Kanban-style layout
Static mock CRM data
Vanilla CSS styling
Basic menu state using React useState

What this is NOT:

A production CRM
A backend application
A database-connected system
An API-integrated application
An authentication system
A drag-and-drop Kanban board

The goal here is simply to demonstrate how a clean CRM-style frontend can be structured using React and standard CSS.

The React Component

A dashboard like this can be split into two main areas:

A sidebar used for navigation
A main content area containing the sales pipeline

For this prototype, we use React's useState hook to visually track the active navigation item.

The pipeline itself uses static mock data.

import { useState } from 'react';
import './index.css';

function App() {
  const [activeMenu, setActiveMenu] = useState('pipeline');

  const leads = {
    new: [
      {
        id: 1,
        name: 'Acme Corp',
        value: '$5,000'
      }
    ],

    contacted: [
      {
        id: 3,
        name: 'Wayne Ent',
        value: '$8,200'
      }
    ],

    qualified: [
      {
        id: 5,
        name: 'Oscorp',
        value: '$25,000'
      }
    ],

    won: [
      {
        id: 6,
        name: 'Globex',
        value: '$14,000'
      }
    ]
  };

  return (
    <div className="crm-app">

      {/* Sidebar Navigation */}
      <aside className="sidebar-light">

        <div className="brand">
          <h1>LeadFlow CRM</h1>
        </div>

        <nav className="nav-menu">

          <button
            className={
              activeMenu === 'dashboard'
                ? 'active'
                : ''
            }
            onClick={() =>
              setActiveMenu('dashboard')
            }
          >
            Dashboard
          </button>

          <button
            className={
              activeMenu === 'pipeline'
                ? 'active'
                : ''
            }
            onClick={() =>
              setActiveMenu('pipeline')
            }
          >
            Sales Pipeline
          </button>

        </nav>

      </aside>

      {/* Main Content */}

      <main className="main-board">

        <header className="board-header">

          <h2>Sales Pipeline</h2>

          <button className="btn-primary">
            + New Deal
          </button>

        </header>

        {/* Kanban Board */}

        <div className="kanban-board">

          <div className="kanban-column">

            <h3>New Leads</h3>

            {leads.new.map((lead) => (

              <div
                className="kanban-card"
                key={lead.id}
              >

                <h4>{lead.name}</h4>

                <span className="value">
                  {lead.value}
                </span>

              </div>

            ))}

          </div>

          {/* Additional columns can be rendered here */}

        </div>

      </main>

    </div>
  );
}

export default App;

The CSS Layout

The main layout can be handled entirely with CSS Flexbox.

The root container is displayed as a flex layout so the sidebar and the main dashboard sit next to each other.

.crm-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #f8fafc;
  color: #0f172a;
}

Sidebar

The sidebar uses a fixed width and does not shrink when the main dashboard grows.

.sidebar-light {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;

  display: flex;
  flex-direction: column;

  flex-shrink: 0;
}

This keeps the navigation visually stable while the main dashboard content remains flexible.

Main Dashboard Area

The main content area takes up the remaining screen space.

.main-board {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  overflow-x: auto;
}

Horizontal Kanban Layout

The Kanban board is also a flex container.

Each column has a fixed minimum width so the board can scroll horizontally if more columns are added.

.kanban-board {
  display: flex;

  padding: 32px;

  gap: 24px;

  overflow-x: auto;

  flex-grow: 1;

  align-items: flex-start;
}

Individual Kanban Columns

Each pipeline stage is represented by a simple column.

.kanban-column {
  min-width: 280px;
  width: 280px;

  background-color: #f1f5f9;

  border-radius: 12px;

  padding: 16px;

  display: flex;
  flex-direction: column;

  gap: 16px;
}

Cards inside each column can then display information such as:

Company name
Deal value
Status
Contact information
Sales stage

For this prototype, the data is intentionally static.

Responsive Behavior

A simple media query can adapt the layout for smaller screens.

For example:

@media (max-width: 768px) {

  .crm-app {
    flex-direction: column;
  }

  .sidebar-light {
    width: 100%;
  }

  .kanban-board {
    padding: 16px;
    overflow-x: auto;
  }
}

This can move the sidebar above the dashboard and keep the Kanban board horizontally scrollable on smaller screens.

Why This Approach Can Be Useful

1. Simple Setup

No additional UI component library is required for this prototype, which keeps the setup simple and gives you direct control over the styling.

2. Fast Development Workflow

Vite provides a fast development experience with quick startup and hot module replacement for typical frontend projects.

3. Full Styling Control

Using Vanilla CSS means you control:

spacing
typography
colors
borders
shadows
responsive behavior

without overriding a component library's existing design system.

4. Clear Component Structure

React makes it easy to break a dashboard into reusable pieces such as:

Sidebar
Header
Kanban Column
Deal Card
Metric Card
Table
Form

As the prototype grows, these can be separated into individual components.

Important Limitations

This example is intentionally limited to frontend UI structure.

It does not include:

API requests
Authentication
Database storage
Drag-and-drop behavior
Real CRM data
Backend business logic

Those features would require additional development beyond the scope of this lightweight frontend prototype.

Final Result

Using only:

React
Vite
Vanilla CSS
Static mock data

you can build a clean and responsive CRM-style dashboard prototype without immediately introducing large UI libraries or backend infrastructure.

This type of setup can be useful when validating an interface, building an internal-tool prototype, or turning an existing wireframe into a functional frontend.

If you need help building a small responsive React dashboard or frontend prototype, you can view my Upwork service here:

upwork.com

Extracting Static Public Data with Python (Zero Dependencies)

dhruv — Thu, 24 Sep 2026 01:13:37 +0000

If you need to extract basic structured data from a static, publicly accessible website, it can be tempting to immediately reach for frameworks like Selenium, Scrapy, or Playwright.

However, for simple static pages, Python's standard library can often handle the job without installing any external dependencies.

In this tutorial, we'll build a lightweight data extraction script using only urllib, re, html, csv, and logging.

Technical Scope

Before we start, it's important to understand what this approach can and cannot do.

What it does:

Fetches static HTML
Extracts specific data patterns
Cleans HTML entities
Exports structured data to CSV
Includes basic logging and error handling

What it does not do:

Render JavaScript
Handle infinite scrolling
Bypass CAPTCHAs
Bypass anti-bot protections
Access login-protected/private pages
Crawl multiple pages automatically

Only automate access where you have permission to do so. A webpage being publicly visible does not necessarily mean every form of automated extraction is permitted.

The Code

For this example, we'll extract quotes and author names from the public scraping sandbox quotes.toscrape.com.

We'll separate fetching, parsing, and exporting into a small class so the code stays easy to understand.

import csv
import logging
import urllib.request
import urllib.error
import re
import html
from datetime import datetime


logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s - %(levelname)s - %(message)s"
)


class PublicDataScraper:
    def __init__(self, target_url: str):
        self.target_url = target_url
        self.extracted_data = []

    def fetch_page_html(self) -> str:
        """Fetch HTML content from the target URL."""
        try:
            request = urllib.request.Request(
                self.target_url,
                headers={"User-Agent": "Mozilla/5.0"}
            )

            with urllib.request.urlopen(request, timeout=10) as response:
                return response.read().decode("utf-8")

        except urllib.error.URLError as error:
            logging.error(f"Failed to fetch URL: {error.reason}")
            raise

    def parse_html(self, page_html: str) -> list:
        """Extract quotes and authors from the static HTML."""

        results = []

        pattern = (
            r'<span class="text".*?>(.*?)</span>'
            r'.*?<small class="author".*?>(.*?)</small>'
        )

        matches = re.findall(pattern, page_html, re.DOTALL)

        for quote, author in matches:
            clean_quote = html.unescape(quote).strip()

            results.append({
                "quote_text": clean_quote,
                "author_name": author.strip()
            })

        return results

    def extract(self):
        """Run the extraction process."""

        try:
            logging.info("Fetching HTML...")

            page_html = self.fetch_page_html()

            logging.info("Parsing data...")

            self.extracted_data = self.parse_html(page_html)

            logging.info(
                f"Successfully extracted "
                f"{len(self.extracted_data)} records."
            )

        except Exception as error:
            logging.error(f"Extraction failed: {error}")

    def export_to_csv(self, filename: str):
        """Export extracted records to CSV."""

        if not self.extracted_data:
            logging.warning("No extracted data to export.")
            return

        fieldnames = self.extracted_data[0].keys()

        try:
            with open(
                filename,
                "w",
                newline="",
                encoding="utf-8"
            ) as output_file:

                writer = csv.DictWriter(
                    output_file,
                    fieldnames=fieldnames
                )

                writer.writeheader()
                writer.writerows(self.extracted_data)

            logging.info(
                f"Data successfully exported to {filename}"
            )

        except IOError as error:
            logging.error(
                f"Failed to write CSV: {error}"
            )


if __name__ == "__main__":

    scraper = PublicDataScraper(
        target_url="https://quotes.toscrape.com/"
    )

    scraper.extract()

    timestamp = datetime.now().strftime("%Y%m%d_%H%M")

    scraper.export_to_csv(
        f"extracted_data_{timestamp}.csv"
    )

What the Script Does

When the script runs, it follows a simple pipeline:

1. Fetch the HTML

urllib.request sends an HTTP request and downloads the raw HTML returned by the server.

2. Extract the data

A regular expression searches the HTML for the quote and author elements used by the demo website.

3. Clean the text

html.unescape() converts HTML entities into normal readable characters.

4. Store structured records

Each extracted quote is stored together with its author.

5. Export everything to CSV

Python's built-in csv module writes the final data into a structured file that can be opened in spreadsheet software or processed by another program.

Why This Approach Can Be Useful

1. No external dependencies

Everything used here ships with Python.

There is no need to run:

pip install ...

That makes small scripts easier to move between environments.

2. Basic error visibility

The built-in logging module gives us useful information when a request fails or when the script completes successfully.

3. Clear separation of responsibilities

Fetching, parsing, and exporting are handled separately.

If the HTML structure changes, the parsing logic can be updated without rewriting the CSV export workflow.

Important Limitation: Parsing HTML With Regex

Regular expressions are intentionally used here because this is a small, predictable demonstration.

They are not a universal HTML parser.

Real websites may contain:

deeply nested markup
frequently changing HTML
dynamically generated content
malformed HTML
multiple layouts

For larger or more complex projects, a dedicated HTML parser such as BeautifulSoup is generally easier to maintain.

If a page is rendered primarily through JavaScript, browser-automation tools such as Playwright or Selenium may be more appropriate.

Those capabilities are outside the scope of this zero-dependency example.

Final Result

With only Python's standard library, we now have a small extraction pipeline that can:

request a static HTML page
extract targeted information
clean the data
log execution status
export structured records to CSV

For simple and authorized static-data tasks, this can be a useful starting point before introducing larger scraping frameworks.

If you need help with a small, authorized static-data extraction task, you can view my Upwork service

https://www.upwork.com/freelancers/~013b992149b9e111c4?p=2102919213606854656