A Demo Solid App

Build a Solid App Solid App Development FAQs
1

I have been playing around with Solid and have made a demo Progressive Web App that is hosted on my Solid pod.

The app is running here: https://neilrae.solid.community/public/apps/solid_links/

And the github page is here: https://github.com/neilrae/solid-links/

The goal of writing the app was to begin exploring the art of the possible with Solid at this early stage.

The app itself provides filterable links that relate to Solid, Linked Data, Visualisation, Web Services, etc. It is installable on an Android phone and works offline. I have tried to keep it simple, to help new arrivals to figure out how it works.

The app is using vanilla JSON to represent views of data. These were originally created in a CouchDB data store, using Map-Reduce to build an index. My next steps will be to experiment with LDFlex to try to build similar views using JSON-LD and to write updates back to the pod.

The Solside IDE was a lifesaver trying to write and test this on the pod: https://jeff-zucker.github.io/solid-ide/

I hope this is, in some way useful, recognising that it is not exploiting the potential of Linked Data. I have happily worked with RDF in the past, and whilst Turtle has more brevity, it is vital to simplify the hurdles for a web developer in using Solid. Essentially, it needs to feel like using vanilla javascript, where the Linked Data aspects are almost seamless and not verbose.

Let me know if this is useful. Neil

8 Likes
2

This reminds me of the markbook app that Melvin Carvalho has worked on, might be of interest for you to check out :slight_smile:

3

I have now updated this App so that it also writes to a pod, using the solid-file-client developed by @jeffz

The App now has a single html page that does login, reading and writing json, as well as filtered views of a data set. It uses a consistent Material Design UI. With the supporting manifest and serviceworker, it can be saved locally on an android phone and work offline.

I have updated the service worker, as it was previously not updating from the server. You may need to delete the old service worker from your browser. How To Uninstall, Unregister Or Remove A Service Worker ⚙️ [With Example Code]

Still need to incorporate a JSON-LD context and/or conversion to turtle. I also originally chose Vue.js rather than React, so it doesn’t follow the pattern of the React SDK being developed by v @RubenVerborgh.

20
201363Ă—633 68.8 KB

40
401366Ă—631 50.3 KB

5 Likes
4

Looking good!

1 Like
5

Hi Neil,

Thank you for putting this together, i’m new to the solid community. One of the challenges for me is to understand how to incorporate using Solid with Vue js. A couple of years ago, i made the decision to focus on Vue specifically and ignore React. While I’m sure i can remember how to use React, my brain can’t function as quickly between the two frameworks and i don’t have a lot of spare time to devote to re-learning React while learning Soild. I use Vue in my Day job.
Your example is very encouraging.
Thank you for posting this.
J

6

You should look to solid-ide using Vue.js and solid-file-client

1 Like