├── .gitignore ├── LICENSE ├── README.md ├── Workshop.md ├── index.html ├── index.js ├── package.json ├── styles ├── CreatePlaylist.scss ├── Playlist.scss ├── Playlists.scss └── index.scss └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | dist 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 OrbitDB 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # web3-workshop 2 | 3 | [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/orbitdb/Lobby) [![Matrix](https://img.shields.io/badge/matrix-%23orbitdb%3Apermaweb.io-blue.svg)](https://riot.permaweb.io/#/room/#orbitdb:permaweb.io) 4 | 5 | This workshop was presented at the OrbitDB session during the #Web3 summit in Berlin, in August 2019. 6 | 7 | ## How to use this repository 8 | 9 | You'll notice, if you run `git log`, that you're on the root of this repository when you start. If you run `git branch`, you'll see that there are six branches with numbers in front of them. We encourage you to either create an extra repository for your work, and checkout the branches as you go, or to create separate branches to do work and checkout the tutorial branches (or, just overwrite your changes as you go). By the end of your `git checkout`s, you should have learned something about how to use OrbitDB! 10 | 11 | Our goal here is to create a basic Playlist app. 12 | 13 | Take a look at the `Workshop.md` to get started! When ever you're done with that document, checkout the next branch in order to see the next step. 14 | 15 | ## Contribute 16 | 17 | We welcome any and all PRs! Also, if you have questions, we encourage you to jump on [Gitter](https://gitter.im/orbitdb/Lobby) and to talk to us. 18 | 19 | ## License 20 | 21 | [MIT](LICENSE) 22 | -------------------------------------------------------------------------------- /Workshop.md: -------------------------------------------------------------------------------- 1 | # Workshop Instructions 2 | 3 | [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/orbitdb/Lobby) [![Matrix](https://img.shields.io/badge/matrix-%23orbitdb%3Apermaweb.io-blue.svg)](https://riot.permaweb.io/#/room/#orbitdb:permaweb.io) 4 | 5 | First, run `npm install` 6 | 7 | Then, to begin the webpack server run the command `npm start`. We'll keep this running over the course of the workshop; it'll automatically hotload any new edits to the server. To do more edits, open a new terminal window. 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Orbit Waves 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter as Router, Route } from 'react-router-dom' 4 | import './styles/index.scss' 5 | 6 | class App extends React.Component{ 7 | render(){ 8 | return ( 9 |
10 | 
      .-``'.  📻                            📻  .'''-.
11 | 
    .`   .`       ~ O R B I T   W A V E S ~      `.   '.
12 | 
_.-'     '._ github.com/orbitdb/web3-workshop/ _.'     '-._
13 | 14 |
}/> 15 | 16 |
17 | ) 18 | } 19 | } 20 | 21 | ReactDOM.render(, document.getElementById('root')) 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web3-workshop", 3 | "version": "1.0.0", 4 | "description": "An OrbitDB Workshop", 5 | "main": "index.js", 6 | "scripts": { 7 | "create": "webpack", 8 | "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/orbitdb/web3-workshop.git" 13 | }, 14 | "keywords": [ 15 | "workshop", 16 | "orbitdb", 17 | "tutorial" 18 | ], 19 | "author": "shamb0t", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/orbitdb/web3-workshop/issues" 23 | }, 24 | "homepage": "https://github.com/orbitdb/web3-workshop#readme", 25 | "babel": { 26 | "presets": [ 27 | "@babel/preset-env", 28 | "@babel/preset-react" 29 | ], 30 | "plugins": [ 31 | [ 32 | "@babel/plugin-transform-runtime", 33 | { 34 | "regenerator": true 35 | } 36 | ], 37 | [ 38 | "@babel/plugin-proposal-decorators", 39 | { 40 | "legacy": true 41 | } 42 | ], 43 | [ 44 | "@babel/plugin-proposal-class-properties", 45 | { 46 | "loose": true 47 | } 48 | ] 49 | ] 50 | }, 51 | "dependencies": { 52 | "ipfs": "^0.59.0", 53 | "mobx": "^5.13.0", 54 | "mobx-react": "^6.1.3", 55 | "orbit-db": "^0.28.6", 56 | "orbit-db-identity-provider": "^0.3.0", 57 | "orbit-db-io": "1.0.2", 58 | "react": "^16.9.0", 59 | "react-dom": "^16.9.0", 60 | "react-router-dom": "^5.0.1" 61 | }, 62 | "devDependencies": { 63 | "@babel/core": "^7.18.6", 64 | "@babel/plugin-proposal-class-properties": "^7.18.6", 65 | "@babel/plugin-proposal-decorators": "^7.18.6", 66 | "@babel/plugin-transform-runtime": "^7.18.6", 67 | "@babel/preset-env": "^7.18.9", 68 | "@babel/preset-react": "^7.18.6", 69 | "babel-loader": "^8.2.5", 70 | "babel-plugin-transform-runtime": "^6.23.0", 71 | "babel-polyfill": "^6.26.0", 72 | "babel-preset-env": "^1.7.0", 73 | "css-loader": "^5.2.7", 74 | "html-webpack-plugin": "^4.5.2", 75 | "sass": "^1.53.0", 76 | "sass-loader": "^10.3.1", 77 | "style-loader": "^2.0.0", 78 | "webpack": "^4.46.0", 79 | "webpack-cli": "^4.10.0", 80 | "webpack-dev-server": "^3.11.3" 81 | }, 82 | "resolutions": { 83 | "acorn": "npm:acorn-with-stage3" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /styles/CreatePlaylist.scss: -------------------------------------------------------------------------------- 1 | bel, 2 | input { 3 | font-size: 1.5em; 4 | } 5 | 6 | label { 7 | padding-top: 2em; 8 | font-size: 24px; 9 | font-weight: bold; 10 | } 11 | 12 | input[type=text] { 13 | width: 70%; 14 | margin: 0.5em 0 1.0em; 15 | padding: 1em 0.25em; 16 | background: #F5F4EF; 17 | border: none; 18 | border-bottom: 3px solid darkslategray; 19 | border-radius: 5px; 20 | transition: all 0.6s ease; 21 | } 22 | 23 | input[type=text]:focus { 24 | outline: none; 25 | background: #fff; 26 | border-bottom: 3px solid darkcyan; 27 | } 28 | 29 | input.active { 30 | outline: none; 31 | background: #fff; 32 | } 33 | -------------------------------------------------------------------------------- /styles/Playlist.scss: -------------------------------------------------------------------------------- 1 | audio { 2 | border-radius: inherit; 3 | vertical-align: middle; 4 | width: 100%; 5 | } 6 | 7 | .playlist-item { 8 | background: #F5F4EF; 9 | margin: 1em 1em; 10 | padding: 0.5em; 11 | } 12 | 13 | .playlist-items li { 14 | height: 75px; 15 | font-size: 24px; 16 | line-height: 75px; 17 | border-bottom: 3px solid darkslategray; 18 | padding: 0.5rem; 19 | } 20 | 21 | .playlist-items li:nth-child(odd) { 22 | background-color: #f1f1f1; 23 | } 24 | 25 | .Playlist { 26 | height: 500px; 27 | } 28 | 29 | .header { 30 | font-size: 24px; 31 | display: flex; 32 | margin: 1em 0; 33 | #title { 34 | margin: 0 1.5em; 35 | align-content: center; 36 | } 37 | } 38 | 39 | .dragZone { 40 | padding-top: 0.1em; 41 | position: relative; 42 | height: 100%; 43 | background-color: skyblue; 44 | } 45 | 46 | .dragZone .message { 47 | position: absolute; 48 | bottom: 0; 49 | left: 20px; 50 | display: none; 51 | } 52 | 53 | .dragZone:hover { 54 | border: 3px dashed gray; 55 | } 56 | 57 | .dragZone:hover .message { 58 | display: block; 59 | } 60 | -------------------------------------------------------------------------------- /styles/Playlists.scss: -------------------------------------------------------------------------------- 1 | .playlist-items { 2 | width: 100%; 3 | list-style:none; 4 | padding-left: 0px; 5 | margin-bottom: 30px; 6 | margin-top: 30px; 7 | } 8 | 9 | .playlist-items li{ 10 | width:100%; 11 | letter-spacing:0.06em; 12 | text-align:left; 13 | margin-right: auto; 14 | margin-left: auto; 15 | margin-bottom: 8px; 16 | } 17 | 18 | .close{ 19 | display: flex; 20 | cursor:pointer; 21 | float:right; 22 | font-weight:bold; 23 | text-align:right; 24 | margin: 5px; 25 | margin-top: -2px; 26 | } 27 | -------------------------------------------------------------------------------- /styles/index.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin:0; 3 | padding:1em; 4 | height:100%; 5 | } 6 | 7 | pre { 8 | margin: 0; 9 | padding: 0; 10 | font-size: 24px; 11 | font-weight: bold; 12 | color: teal; 13 | } 14 | 15 | pre a { color: skyblue; } 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry : './index.js', 6 | output : { 7 | path : path.resolve(__dirname , 'dist'), 8 | filename: 'index_bundle.js', 9 | publicPath: '/' 10 | }, 11 | devServer: { 12 | historyApiFallback: true 13 | }, 14 | module : { 15 | rules : [ 16 | {test : /\.(js)$/, use:'babel-loader'}, 17 | {test : /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']} 18 | ] 19 | }, 20 | mode:'development', 21 | plugins : [ 22 | new HtmlWebpackPlugin ({ 23 | template : './index.html' 24 | }) 25 | ] 26 | 27 | } 28 | --------------------------------------------------------------------------------