OPub
A platform to speed up the development of open data dashboards.
Features
♿ Accessible: The platform is screen-reader friendly and keyboard accessible.👩💻 Developer friendly: built with NextJS, CSS-in-JS, and REST API to make the developer experience a treat.🚀 Styled-components: CSS-in-JS to get styling on steroids with fantastic developer experience.📋 Typescript: Developed using typescript to improve development experience by catching errors and providing fixes.🧱 Extensible: quickly extend and develop/import your own React components📝 Well documented: complete set of documentation plus the documentation of NextJS and CKAN
Getting Started
- Install a recent version of Node.
- After cloning the repo, create an
.env.local
file in the root of directory. - If using VSCode, install the recommened extensions.
Guide
Styling
This project uses styled-components to handle all of the stylings. It provides lots of features to improve the developer experience.
Pages and most component styles are available in the same file, although some components have a separate file, e.g.: ButtonComp.ts.
To make the styling scalable, we use a theme.ts
file in the /config
directory. It contains all the colors and gradients from the Design System.
Backend
The project requires a CKAN URL to fetch datasets. You can save them in the .env.local
file in the following format. Read more about env.
We can also pass a Google Analytics Id in the same file
We also need a KEYCLOAK_URL in the env file for authentication to work
CKAN_URL = 'CKAN_URL/api/3/action';
NEXT_PUBLIC_GOOGLE_ANALYTICS = '';
KEYCLOAK_URL='http://localhost:8080'
Pages
- Home
/
- Datasets
/datasets
- Datasets Explorer
/datasets/[explorer]
- Organisations
/orgs
- Org Datasets
/orgs/[datasets]
- Org Explorer
/orgs/[datasets]/[explorer]
- About
/about
- Wiki Listing
/wiki
- Wikipage
/wiki/[wikiPage]
Directory Structure
The component directory contains all the components required to build the platform. The components are categorized depending on their purpose. You can read more about components.
Each directory contains an index.ts
file to manage Default Exports.
Data fetching
The project uses REST APIs provided by CKAN to access, filter, sort, and search datasets.
We can find data fetching functions at /utils/fetch.ts.
Read more in utils
Pre-fetch data in the server-side
When visiting a page, you may want to fetch the data on the server side. To do so, you can use getServerSideProps
function from NextJS:
import { GetServerSideProps } from 'next';
import { stateSchemeFetch } from 'utils/fetch';
...
export const getServerSideProps: GetServerSideProps = async (context) => {
export const getServerSideProps: GetServerSideProps = async () => {
const stateData = await stateSchemeFetch();
return {
props: {
stateData,
},
};
};
};
ESLint
The project uses the ESLint config provided by Next.js, eslint-config-next. We can modify the rules on a project basis in the .eslintrc.js
file.
Developers
Boot the local instance
Install the dependencies:
npm i
Boot the demo frontend:
npm run dev
Open http://localhost:3000 to see the home page
You can start editing the page by modifying /pages/index.tsx
. The page auto-updates as you edit the file.
Architecture
- Language: Javascript
- Framework: Next.js
- Styling: styled-components
Contributing
For any new feature or bug reports, please request them in issues.
See CONTRIBUTING.md for ways to get started.
Please adhere to Code of Conduct.