CC: Creative Copy

CC
The Problem
What We Are
User Research: Insights that led our execution
Tech Stack
Home Page
Home Page 2: Synced with MetaMask. Upload and Sign In will lead you to create a username.
User (Creator-Mode) Image Upload Home
User (Creator-Mode) Image Upload Page 2: Prompts user to add details. Warns about Public mode.
User (Creator-Mode) Image Upload Page 3: Option to learn more about Hash over icon hover.
User (Creator-Mode) Image Upload Page 4: Image is uploaded!
User (Creator-Mode) Image Upload Page 5: Second warning over Public mode over icon hover
User (Creator-Mode) Image Upload Page 6: Quick Image details over module bar hover
User (Creator-Mode) Image Transactions Page 1: Toggles between allowing users to approve or deny request from other users to download image
User (Creator-Mode) Image Transactions Page 2: Details about consensual approve/deny through users giving context
User (Patron-Mode) Images Downloaded Page: Allows users to see all images downloaded
User (Patron-Mode) Image Transactions Requested Page: Allows users to see approved and pending requests

Inspiration

What it does

Our application for the EthDenver hackathon is called CC, which is a reference to CreativeCommons licensing and carbon copying (cc-ing) someone on an email.

CC allows creators to track distribution of their digital content via the blockchain's immutable transaction history.

The idea is allow creators to upload their content to IPFS and simultaneously claim their ownership of it.

Patrons of their work can also ask for permission to use the work by submitting a request with their proposed uses.

The creator can then allow or deny each user based on their proposal.

How we built it

We came together over the idea, met over dinner after all meeting on the EthDenver Slack Group, story mapped, brainstormed & broke down the steps, utilized everyone's unique expertise to delegate components of the build, and then stitched all the moving pieces.

Design: Amy. Front-End: Will. Back-End: Lucas.

Mention: Artur who we lost to the pork sickness frenzy.

We built this Dapp with Truffle, React, Redux, OpenZepplin contracts, Figma and Metamask. We use Infura's IPFS service for image uploads.

Challenges we ran into

Back-End & Front-End The major challenges we hit were with Solidity. Late into Saturday night, we began testing the encoding and decoding of the IPFS hash coming through the contract. That ID is unique and crucial to our implementation.

We sadly realized that an IPFS hash is ~34 bytes and Solidity supports only bytes32. So the creation, storage and retrieval of those ids, as we had designed it, will not work.

Solidity also does not support nested arrays, so converting the bytes32 to strings and returning a dynamic array of strings (like string[]) was not a workable solution inside the time frame.

User Experience Design Iterations

As we faced challenges with the development, the scope of our work quickly changed. There were lots of versions of the user flow. The features were constantly in flux, dependent on the possibilities for implementation.