Help wanted testing new tutorial (April 2023)

[rufuspollock]

Hi, we want help testing our new work-in-progress 🚧 tutorial:

https://portaljs.org/docs/

• 📝 What is needed: Try out the tutorial Pretend you are a user and follow the tutorial and report any issues.
• ⏲️ How long will it take? 15m

Steps

• Open the page: https://portaljs.org/docs/
• Try it out
• Report issues and anything that seem unclear here
  • Please report OS and browser 😄

[sneha-sharma12]

I can test the tutorial as a user and will report if I found any issues.

[mpolidori]

I will also try it out later today (in a few hours) and flag any issues.

[Mikanebu]

@demenech

• After running main command npx create-next-app my-data-portal --example https://github.com/datopian/portaljs/tree/main/examples/learn-example, it was stuck for 5-10min then started showing some package installation process. Attaching printscreen. It would be better to add progress bar maybe, so instead of reading this messageThis might take a moment., we can see the progress.

• prerequisites shows Node.js 14.18.0 or newer, but warning from the terminal shows this

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=16.8.0' },
npm WARN EBADENGINE   current: { node: 'v16.6.1', npm: '7.20.3' }
npm WARN EBADENGINE }`. How long it takes to finish this command? It would be good to have a progress bar

• Is this browser configuration, I am not sure, but page is in dark mode, not visible, attaching printscreen from google chrome.

The rest went fine. Tested on MacOS Big Sur

[steveoni]

My system defaults to Node v18.0

I had this error when I run npm run dev

error - ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module '@tailwindcss/typography'
Require stack:
- /Users/steveoni/Documents/Datopian/my-data-portal/tailwind.config.js
- /Users/steveoni/Documents/Datopian/node_modules/tailwindcss/lib/index.js

and when I run npm i I have this

npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.6.3 || ^17.0.0" from [email protected]
npm WARN node_modules/kbar/node_modules/react-virtual
npm WARN   react-virtual@"^2.8.2" from [email protected]
npm WARN   node_modules/kbar
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.6.3 || ^17.0.0" from [email protected]
npm WARN   node_modules/kbar/node_modules/react-virtual
npm WARN     react-virtual@"^2.8.2" from [email protected]
npm WARN     node_modules/kbar

But everything works when I switch to node v16.10.0

[MuhammadIsmailShahzad]

It would be better to add progress bar maybe, so instead of reading this messageThis might take a moment., we can see the progress.

Yep I experienced that as well. Didn't know if it was stuck or still downloading as it took 5-10 minutes as you mentioned

[mpolidori]

I did notice a small (possible) inconsistency with the "Editing the Page" section.

As soon as you save the file, the browser automatically updates the page with the new text

When I save a file, it doesn't update automatically in my browser without a refresh. That aside, everything is clear and works as expected.

I tested on Arch Linux 6.2.13, Node v16.20.0, and Chrome Version 112.0.5615.165.

[steveoni]

same here on Macos node v16.10

[sneha-sharma12]

• The Navbar titles of the selected tabs are not highlighted on selection.
  eg: Docs, Blog
• Click on Blog -> Read article -> Built by Logo is not appearing
  
• Pagination count is incorrect in case if the value is not available
  eg: 2018 is not there in the table data
  
• Text color is not coming correct in dark mode

• Link of localhost:3000 should be open in a new tab
• The logo in the footer is not visible because the background and logo both are black if you refresh the page but when you go to Blogs and come back to Docs the logo is visible because the image URL is the lighter version in this case
  
  

[MuhammadIsmailShahzad]

Able to install and run the dev server without any issues at http://localhost:3000. Everything worked fine (search, editing the page, creating index page, etc.)
Found the pagination issue that @sneha-sharma12 has already mentioned in the above comment (Great Analysis btw @sneha-sharma12 👍 )
Found one minor typo in the Tip section of Create a PortalJS app. It states That’s mean you can do everything you do with NextJS with PortalJS. Check out their docs to learn more. instead of That means.

Tested on

• Ubuntu 22.04.2 LTS
• Mozila Firefox: 112.0.1 (64 bit)
• Node version: v18.16.0

[geoffrey1330]

I was able to install, and ran npm run dev successfully without any issue. The steps in the doc worked fine for me. I also noticed the pagination issue mentioned by @sneha-sharma12.

Tested on

• MacOS M1 pro
• npm version: v8.15.0
• Node Version: v16.17.0
• Chrome version: 108.0.5359.124 (Official Build) (arm64)

[Guimrl]

I did the test and followed the documentation strictly, everything went well, after running the command npx create-next-app my-data-portal --example https://github.com/datopian/portaljs/tree/main/ examples/learn-example took 15 minutes to download the whole project, I missed the "copy" option in the documentation, see my deploy at: https://my-data-portal-pi.vercel.app.

Tested on:
Windows 10 Intel(R) Core(TM) i3 CPU M 350 @ 2.27GHz 2.27GHz 4GB RAM
npm version: v8.15.0
Node Version: v18.13.0
Firefox version: 112.0.2 (64-bit)

[rufuspollock]

@Guimrl thanks for the feedback - super useful. We're consolidating this into an issue #839

[jaypee-0]

I was able to run the procedures in the test successfully without any issues. I then hosted the code here: https://portal-js.vercel.app/

Tested on:
Windows 11 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz 1.80 GHz 8GB RAM
Microsoft Edge: Version 112.0.1722.64 (Official build) (64-bit)
Npm Version v8.15.0
Node version v16.17.1

[rufuspollock]

@jaypee-0 thanks - super useful.

[thomascouto]

I was able to run the command without any problem. (npx create-next-app / npm run dev)

After installation no vulnerabilities were found in the packages.

• OS: Microsoft Windows [Version 10.0.19045.2846]
• Browser 1: Chrome 112.0.5615.138 (64-bit) (cohort: Stable)
• Browser 2: Edge 112.0.1722.68 (64-bit)

[rufuspollock]

@thomascouto really appreciate you trying it out. Really helpful.

[umarch06]

When I add these lines into the content/my-awesome-dataset/index.md file as per instructions on this page showing-meta-data

---
title: 'My awesome dataset'
author: 'Rufus Pollock'
description: 'An awesome dataset displaying some awesome data'
modified: '2023-05-04'
files: ['data.csv']
groups: ['Awesome']
---

Built with PortalJS

## Table

<Table url="data.csv" />

I get an error on hitting http://localhost:3000/my-awesome-dataset
Error message

Upon investigation, I found that this error is caused by modified: '2023-05-04' line in the code.
I have tried to add multiple date forms but doesn't help. The error goes away once I remove the line modified: '2023-05-04'.

OS: macOS Monterey v12.5
Browser 1: Chrome
Browser 2: Safari

[rufuspollock]

@demenech i thought we had fixed this ...?

[demenech]

Hi @rufuspollock

It's on our prioritized backlog.

Thank you for flagging @umarch06 !

[niketanbi]

OS: Windows 11 Home Single Language. 64-bit operating system. 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz
Browser 1: Chrome Version 114.0.5735.110 (Official Build) (64-bit)
Browser 2: MS Edge Version 114.0.5735.110 (Official Build) (64-bit)
Node: v16.17.0

Found the issue that, some column name are getting unexpected padding from above.
Also a column is getting blank. (Have values like [1] [2] [3] and so on.)

Deployed vercel link:

https://world-data-portal.vercel.app/

[demenech]

hey @niketanbi
Thank you very much for this input!!

[gacalistro]

It took several minutes the first time, but that's okay.
It all works great, but just one thing I noticed was groups: ["Awesome"] doesn't do anything. "Awesome" does not appear in the group filter with this line.
I ran npm run mddb again and reloaded the page, but it doesn't show up in the list.

[demenech]

hey @gahcalistro
Thank you for flagging, we'll take a look.

[Samson-Ludo]

I encountered this issue. For me, it was a typo fix:

I was using <Catalog datasets={datasets} facets={['group']} /> ❌ in the content/index.md

Instead of <Catalog datasets={datasets} facets={['groups']} />. ✔️

I also ran npm run mddb to be double sure. It's good practice to run that command every time you make some change to /content.

That was the fix for me; I hope it works for you. 👍

[demenech]

@Samson-Ludo thank you! I'll incorporate this solution into the code.

[developmentbyleo]

I don't have any bug to report, but i've noticed that this print is missing the "my-incredible-dataset" list item.

[demenech]

Thank you for testing and for reporting this!

[developmentbyleo]

You're welcome!

[taras-doloshytskyi]

I was able to install, and when ran npm run dev I should additionally install next-theme because there was an error. Also "Awesome" does not appear in the group filter. The steps in the doc worked fine for me.

Tested on

MacOS Monterey Version 12.0.1
Node Version: v18.16.0
Browser: Chrome

[demenech]

Thank you for reporting this @taras-doloshytskyi !
We have an open issue to address it.

[Nitinyadav237]

• Successfully deployed The app by following the steps in the documentation
• My deployed site link

[demenech]

Awesome! We appreciate that!

[iammfatihnaziroglu]

Successfully deployed by following the steps

That's the link: https://datopian-open-source.vercel.app/

Also the data graph shown in my-incredible-dataset is shown until 2020, but there is no 2013 and later in my-awesome-dataset, you already know this, I just wanted to tell you.

[iammfatihnaziroglu]

I would also like to mention a few ideas and mistake.

In the screenshot you see right now, the mouse cursor is hovering over Create new datasets in bright mode, but it is barely noticeable that we are interacting over it.

Also, the colour of the Getting Started section is #F8FAFC and the background colour of the rest is #F5F5F5. The colour difference here is glaring and, which is why it looks so different it looks as if to the user as if the code here has not been fixed, it could be better used with javascript plugins or it would be better for the site if the colour here was #F5F5F5 like the others.

Also in light mode the height of #F5F5F5 in the navbar section is higher at the top, but as you scroll down the page the height decreases.

https://portaljs.org/docs

I looked at how the site looks on mobile devices.

I don't think there are any phones of this size, but I wanted to report it anyway. As you can see, as the screen shrinks, the things on the right side of the navbar intertwine with the things on the left, or even disappear.

You'll also notice that there is an unnatural gap on the right side of the site as the size decreases.

[demenech]

Thank you for this feedback!

We'll take a look

[MustafaAswadi]

• Successfully deployed the app and very enjoyed with PortalJs framework.
• My deployed site link
• My GitHub repo Github

[eneskar]

I successfully installed and ran the development server without encountering any problems, and the application worked flawlessly. I was able to perform tasks such as searching, editing pages, creating an index page, and more, all on http://localhost:3000/

Deployed site link
Github repo link

[amoslieberman]

Page 4 (Searching DataSets)

Prior to text: You now have a filter in your page with all possible values automatically added to it.
You should instruct users to 'run mddb'

[demenech]

Addressed. Thank you!

[amoslieberman]

PortalJs is such an interesting project! I discovered that you are looking for Front-end Engineers and think I'd be a great fit.

Deployed Site Link
Repo Link

[haqcked]

Hi! I've tested your tutorial and it was easy to follow.

Repo
Link

I reckon the instructions are clear enough. However, there are several tiny bits which I think could be improved:

*I believe the article should be 'an';
**in the dark mode i think the background color for the suggested content or code should be lightened because it is hard to differentiate it from the rest of the text;
***compare this to **, the code are more highlighted in ** if the bg-color is lighter.

OS: macOS Ventura
browser: Chrome

[demenech]

Thank you!

[crscnc]

Hi

Here's my repository and website:

1. https://github.com/crscnc/portaljs
2. https://portaljs-rho.vercel.app

I'm able to follow the tutorial very well, without problems. I notice some nom warning on install that nor npm audit fix or npm audit fix --force able to resolve. But everything work as intended.

For a quick 15 minutes starter tutorial, it works very well!

• OS: macOS Ventura 13.3.1
• Browser 1: Chrome/ArcBrowser
• Browser 2: Safari
• Browser 3: Firefox Developer

[demenech]

Thanks @crscnc !

[ShreyasMuniyappa]

Hey Datopians,

Here is my code and vercel link

Github: https://github.com/ShreyasMuniyappa/datopian-data-portal
Vercel: https://datopian-data-portal.vercel.app/

Love this project makes reporting systems and data analysis soo simple.

[chohjh156]

I've ended your tutorial
GitHub:chohjh156/portalJS-test
but I can't deploy app

OS: windows 10
browser: chrome

there is no issues

[rufuspollock]

@chohjh156 any info about what happened trying to deploy?

[Kinda-Nefarious]

Hello there,

Here is my code and vercel link:

Github: https://github.com/Kinda-Nefarious/portal-app/
Vercel: https://portal-app-smoky.vercel.app/

This project is amazing. I love how it makes data visualization so easy.

I had some issues deploying I would get error 404 on vercel but it might be due to how I set up folders for root on the platform. Using one-click deploy gave me much better results when making the project.

I would love to be more guides on the website especially aimed at beginners on the different ways you can manipulate and visualize your datasets.

[rohitmajithia]

I successfully deployed and ran the dev server without encountering any issues. Additionally, I observed the pagination issue mentioned by @sneha-sharma12.

Tested on
Ubuntu - 22.04 LTS
NodeJS - v18.17.1

[rufuspollock]

Thanks for reporting!

[AlmubdyMutaikhan]

I've been exploring Portal.js and find it fascinating. However, I encountered a minor issue with the display of Markdown files. Specifically, in the index.md file, when I added a block quote, it rendered as white text on a white background.

Here is a code snippet:

And here how it is rendered:

It gets visible only after I select the text:

Tested on:
OS: Win11
Browser: Chrome 125
Extension: Dark reader mode

[rufuspollock]

Thanks for trying it out and reporting the bug. Could you open an issue in the issue tracker about that https://github.com/datopian/datahub/issues