/Icloud

Packery grid x React x Media x CRUD x Gallery x juno x icp

Primary LanguageJavaScript

React + Tailwind + ICP

An evolution of the diary example from https://github.com/buildwithjuno/examples showcasing web3 capabilities

This web3 sample app is totally stored ON-CHAIN, it uses React and Tailwind Javascript that showcases authentication, datastore and storage usage in the internet computer from Dfinity.

Added functionnality :

  • CRUD
  • Packery
  • pictures and videos support
  • Lazyload implemented
  • swiper to navigate the elements individually
  • Usage tags buttons to filter

Getting started

Make sure you have node.js LTS installed.

Log in Juno website, get your satellite ID and change juno.json

git clone https://github.com/Kyliux/Icloud
npm ci
npm run build && juno deploy

Example : https://m5rwi-daaaa-aaaal-acrpq-cai.icp0.io/ Please note that only the sattelite owner have the possibility to add or remove items. The principalid of your satelite login device have to be configured in Principalid.js to be able to change your data.

TODO List

Optimisation Gallery

  • Lazyload the pictures / videos inside the swiper too
  • add a button to print the latest media first
  • Decide how to deal with big resolution picture / video
  • when the Table is rly functionnal, add data
  • video tag default for videos
  • Story image issue needing regular packery reload

Functionality

  • add Vetkeys functionnality to host in a secure way sensible data on juno or the IC and be sure only specific Principal can decode it.
  • Add social share button on every collection
  • Add comment on every collection and make sure no spam are possible
  • integrate NostrIC
  • allow more complex articles

inspiration