A modern, responsive frontend application for browsing and visualizing open data from DKAN data catalogs. Built with Next.js 16, React 19, TypeScript, and Recharts.

• Dataset Discovery: Search and browse datasets with advanced filtering and faceted search
• Interactive Data Preview: View dataset records in a sortable, filterable table with pagination
• Data Visualization: Create customizable line and bar charts with multi-series support
• Filtering & Export: Apply filters to data and download filtered results as CSV
• Responsive Design: Optimized for both desktop and mobile devices
• Type-Safe: Full TypeScript implementation with type-safe API integration

• Frontend Framework: Next.js 16 with App Router
• UI Library: React 19
• Language: TypeScript
• Styling: Tailwind CSS 4.0 + Shadcn/ui components
• Data Fetching: TanStack Query (React Query) for efficient caching
• Data Visualization: Recharts for interactive charts
• Backend: DKAN REST API (Drupal 10)

• Node.js 20.9.0 or higher
• npm, yarn, pnpm, or bun
• A running DKAN instance (see DKAN setup below)

git clone https://github.com/dcgoodwin2112/dkanFE.git

npm install
# or
yarn install
# or
pnpm install

If you don't have a DKAN instance running, you can set one up locally using DDEV:

Follow the DDEV installation guide for your operating system.

# Create a new directory for your DKAN site
mkdir dkan-site
cd dkan-site

# Initialize DDEV with Drupal 10 and PHP 8.3
ddev config --project-type=drupal10 --php-version=8.3 --docroot=docroot

# Start DDEV
ddev start

# Install DKAN using Composer
ddev composer create getdkan/recommended-project

# Install Drupal and DKAN
ddev drush site:install minimal --site-name="DKAN Data Catalog" -y
ddev composer require getdkan/dkan
ddev drush en dkan -y

# Import sample data (optional)
ddev drush dkan:sample-content:create

# Get your DKAN site URL
ddev describe

Your DKAN site will typically be available at https://dkan-site.ddev.site or similar.

Create a .env.local file in the frontend directory:

cp .env.example .env.local

Edit .env.local and set your DKAN API URL:

NEXT_PUBLIC_DKAN_API_URL=https://your-dkan-site.ddev.site

Example for DDEV:

NEXT_PUBLIC_DKAN_API_URL=https://dkan-site.ddev.site

Important: Make sure to use https:// (not http://) for DDEV sites, as DDEV uses HTTPS by default.

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser to see the application.

frontend/
├── app/                      # Next.js App Router pages
│   ├── about/               # About page
│   ├── datasets/            # Dataset pages
│   │   └── [id]/           # Individual dataset
│   │       ├── preview/    # Data table preview
│   │       └── visualize/  # Data visualization
│   ├── search/             # Search page
│   └── page.tsx            # Home page
├── components/             # React components
│   └── ui/                # Shadcn/ui components
├── lib/                   # Utilities and libraries
│   └── dkan/             # DKAN API integration
│       ├── api.ts        # API client
│       ├── hooks.ts      # React Query hooks
│       └── types.ts      # TypeScript types
└── public/               # Static assets

• npm run dev - Start development server on http://localhost:3000
• npm run build - Build production application
• npm run start - Start production server
• npm run lint - Run ESLint for code quality checks

• Browse datasets by topic on the home page
• Use the search page for advanced filtering
• Filter by keywords, tags, publishers, and more

• View dataset records in an interactive table
• Sort columns by clicking headers
• Apply filters with various operators (=, !=, >, <, LIKE, IN)
• Navigate through pages of data
• Download filtered data as CSV

• Choose between line and bar charts
• Select X-axis column for categories
• Add multiple Y-axis series for comparison
• Customize series labels and colors
• Interactive tooltips and legends
• Charts support up to 8 different series

The application connects to DKAN's REST API endpoints:

• /api/1/metastore/schemas/dataset/items - Dataset listings
• /api/1/metastore/schemas/dataset/items/{id} - Dataset details
• /api/1/datastore/query/{id} - Datastore queries for data preview/visualization

• NEXT_PUBLIC_DKAN_API_URL - Base URL for your DKAN instance (required)

If you encounter CORS errors, ensure your DKAN site is configured to allow requests from http://localhost:3000:

# Add to your DKAN's sites/default/settings.php or sites/default/settings.local.php
$config['cors.config']['enabled'] = TRUE;
$config['cors.config']['allowedOrigins'] = ['http://localhost:3000'];
$config['cors.config']['allowedMethods'] = ['GET', 'POST', 'OPTIONS'];

If you see SSL/certificate warnings, you may need to install DDEV's CA certificate:

ddev get --help

1. Verify your DKAN site is running: ddev describe
2. Check that the API URL in .env.local matches your DKAN site URL
3. Ensure the DKAN REST API is enabled: ddev drush pm:list | grep dkan

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open source and available under the MIT License.

• DKAN Documentation
• Next.js Documentation
• Recharts Documentation
• TanStack Query Documentation
• DDEV Documentation