learn-awesome/meta

zadavan

@zadavan

just the UI, it needs work

eshnil

@eshnil

I started work on adding WebFinger and ActivityPub support as per learn-awesome/learn#121 . This will allow anyone in fediverse to follow our users' reviews in any app like Mastodon or Pleroma. Inbox implementation (needed for keeping track of followers) is pending.

eshnil

@eshnil

I added react-rails and built a simple component just as proof-of-concept that React works within Rails app. These components live in app/javascript/components. More info here: https://github.com/reactjs/react-rails

It looks like server-side rendering is also possible which means we should be able to use React on all pages, not just ones that logged-in users can see.

Need to do this thoughtfully though:
(1) Semantic markup goes beyond the SEO benefits.
(2) Now we have 3 ways of building view components :-D

Rails partials in app/views/components
ActionView::Component in app/components
and now React components in app/javascript/components

The proof-of-concept React components are in app/views/welcome/whatsnew.html.erb and will be shown on /whatsnew page.

Jigyasu Arya

@lastnamearya

I added react-rails and built a simple component just as proof-of-concept that React works within Rails app. These components live in app/javascript/components. More info here: https://github.com/reactjs/react-rails
It looks like server-side rendering is also possible which means we should be able to use React on all pages, not just ones that logged-in users can see.

👍

eshnil

@eshnil

@lastnamearya @zadavan Why don't the two of you identify some areas where we can start using React to improve the UX for logged-in users?

Jigyasu Arya

@lastnamearya

@lastnamearya @zadavan Why don't the two of you identify some areas where we can start using React to improve the UX for logged-in users?

Hi @zadavan :wave:

zadavan

@zadavan

Hello @lastnamearya

@eshnil nice to see you are implementing ActivityPub!

also I wonder maybe Vue will be better suited for this project, since our priority might be rapid experimentation and iteration given the user's feedback

zadavan

@zadavan

vue excels at flexibility and new contributors might start adding code easier

WDYT?

Jigyasu Arya

@lastnamearya

Hello @lastnamearya

Can we get on a Zoom call so we can start :)

eshnil

@eshnil

One approach could be to build a fresh app using the GraphQL api

Hasura offers a quick way to generate graphql API for any database in Postgres. No backend code would be necessary.

I have the graphql instance running in Heroku.

zadavan

@zadavan

using graphql may add an extra layer of complexity

eshnil

@eshnil

Getting the graphql backend ready and stable will also make it easy to build mobile apps, desktop apps, browser extensions etc

zadavan

@zadavan

but this could improve separation of concerns

people could work at frontend without worrying about the backend

and backend work without compromising the frontend

i like the idea

eshnil

@eshnil

https://lagql.herokuapp.com/

You need an API secret to access this graphql console. Can share publicly once the APis are secured. You can read up on Hasura in the meanwhile.

zadavan

@zadavan

@eshnil are there going to be two repositories?

one for frontend and one for backend?

or all in one?

eshnil

@eshnil

Separate

This would be the graphql query to get 5 items, with their links for a topic by name:

query getLinksForTopic ($topic_name: String!) {
  topics(where: { name: { _eq: $topic_name } }  ) {
    id
    name
    topic_idea_sets(limit:5) {
      idea_set {
        items {
          name
          item_type_id
          links {
            url
          }
        }
      }
    }
  }
}

You can build out the pages for logged-out users, while I implement the security rules for logging in, adding items, adding reviews etc.

eshnil

@eshnil

You should create a new public repo here to start: https://github.com/learn-awesome
Don't forget to add an open-source license. I think AGPL would be the most appropriate.

learn-anything.xyz has some designs on Figma: https://www.figma.com/file/N2ioUbr7aiapNijNH8DH3Xh3/Learn?node-id=108%3A2
You could take this as a starting point to implement the React UI. Or take ideas from learnawesome.org.

Jigyasu Arya

@lastnamearya

You should create a new public repo here to start: https://github.com/learn-awesome
Don't forget to add an open-source license. I think AGPL would be the most appropriate.

:pencil:

eshnil

@eshnil

For the react app, consider using NextJS from the start: https://mxstbr.com/thoughts/tech-choice-regrets-at-spectrum

eshnil

@eshnil

JWT token issuing for GraphQL client now works. Also, added the read permissions for user role. So graphQL clients can use all the select queries they need.

All these queries are now accessible to GraphQL clients.

See the bottom of README for instructions on how to implement auth in graphql clients: https://github.com/learn-awesome/learn/blob/master/README.md

eshnil

@eshnil

anonymous access also works now.

Jigyasu Arya

@lastnamearya

Refactoring UI ~ https://www.producthunt.com/posts/refactoring-ui-the-book
Google Drive Link ~ https://drive.google.com/file/d/1NiL8_J1ZeIIgkr-0P7iUL1ZfgEpfjHQq/view?usp=sharing

eshnil

@eshnil

New Frontend to be built with GraphQL + NextJS + React : https://github.com/learn-awesome/learn-awesome-frontend
The idea is to build it on the lines of LearnAnything.xyz's roadmap and ideas: https://github.com/learn-anything/docs/tree/master/docs Also decouple the backend and frontend work with GraphQL so that contributing becomes easier for more developers.

Backend devs can then focus on importing more resources and connections to build the learning map.

eshnil

@eshnil

Hasura provides a NextJS boilerplate app: https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-postgres-graphql

eshnil

@eshnil

Added sample GraphQL query and Heroku configuration and deployed at https://nextreactgql.herokuapp.com/
The topics on this page are being fetched from LearnAwesome's existing db via Hasura :sunglasses: :metal:

eshnil

@eshnil

To explore and test the graphql queries, use Hasura console: https://lagql.herokuapp.com/console
DM me for the admin secret.

I'd recommend building a full-fledged experience for anonymous users before taking up auth etc.

eshnil

@eshnil

The entire graphql schema maps directly to the database schema which is available here: https://github.com/learn-awesome/learn/blob/master/db/structure.sql

eshnil

@eshnil

example gql:

query getLinksForTopic ($topic_name: String!) {
  topics(where: { name: { _eq: $topic_name } }  ) {
    id
    name
    topic_idea_sets {
      idea_set {
        items {
          name
          item_type_id
          links {
            url
          }
        }
      }
    }
  }
}

eshnil

@eshnil

On the React+GraphQL app, do you need any help? @zadavan @lastnamearya

Where communities thrive

People

Repo info

Activity