We need an admin dashboard for easy moderation / approval of testimonies

[codinsonn]

Is your feature request related to a problem? Please describe.

Even in Phase 1, there will need to be an admin dashboard to approve testimonies.

Frustrations encountered with the previous system (WordPress Map Plugin) concerning submission management:

• New submissions are automatically added to the map via the plugin, moderation can only be done as aftercare
• Tracking which submissions are new had to be done manually via a written down submission number
• There is no confirmation that keeps you from accidentally deleting a submission when clicking the delete button
• There is no undo button or archive from which you could "undo" accidental deletion/disapproval

Describe the solution you'd like

For phase 1, we should aim to keep this admin panel as simple as possible:

• List of newly submitted testimonies, in cards
• Clear indication of new / still to approve submissions
• Approve button on each card -> Clicking it adds status: APPROVED -> Now shows on the map client-side
• Delete button each card -> Ask if you're sure -> Move to the archive where it could still be reversed -> Doesn't show on map

Everything we set up in phase 1 however, will be deciding factors for future phases. This is why, when considering a future need for growth as the project scales up in popularity in both users, opensource devs, and moderators/organizations/partners involved, it can be beneficial to think about scale, UX (for mods in this case), and DX (to move fast) early on.

For the above reason, I'm convinced something like the GREEN stack could be beneficial for the following reasons:

• Write-once UI enables zero effort mobile app support (opt-in, really just comes as an extra when starting with this stack)
• Yarn workspaces -> Monorepos are the advised way to work with this stack -> Easy to extract parts into sub-projects
• Easy REST & GraphQL support for Next.js API routes (via the template linked ☝️ /👇)

Describe alternatives you've considered

It is of course entirely possible to just do this in a separate Next.js or even just React PWA (without SSR) project as well.

However:

• Moderator(s) may not always have a laptop with them, yet could still wish to moderate remotely via their phones (e.g. in a train/bus/car with nothing to do otherwise)
• The mobile web will always feel a bit subpar and perhaps frustrating vs. a (react-) native true mobile experience
• More scalability (yarn workspaces) and close to zero effort extra deliverables (iOS and/or Android app) are just really nice to have for future-proofing a project

Additional context

While it brings a lot of benefits, getting all the technologies in the GREEN stack to work together efficiently is not easy. That's why I prepared (and propose we use) a GitHub template repository to get started pretty effortlessly, with all the hard stuff already figured out:

https://github.com/codinsonn/aetherspace-green-stack-starter-monorepo/tree/main

For a full summary of benefits and when not to use the stack, definitely check the README

Ideally, I would set up a small demo/proof of concept for the admin approval process, show this at our next meeting (online or offline), and then we can still decide on whether it's actually a good fit for the project or if we should just go for the vanilla Next.js / PWA alternative.

(Personal Motivation)

As someone who has either a mild case of ADD or autism, it is easy to lose focus or get distracted. However, the flip-side I've experienced when working with a stack I know the ins and outs of is Hyper-focus, which essentially feels like somewhat of a superpower.

In short, this would help me give 110% to this project. But if it comes at too high a cost of a learning curve for the other contributors for essentially not really much benefit in phase 1, I am of course totally willing to set this desire aside.

Edits

1. Changed mention of approved: true to status: APPROVED

[IljaCooreman]

First: I think the analysis of the problem and described solution (for phase 1) is 👌 💯 One detail I like to mention: When you write

Approve button on each card -> Clicking it adds approved: true flag -> Now shows on the map client-side

I think it's better to not work with a flag approved: true, but with a status status: APPROVED for each Report. This is part of a different discussion, namely the data schema (see this issue #5 ) but I already made a first attempt here

Second: For me it's OK to use the green stack for the backoffice, assuming

1. we write the backoffice as a separate project
2. @codinsonn will do the setup and write most of the phase 1 backoffice code himself
3. migrating to another technology stack is relatively straightforward (that is the case from what I think I understand :) )

If this stack proves useful we could consider migrating the client-facing app to the green stack as well, but I'm afraid it might slow us down if we do it right away in the first place.

[codinsonn]

I think it's better to not work with a flag approved: true, but with a status: APPROVED for each Report.

Agreed, edited now in the initial post, going to have a look at #5 later today

Second: For me, it's OK to use the green stack for the back office, assuming

• [x] we write the back office as a separate project
• [x] @codinsonn will do the setup and write most of the phase 1 back office code himself
• [x] migrating to another technology stack is relatively straightforward (that is the case from what I think I understand ✅)

Yes to all of the above ✅ I'll make sure all is clear when I demo the Admin PoC, as some things are better shown vs. told

[fd]

What is the authentication/authorization story when using this starter setup? Auth0 or other OIDC provider? Or is it currently just a username/password based setup? (Also what a bout 2FA?)

[codinsonn]

For the demo, I was thinking username/password (fixed test PW from an env var + secret key, also an env var)

For the actual implementation we can go with any of the options provided here: https://docs.expo.dev/guides/authentication/ Most are Oauth compatible, but likely we'll end up using Identity Server instead of the other third-party services.

I still have to test this, but likely we could build our own implementation with Expo AuthSession

If we end up choosing the GREEN stack just for web (or ditch it in favor of just next.js) we can choose any solution compatible with Next.js, which I assume widens our options.

Not sure about 2FA though 🤔 Never implemented this before, I'll do some research into what's possible

[codinsonn]

Not sure about 2FA though 🤔 Never implemented this before, I'll do some research into what's possible

Quick update from Expo Docs:

AuthSession can be used for any OAuth or OpenID Connect provider

So I suppose we could enable 2FA following this: https://auth0.com/learn/two-factor-authentication/

I'll attempt an OAuth + 2FA login example as well based on this: https://github.com/expo/examples/tree/master/with-auth0