https://github.com/datopian/portal-lcc
https://github.com/datopian/portal-lcc
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/datopian/portal-lcc
- Owner: datopian
- Created: 2025-10-03T07:07:12.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-11-28T18:52:49.000Z (4 months ago)
- Last Synced: 2025-11-30T23:13:21.887Z (4 months ago)
- Language: TypeScript
- Homepage: https://portal-lcc.vercel.app
- Size: 4.48 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PortalJS Frontend Starter
[](https://vercel.com/import/project?template=https://github.com/datopian/portaljs-frontend-starter)
[](https://opensource.org/licenses/MIT) [](https://nextjs.org/) [](https://github.com/datopian/portaljs/stargazers)
**A modern, customizable frontend template for building high-performance CKAN-based data portals**
Powered by **[Next.js](https://nextjs.org)**, **[React](https://react.dev/)**, and **[Tailwind CSS](https://tailwindcss.com/)**
**[🚀 Live Demo](https://portaljs-cloud-frontend-template.vercel.app/) • [📖 Documentation](https://portaljs.com/docs) • [☁️ PortalJS Cloud](https://cloud.portaljs.com/) • [🌐 Website](https://portaljs.com/)**
---
## Overview
This is the official frontend template used by [PortalJS Cloud](https://cloud.portaljs.com) — a fully managed data portal service built on top of CKAN and Next.js.
Use it to:
- Build decoupled CKAN frontends with modern tools (Next.js, React, TailwindCSS)
- Customize dataset views, branding, and layouts
- Deploy on Vercel, Netlify, Cloudflare Pages or your own infra
## ✨ Features
- **Modern UI** - Clean, responsive design with Tailwind CSS
- **High Performance** - Built on Next.js 13+ with SSR/SSG
- **CKAN Integration** - Seamless data fetching via @portaljs/ckan
- **TypeScript** - Full type safety and better DX
- **Easy Customizatio**n - Simple theme system and component styling
- **Mobile-First** - Responsive design for all devices
- **Deploy Ready** - One-click deployment to Vercel
## Getting started
### Option 1: PortalJS Cloud
PortalJS Cloud uses this template for creating new portals. If you want to quickly get started for free, follow the steps:
1. **Sign up** at
2. **Create portal** → PortalJS Cloud will auto-generate a GitHub repository for your portal (based on this template) and deploy it automatically
3. Find the repo link in your PortalJS Cloud dashboard
4. **Customize** your portal via pull requests — or let us take care of it by reaching out at portaljs@datopian.com
### Option 2: Self-Hosted / Standalone
> [!note]
> In standalone mode, you are going to need your own dedicated CKAN instance.
In order to use this repository in standalone mode (i.e. without PortalJS Cloud), click on the "Use this template" button on the top right corner to replicate this code to a new repo.
Then, you can start customizing it locally by following the development instructions bellow, and/or deploy it somewhere such as on Vercel.
### Development
1) Clone this repository
2) Install the dependencies with `npm i`
3) Create a new `.env` file with:
```bash
# This is the URL of the CKAN instance. Use the example value if you are using PortalJS Cloud.
NEXT_PUBLIC_DMS=https://api.cloud.portaljs.com
# Leave it empty if you are not using PortalJS Cloud. This is the name of the main organization for your portal in PortalJS Cloud.
# You can find the this value in the Organizations page in the PortalJS Cloud dashboard.
NEXT_PUBLIC_ORG=my-org
```
4) Run `npm run dev` to start the development server
5) Access `http://localhost:3000` in your browser
## Customization
This template was developed with Next.js/React and TailwindCSS.
In order to learn more about how it can be customized, check the following documentations:
- https://react.dev/
- https://nextjs.org/docs
- https://v3.tailwindcss.com/docs/installation
### Quick Customizations
#### Logo Customization
```tsx
// components/_shared/PortalDefaultLogo.tsx
export default function PortalDefaultLogo() {
return (
);
}
```
#### Footer Links
```tsx
// components/_shared/Footer.tsx - Update navigation object
const navigation = {
about: [
{ name: "About Us", href: "/about" },
{ name: "Contact", href: "/contact" },
],
useful: [
{ name: "Datasets", href: "/search" },
{ name: "Organizations", href: "/organizations" },
],
social: [
{ name: "twitter", href: "https://twitter.com/yourhandle" },
{ name: "email", href: "mailto:contact@yoursite.com" },
],
};
```
#### Homepage Content
```tsx
// pages/index.tsx - Update title and description
Your Portal Name
```
##### Dataset Search
```tsx
// lib/queries/dataset.ts - Add custom facet fields
const facetFields = [
"groups",
"organization",
"res_format",
"tags", // Enable tags
"license_id", // Add license filtering
]
```
#### Theme Components
```tsx
// themes/default/index.tsx - Replace with custom components
const DefaultTheme = {
header: CustomHeader,
footer: CustomFooter,
layout: DefaultThemeLayout,
};
```
---
## Tech Stack
- **Framework:** [Next.js 13+](https://nextjs.org/) with TypeScript
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **Data:** [CKAN API](https://docs.ckan.org/en/2.10/api/) via [@portaljs/ckan](https://www.npmjs.com/package/@portaljs/ckan)
- **Deployment:** [Vercel](https://vercel.com/)
## Deployment
### Vercel (Recommended)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs-frontend-starter&env=NEXT_PUBLIC_DMS&envDescription=DMS%20endpoint%2C%20e.g.%2C%20a%20CKAN%20instance%20URL.%20For%20testing%20purposes%2C%20you%20can%20use%20https%3A%2F%2Fapi.cloud.portaljs.com%2F&project-name=my-portaljs-app&repository-name=my-portaljs-app)
1. Push your repo to GitHub
2. Connect it on [vercel.com](https://vercel.com/)
3. Add environment variables
4. Deploy! 🎉
#### Other Platforms
This template works on:
- **Netlify** - Connect your GitHub repo
- **Cloudflare Pages** - Import from Git
- **Your server** - `npm run build && npm start`
## Contributing
We welcome contributions! Here's how to get started:
1. **Fork** this repository
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
4. **Push** to the branch (`git push origin feature/amazing-feature`)
5. **Open** a Pull Request
## 📄 License
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
## Need help or advanced features?
This template covers basic portal functionality. For complex customizations, integrations, or enterprise features, [contact our team](mailto:portaljs@datopian.com) for professional services.
- **Custom Design** - Tailored branding and UI/UX
- **Advanced Features** - Custom integrations and functionality
- **Enterprise Support** - Dedicated support and SLA
- **Migration** - Help moving from existing portals
---
**Built with ❤️ by [Datopian](https://datopian.com/)**
Let’s build better data portals together 🚀
**⭐️ [Star PortalJS](https://github.com/datopian/portaljs) • [🐦 Follow us](https://www.linkedin.com/company/10340373) • [💬 Contact](mailto:portaljs@datopian.com)**
**[📚 Docs](https://portaljs.com/docs) • [ 🐛 Report a bug or suggest an idea](https://github.com/datopian/portaljs/issues)**