Create walk through to guide users through how to use the app

Here’s a good possible example to create a walkthrough:

https://react-joyride.com/

It allows us to highlight elements in the React side and home page and explain to users how to interact with them.

I’d like to take on this task. So where should I start?

1 Like

Great! Here’s our Git for the Reactjs side

I’ll send an invite if you aren’t already in the team over there. Only the local (map) side of the project will load on a local version, and i’m ok with whatever package you want to use. We just want to be able to put text boxes on elements of the platform when a user 1st sees them, so we can explain how the platform works for new users. We’ll then use a plugin to do the same on the Global (forums) side.

You don’t need to worry about the homepage as that is being rebuilt right now and there should be a new live version by the end of the week.

Oh, all our text is imported via i18n add we have different platforms running the same codebase. Check out the i18n post in the documentation section here, it’s very simple :slight_smile:

How do I know if I am in the team on github? My username is zdbrenda.

I am actually feeling excited about getting back here :wink:

1 Like

I tried to add the email address you used to sign up here and it says you were already a member. I’ll happily add another if you like

Great that you’re excited. Me too :slightly_smiling_face::sunglasses:

1 Like

Good morning @AndyatFocallocal! In what other pages/sections are we going to implement react-joyride? Asking since the homepage isn’t up yet. Also is there any info/copies to what should I add? I have no problems in coming up with the copies myself, so just confirming if that’s the case.

PS I’m replying here instead of the first thread where I commented since this comment is more related to this task.

1 Like

Good afternoon @ludanin!

It’ll be this page and the main elements on it:

https://publichappinessmovement.com/docuss/m_gather

Map

  • Gather
  • Filter

Then again the 1st time they open an event or person who’s listed on the map

Right now the two windows use the same form with sections being hidden and expanded for differences. We are switching to separate forms after MVP launch so they can be better customised to their purpose.

Window type - Users profile
Example:

  • General box to explain what they can do here. The window itself is a bit behind others in development so more features will be added soon, and the position of links “photos” “videos” “chat” will be enhanced as this is the main way to engage with a user. This is basically like their FB profile page.

Window Type - Something to gather around
Example: Public Happiness

  • Share on social media
  • Tasks to help build the activity
  • Links which open our forum ‘Tasks’ ‘Media’ ‘Wall’

Note

On some platforms an element which is highlight on the Meta site might not need explaining, so if its possible the package should skip an explanation if the text in i18n is left blank

Cool. I’ll try to set up my local dev env in a couple of days and start working on it. I’ll use it as an opportunity to practice reactjs :sunglasses:

1 Like

Here’s the i18n file where the text should be added for the walkthrough. Entirely upto you if you create a walkthrough folder or add a walkthrough section to the folders already there

How do I join the slack?

We aren’t using it anymore. Where did you find a reference to it?

Here:

  1. obtain the most recent settings.json file from slack, its pinned in the #meteor-maps thread, and place it in the project’s folder
  • settings.json has a property named 'mapType': 'gatherings' , you can change ‘gatherings’ to ‘btm’ to work on Focallocal or Brighter Tomorrow

So how do I get settings.json file?

I’ll email it to you and change that in the Getting Started guide. Thank you

1 Like

Is it this getting started guide you are following?

Nope, I was following this readme in github:

I’ve just updated it to say ‘please don’t follow this one’. Its mostly the same but has a few bits missing or which are outdated. :sweat_smile:

1 Like

Then I’ll follow the one you mentioned instead. :grin:

1 Like

I am getting this error when running meteor npm install

I ran npm install node-pre-gyp -g which was successful, but then when I was running meteor npm install I was still getting the same error.

1 Like