From 848a35f80e9065b907a74bcea1d5f82ff2533e9d Mon Sep 17 00:00:00 2001
From: virgoaugustine <virgo.anankum@datopian.com>
Date: Sat, 15 Jan 2022 11:16:17 +0000
Subject: [PATCH] [site/learn/single-dataset][l]: Guide for building a single
 f10s dataset portal

---
 site/content/learn.md                         |  3 +-
 .../learn/single-frictionless-dataset.md      | 32 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 site/content/learn/single-frictionless-dataset.md

diff --git a/site/content/learn.md b/site/content/learn.md
index e927299d..f899d8d6 100644
--- a/site/content/learn.md
+++ b/site/content/learn.md
@@ -68,4 +68,5 @@ Let’s check to see if it’s working. Open http://localhost:3000 from your bro
 
 ## Next steps
 
-* Learn how to use Portal.js as a frontend for CKAN - [learn/ckan](/learn/ckan).
\ No newline at end of file
+* Learn how to use Portal.js as a frontend for CKAN - [learn/ckan](/learn/ckan).
+* Learn how to build a portal for a single frictionless dataset - [learn/single-frictionless-dataset](/learn/single-frictionless-dataset)
\ No newline at end of file
diff --git a/site/content/learn/single-frictionless-dataset.md b/site/content/learn/single-frictionless-dataset.md
new file mode 100644
index 00000000..dc623f95
--- /dev/null
+++ b/site/content/learn/single-frictionless-dataset.md
@@ -0,0 +1,32 @@
+Live Demo:
+- https://portal-js.vercel.app/
+
+## Create a single frictionless dataset portal
+
+The dataset should be a frictionless dataset i.e. it should have a [datapackage.json](https://specs.frictionlessdata.io/data-package/)
+
+
+Create a frictionless dataset portal app from the default template by executing the following command in your terminal:
+```
+$ npx create-next-app -e https://github.com/datopian/portal.js/tree/main/examples/dataset-frictionless
+```
+> Choose a name for your portal when prompted e.g. your-portal
+
+Next, connect the frictionless dataset to `your-portal` by declaring the path to the directory level that contains the `datapackage.json` via an environment variable by executing the following command in your terminal:
+```
+$ cd your-portal
+$ export PORTAL_DATASET_PATH=path/to/your/dataset
+```
+In `your-portal` directory, run the command below in your terminal to start the portal:
+```
+$ yarn dev
+```
+Open the page in your browser via the localhost url(usually http://localhost:3000) returned in the terminal to see your frictionless dataset portal.
+
+### Styling 🎨
+
+We use Tailwind as a CSS framework. Take a look at `/styles/tailwind.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file.
+
+Have a look at Next.js support of CSS and ways of writing CSS:
+
+https://nextjs.org/docs/basic-features/built-in-css-support