diff --git a/README.md b/README.md index e7c9784c..7f1fa972 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ +

+ PORTAL.js + The javascript framework for
+ data portals +

+ πŸŒ€ `Portal` is a framework for rapidly building rich data portal frontends using a modern frontend approach (javascript, React, SSR). `Portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN][]. `portal` is built in Javascript and React on top of the popular [Next.js][] framework. @@ -7,6 +13,23 @@ Live DEMO: https://portal.datopian1.now.sh +## Features + +* πŸ—ΊοΈ Unified sites: present data and content in one seamless site, pulling datasets from a DMS (e.g. CKAN) and content from a CMS (e.g. wordpress) with a common internal API. +* πŸ‘©β€πŸ’» Developer friendly: built with familiar frontend tech Javascript, React etc +* πŸ”‹ Batteries included: Full set of portal components out of the box e.g. catalog search, dataset showcase, blog etc. +* 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly. +* 🧱E Extensible: quickly extend and develop/import your own React components +* πŸ“ Well documented: full set of documentation plus the documentation of NextJS and Apollo. + +### For developers + +* πŸ— Build with modern, familiar frontend tech such as Javascript and React. +* πŸš€ NextJS framework: so everything in NextJS for free React, SSR, static site generation, huge number of examples and integrations etc. + * SSR => unlimited number of pages, SEO etc whilst still using React. + * Static Site Generation (SSG) (good for small sites) => ultra-simple deployment, great performance and lighthouse scores etc +* πŸ“‹ Typescript support + ## Getting Started ### Setup @@ -27,7 +50,7 @@ npm init portal-app my-data-portal ## Guide -### Styling :art: +### Styling 🎨 We use Tailwind as a CSS framework. Take a look at `/styles/index.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file. @@ -194,7 +217,7 @@ Boot the demo portal: $ yarn dev # or npm run dev ``` -Open [http://localhost:3000](http://localhost:3000) to see the home page :tada: +Open [http://localhost:3000](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. @@ -208,3 +231,13 @@ yarn test # or npm run test # turn on watching yarn test --watch ``` + +### Architecture + +* Language: Javascript +* Framework: NextJS - https://nextjs.org/ +* Data layer API: GraphQL using Apollo. So controllers access data using GraphQL β€œgatsby like” + +### Key Pages + +See https://tech.datopian.com/frontend/